I'm working on a carousel of images and it's all working great but the fading between the images is not what I want. I would like a smooth crossfade. Right now they jump as you can see in my code, below. How can I make it more smooth?
$.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>
I guess I got it to be smooth enough, I hope it will help you. So you need to do changes in css to:
.images-list > li {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
}
and changes 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);
};
Hope it helps, if not will figure out something next
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.