jquery 简单的 ul li 内容滑块

Question

I trying to make a super simple ul li (content) slider. My goal is to add a prev and next button.

Both buttons work fine, but my problem is with the sliding effect. The next sliding is very cool, but the prev button is not, and I can't figure it out how to make it like the 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 1

Try the 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>