How to display Image in slider

Question

I am trying to display images in slider. But my images are displaying one below the other. View:

        @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

I recreated the carousel using the code you provided. The only issue I found was that there are no dots being provided in the HTML. Once I removed all references to the dots in the JavaScript everything worked as expected.

If you are still experiencing the issue, I would recommend posting the rendered HTML as I didn't encounter any issues related to image positioning.

 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”插件，它很棒而且非常简单。