There is such a slider I want it to change smoothly. Of course you say there are many libraries to use them, but no, I want to create something of my own. (I am a beginner)
Title ##

var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; } 
 .slideshow { /* для того чтобы не влез на враппер**/ position: relative; z-index: 0; background-size: cover; } .mySlides { width: 100%; height: 564px; transition: 0.5s; } .button { z-index: 1; padding: 6px 16px; background-color: #000; text-align: center; cursor: pointer; border: none; } .button:hover { opacity: 1; background-color: #fff; } .display-left { opacity: 0.6; position: absolute; top: 50%; right: 1%; border-radius: 50%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%) } .display-right { opacity: 0.6; position: absolute; top: 50%; left: 1%; border-radius: 50%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%) } 
 <div class="slideshow"> <a href="#"><img class="mySlides" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-5.jpg"></a> <a href="#"><img class="mySlides" src="https://www.pets4homes.co.uk/images/breeds/43/large/f203d4de017100405882dbf7268613d6.jpg"></a> <a href="#"><img class="mySlides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Huskiesatrest.jpg/1200px-Huskiesatrest.jpg"></a> <button class="button display-right" onclick="plusDivs(-1)">&#10094;</button> <button class="button display-left" onclick="plusDivs(1)">&#10095;</button> </div>

##

    1 answer 1

    The frame change you have is due to display:block/none . From the side of css it is always a sharp appearance / disappearance, since the element is either there or not. Try a frame change due to transparency:

     var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.opacity = "0"; } x[slideIndex-1].style.opacity = "1"; } 
     .slideshow { /* для того чтобы не влез на враппер**/ position: relative; z-index: 0; background-size: cover; height: 564px; } .mySlides { width: 100%; height: 564px; transition: 0.5s; position:absolute; } .button { z-index: 1; padding: 6px 16px; background-color: #000; text-align: center; cursor: pointer; border: none; } .button:hover { opacity: 1; background-color: #fff; } .display-left { opacity: 0.6; position: absolute; top: 50%; right: 1%; border-radius: 50%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%) } .display-right { opacity: 0.6; position: absolute; top: 50%; left: 1%; border-radius: 50%; transform: translate(0%,-50%); -ms-transform: translate(0%,-50%) } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slideshow"> <a href="#"><img class="mySlides" src="http://cdn3-www.dogtime.com/assets/uploads/gallery/siberian-husky-dog-breed-pictures/siberian-husky-dog-breed-pictures-5.jpg"></a> <a href="#"><img class="mySlides" src="https://www.pets4homes.co.uk/images/breeds/43/large/f203d4de017100405882dbf7268613d6.jpg"></a> <a href="#"><img class="mySlides" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Huskiesatrest.jpg/1200px-Huskiesatrest.jpg"></a> <button class="button display-right" onclick="plusDivs(-1)">&#10094;</button> <button class="button display-left" onclick="plusDivs(1)">&#10095;</button> </div>

    From the side of js , for example in jQuery , there is a whole set of functions with ready-made animations:

     .hide() .show() .slideUp() .slideDown() .slideToggle() .fadeIn() .fadeOut() .fadeTo() .fadeToggle()
    • thank you very much and God bless you - Excess Suslik