如何在滑块中显示图像答案

【问题标题】：How to display Image in slider如何在滑块中显示图像
【发布时间】：2018-06-27 09:25:13
【问题描述】：

我正在尝试在滑块中显示图像。但是我的图像显示在另一个之下。查看：

        @if (Model.Photos.Count > 0)
        {

            <div style="padding:10px">
                <div class="slide-content" style="max-width:800px">
                    @foreach (var photos in Model.Photos)
                    {
                        <img class="mySlides" src="@Url.Content(@photos.photo_url)" style="width:100%">

                    }
                    <div class="w3-center">
                        <div class="w3-section">
                            <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
                            <button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
                        </div>
                    </div>
                </div>
             </div>
        }
     </div>

CSS：

javascript：

【问题讨论】：

你能包含你的 CSS 吗？
我在查看您的代码后猜测这是由图像显示为block 而不是inline-block 引起的。尝试在 CSS 中将 .mySlides { display: block; } 替换为 .mySlides { display: inline-block; }，并在 JavaScript 中将 x[slideIndex - 1].style.display = "block"; 替换为 x[slideIndex - 1].style.dislay = "inline-block"。我也会试着举一个例子。
我试过了，但没用。

标签： javascript html css bootstrap-4

【解决方案1】：

我使用您提供的代码重新创建了轮播。我发现的唯一问题是 HTML 中没有提供点。一旦我删除了对 JavaScript 中点的所有引用，一切都按预期工作。

如果您仍然遇到此问题，我建议您发布呈现的 HTML，因为我没有遇到任何与图像定位相关的问题。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  //var dots = document.getElementsByClassName("Slides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  /*
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  */
  x[slideIndex - 1].style.display = "block";
  //dots[slideIndex - 1].className += " w3-red";
}

.slide-content {
  max-width: 300px;
  margin: auto;
  position: relative;
}

.mySlides {
  display: block;
}

.slide-content {
  margin: auto;
}

.w3-center {
  text-align: center !important;
}

.w3-section,
.w3-code {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.w3-light-grey,
.w3-hover-light-grey:hover,
.w3-light-gray,
.w3-hover-light-gray:hover {
  /* color: #000 !important; */
  background-color: #f1f1f1 !important;
}

.w3-btn,
.w3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.w3-btn,
.w3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}

button,
html [type=button],
[type=reset],
[type=submit] {
  -webkit-appearence: button;
}


/* Custom styles for testing */

img {
  max-height: 300px;
  margin-left: auto;
  margin-right: auto;
}

<div style="padding:10px">
  <div class="slide-content" style="max-width:800px">
    <img class="mySlides" src="https://i.ytimg.com/vi/5Nj2BngIko0/maxresdefault.jpg">
    <img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg">
    <img class="mySlides" src="http://i0.kym-cdn.com/entries/icons/original/000/016/546/hidethepainharold.jpg">
    <div class="w3-center">
      <div class="w3-section">
        <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ </button>
        <button class="w3-button w3-light-grey" onclick="plusDivs(1)"> ❯</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

尝试使用“猫头鹰旋转木马2”插件，非常棒，非常简单。

【讨论】：