Реализация анимации в перекрестной регулировке CSS между изображением слайдами

Question

Я сделал слайд-шоу с помощью учебника изложены here

В идеале я хотел бы, Transistions bewteen слайдов к кроссфейду при нажатии, а не мигать белые и исчезать Кто-нибудь знает способ сделать это?

До сих пор я пробовал это.

HTML

<div class="contentWrapper"> 
     <div id="sliderWrapper"> 
      <div id="slider" ondragstart="return false;"> 
       <img class="mySlides fade" src="../images/lupe1.jpg"> 
       <img class="mySlides fade" src="../images/lupe2.jpg"> 
       <img class="mySlides fade" src="../images/lupe3.jpg"> 
       <img class="mySlides fade" src="../images/lupe4.jpg"> 

       <div class="overlay-controls left-control" onclick="plusDivs(-1)"></div>     
       <div class="overlay-controls right-control" onclick="plusDivs(1)"></div> 

      </div>            
     </div> 
    </div> 

</div> 

CSS

div.contentWrapper { 
    margin-left: 235px; 
    padding: 0px; 
    display: block; 
} 

#sliderWrapper { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    right: 0 
} 

#slider { 
    width: auto; 
    height: calc(100vh - 120px); 
    display:block 
    vertical-align:middle; 
    text-align:center; 
    padding-top: 60px; 
} 

img.mySlides{ 
    max-width: 100%; 
    max-height: 100%; 
    height:auto; 
} 


.fade { 
    -webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */ 
    -moz-animation: fadein 0.5s; /* Firefox < 16 */ 
    -ms-animation: fadein 0.5s; /* Internet Explorer */ 
    -o-animation: fadein 0.5s; /* Opera < 12.1 */ 
    animation: fadein 0.5s; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox < 16 */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari, Chrome and Opera > 12.1 */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Opera < 12.1 */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

JS

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"); 
    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 = ""; 
} 

Answer 1

Есть несколько возможных реализаций для склейки, однако простой способ этого достичь, используя переходы вместо изменения отображение элемента. (Это вызывает автоматическое скрытие всего элемента) Для этого можно установить при переходе свойство каждого слайда к этому:

img.mySlides{ 
    max-width: 100%; 
    max-height: 100%; 
    height:auto; 
    position: absolute; 
    left: 0; 
    top: 0; 
    opacity: 1; 
    transition: opacity .5s ease; 
} 

А затем переключить непрозрачности вместо свойства отображения в вашем JavaScript, как:

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"; 
} 

* Обратите внимание, что для этого вам необходимо будет поместить абсолютно все слайды внутри контейнера ползунка, чтобы они были выведены из потока и расположены в одном и том же месте.

Надеюсь, это поможет!