Reputation: 167
Im trying to run the exact same script and css that i use from my perfectly working image fade carousel mobile version. But on desktop as you can see from the snippet there is no fadeOut from what i can see. It just blink and show the background color and fades the next image in. I would like help to make this a smooth fade without any glitch or anything.
$.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(3000)
.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);
};
$('#slider2').slider();
#slider2 {
position: absolute;
background-color: #5A6D77;
padding: 0;
margin: 0;
z-index: -1;
-webkit-transform: translate3d(0, 0, 0);
}
#slider2 img {
width: 100%;
height: 100%;
margin: 0;
z-index: -1;
-webkit-transform: translate3d(0, 0, 0);
}
.images-list>li {
width: 100%;
height: 100%;
background-size: cover;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
-webkit-transform: translate3d(0, 0, 0);
margin: 0;
}
ul {
list-style: none;
position: absolute;
margin: 0;
padding: 0;
}
.images-list {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
<li data-index="0"><img src="https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
<li data-index="1"><img src="https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
<li data-index="2"><img src="https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
<li data-index="3"><img src="https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
</ul>
Upvotes: 0
Views: 634
Reputation: 2186
The reason why the animation pops back to the background on each transition is that the LI tags are positioned one after another, they need to be one on top of each other with position:absolute
set on the LI.
I also noticed that you have background-size: cover, which only applies to a background-image CSS style, and not an IMG tag inside the LI tag.
I've modified the HTML to use a background-image, so the scaling works better.
No changes to the Javascript.
$.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(3000)
.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);
};
$('#slider2').slider();
#slider2 {
position: absolute;
background-color: #5A6D77;
padding: 0;
margin: 0;
z-index: -1;
-webkit-transform: translate3d(0, 0, 0);
}
.images-list>li {
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
background-size: cover;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
-o-transition: 0s;
-webkit-transform: translate3d(0, 0, 0);
margin: 0;
}
ul {
list-style: none;
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
margin: 0;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
<li data-index="0" style="background-image: url(https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"</li>
<li data-index="1" style="background-image: url(https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
<li data-index="2" style="background-image: url(https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
<li data-index="3" style="background-image: url(https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
</ul>
Upvotes: 1