pedram pedram - 2 months ago 15
CSS Question

jquery simple ul li content slider

I trying to make a super simple ul li (content) slider, my goal is to add prev and next button, both button works fine but my problem is with sliding effect, next sliding is very cool but prev button not and i can't figure it out how to make it like next button sliding.



$("ul li:gt(0)").hide();

$('#Next').click(function(){
$('ul > li:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('ul');
});

$('#Prev').click(function(){
$('ul > li:last')
.slideDown(1000)
.prev()
.slideUp(1000)
.end()
.prependTo('ul');
$("ul li:gt(0)").slideUp();
});

li {
list-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<a id="Prev">Prev</a>
<a id="Next">Next</a>




Answer

Try below. add $("ul li:gt(0)").slideUp(1000);

$("ul li:gt(0)").hide();

$('#Next').click(function(){
  $('ul > li:first')
    .slideUp(1000)
    .next()
    .slideDown(1000)
    .end()
    .appendTo('ul');
});

$('#Prev').click(function(){
  $('ul > li:last')
    .slideDown(1000)
    .prev()
    .slideUp(1000)
    .end()
    .prependTo('ul');
$("ul li:gt(0)").slideUp(1000);
});
li {
  list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<a id="Prev">Prev</a>
<a id="Next">Next</a>

Comments