如何在滑块中显示图像

Question

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

        @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：

Answer 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>

Answer 2

尝试使用“ Owl Carousel 2”插件，它很棒而且非常简单。