Disable reverse animation in slideshow without slides
I have a banner slideshow set up with unlider (unslider.com) that technically behaves correctly. However, I don't want it to rewind the animation back to the first slide when the last slide is over. I want it to just go to the first slide just like all the other slide transitions. I cannot figure it out.
Code below and working demo here:
http://codepen.io/trevoray/pen/GgPGaB
<div id="hp-banner">
<div id="hp-banner-left" class=banner>
<ul>
<li id="image1">
<a href="/test.php" style="width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 100px;"></a>
<a href="/test.php" style="width: 100px; height: 100px; border: 0; position: absolute; top: 100px; left: 400px;"></a>
</li>
<li id="image2"></li>
<li id="image3"></li>
<li id="image4"></li>
<li id="image5"></li>
</ul>
</div>
<div id="hp-banner-right">
<ul>
<li><a href="">banner 1</a></li>
<li><a href="">banner 2</a></li>
<li><a href="">banner 3</a></li>
<li><a href="">banner 4</a></li>
<li><a href="">banner 5</a></li>
</ul>
</div>
<!-- hp banner end -->
</div>
<style>
#hp-banner {
width: 1024px;
}
#hp-banner-left {
float: left;
width: 680px;
height: 200px;
}
#hp-banner-right ul {
width: 324px;
float: left;
margin: 0;
padding: 0;
}
#hp-banner-right ul li {
list-style: none;
line-height: 38px;
height: 38px;
background: #f9fafb;
position: relative;
color: #8d8d69;
text-align: center;
border: solid thin #cbcccc;
}
#hp-banner-right ul li:hover,
#hp-banner-right ul li.active {
color: white;
background: #4882c3;
}
#hp-banner-right ul li:hover:before,
#hp-banner-right ul li.active:before {
content: '';
border-top: 19px solid transparent;
border-bottom: 19px solid transparent;
border-right: 38px solid #4882c3;
position: absolute;
right: 100%;
top: 0;
}
.banner {
position: relative;
overflow: auto;
width: 680px;
}
.banner ul {
margin: 0;
padding: 0;
}
.banner li {
list-style: none;
}
.banner ul li {
float: left;
display: block;
max-width: 100%;
height: 200px;
/* -webkit-background-size: 100% 100%;*/
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
-ms-background-size: 100% 100%;
/* background-size: 100% 100%;*/
}
#image1 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image1.jpg");
}
#image2 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image2.jpg");
}
#image3 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image3.jpg");
}
#image4 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image4.jpg");
}
#image5 {
background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/image5.jpg");
}
</style>
<script>
$(function() {
$('.banner').unslider({
speed: 500, // The speed to animate each slide (in milliseconds)
delay: 2000,
dots: true,
complete: function() {
var index = $('#hp-banner .dot.active').index();
$('#hp-banner-right li').removeClass('active').eq(index).addClass('active');
}
});
});
$(document).ready(function() {
$('#hp-banner-right li').first().addClass('active');
});
</script>
source to share
It would probably be better to switch to another slideshow plugin like FlexSlider 2 , but if you intend to use Unslider there is a hacky way to accomplish what you want.
Add a duplicate of your first image to the end of the list
<ul>
<li class="image1"></li>
<li class="image2"></li>
<li class="image3"></li>
<li class="image4"></li>
<li class="image5"></li>
<li class="image1"></li> <!-- Repeat first list item -->
</ul>
Then, when the unlider reaches the last slide (duplicate), the following code should be executed in the full callback.
if (index == $("#hp-banner-right li").length)
{
var data = slidey.data('unslider');
data.speed = 0;
data.move(0, function () {})
data.speed = 500;
$('#hp-banner-right li').removeClass ('active').eq (0).addClass ('active');
}
Which will temporarily set the jump speed to 0 so that the slider will smoothly switch to the actual first item in the list.
source to share
When I tried to apply the hack from "Harangue" I understood the code and I found that you can just use the: option infinite: true
to do this. So, no hacking! He just didn't document it well.
Source:
- unslider.js v2.0 on line 465 contains the following code:
if(self.options.infinite) {
// So then we need to hide the first slide
self.$container.css('margin-' + prop, '-100%');
}
source to share