Make-Bild Karussell Crossfade reibungslos

Question

Ich arbeite an einem Karussell von Bildern und es funktioniert alles gut, aber das Verblassen zwischen den Bildern ist nicht das, was ich will. Ich hätte gerne eine sanfte Überblendung. Im Moment springen sie, wie Sie in meinem Code unten sehen können. Wie kann ich es flüssiger machen?

$.fn.slider = function() { 
 
    var $this = this; 
 
    var $controls = $this.nextAll('.controls').first(); 
 
    var index; 
 

 
    $this.find('li:gt(0)').hide(); 
 
    setInterval(function() { 
 
     $this.find('li:first-child').fadeOut(2000) 
 
     .next('li').fadeIn(3000) 
 
     .end().appendTo($this); 
 
     var index = $this.find('li:first-child').data('index'); 
 
     $controls.find('li.active').removeClass('active'); 
 
     $controls.find('li').eq(index).addClass('active'); 
 
    }, 
 
    4000); 
 
}; 
 

 
$('#slider1').slider();

#slider1 { 
 
    position: absolute; 
 
    background-color: #5A6D77; 
 
    top: 0px; 
 
    left: 180px; 
 
    height: 449px; 
 
    width: 195px; 
 
    z-index: 0; 
 
    padding: 0; 
 
} 
 

 
#slider1 img { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    position: absolute; 
 
} 
 

 
.images-list { 
 
    position: absolute; 
 
} 
 

 
.images-list>li { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    -webkit-transition: 0.5s; 
 
    -moz-transition: 0.5s; 
 
    -ms-transition: 0.5s; 
 
    -o-transition: 0.5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="slider1" class="images-list"> 
 
    <li data-index="0"><img src="https://www.trustedclothes.com/blog/wp-content/uploads/2016/06/bill_gordon_shares_his_spraying_tips.jpg" alt=""> </li> 
 
    <li data-index="1"><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></li> 
 
    <li data-index="2"><img src="https://static.pexels.com/photos/172292/pexels-photo-172292.jpeg" alt=""></li> 
 
    <li data-index="3"><img src="https://www.alternet.org/sites/default/files/styles/story_image/public/story_images/plastic.png?itok=8_NKVjx4" alt=""></li> 
 
</ul>

View on JSFiddle

Answer 1

Ich denke, ich habe es glatt genug sein, ich hoffe, dass es Ihnen helfen. Sie müssen also Änderungen in CSS tun:

.images-list > li { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    -webkit-transition: 0s; 
    -moz-transition: 0s; 
    -ms-transition: 0s; 
    -o-transition: 0s; 
} 

und Änderungen in jquery:

$this.find('li:gt(0)').hide(); 
    setInterval(function() { 
     $this.find('li:first-child').fadeOut(4000) 
      .next('li').fadeIn(4000) 
      .end().appendTo($this); 
     var index = $this.find('li:first-child').data('index'); 
     $controls.find('li.active').removeClass('active'); 
     $controls.find('li').eq(index).addClass('active'); 
    }, 
    4000); 
}; 

Hoffe, dass es hilft, wenn nicht

etwas nächstes wird herauszufinden