animate.cssを使用してリストを回転したい5つのリストアイテムがあります.1番目と最後のリストアイテム(0と4)を一定に保ち、リストアイテム(1,2、 3)私はanimation.IがアニメートCSSを使用してホイールとして回転
jQuery(document).ready(function($){
$('.flex-next').click(function(){
$('.thumbnailIcon').each(function(index, item){
\t var fourthLi = $(item).find("li:nth-child(4)");
var secondLi = $(item).find("li:nth-child(2)");
//var FirstLi = $(item).find("li:nth-child(1)","li:nth-child(3)").addClass('animated flipInY');
var thirdLi = $(item).find("li:nth-child(3)").addClass('animated fadeInRight');
var secondLi = $(item).find("li:nth-child(2)").addClass('animated fadeInRight');
\t $(secondLi).before(fourthLi);
});
});
$('.flex-prev').click(function(){
$('.thumbnailIcon').each(function(index, item){
\t var fourthLi = $(item).find("li:nth-child(2)");
var secondLi = $(item).find("li:nth-child(4)");
\t $(secondLi).after(fourthLi);
});
});
});
ul{
list-style-type:none;
width:500px;
border:1px solid red;
}
ul li{
width:50px;
display:inline;
}
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slider">
<div class="node_id"><span>233</span></div>
<ul class="thumbnailIcon">
<li>left 0</li>
<li> 1</li>
<li >2</li>
<li > 3</li>
<li>right 4</li>
</ul>
</li>
<a class="flex-prev">prev<a>
<a class="flex-next">next<a>
なぜulの最初と最後の子を同じ場所に残したいのですか?彼らはリストの一部でなければなりませんか?あるいは、残りのリストから他の機能を持っていますか? – RMo