求助js滑动效果问题

小米官网的那个内容部分，如何进行滑动效果
<div id="cont">
<div class="cont1">
<div class="cont2">内容</div>
</div>
<div class="cont3">
<ul id="mi">
<li class="mi-li">
<h2>MIUI主题</h2>
<div class="content">
<ul class="slider">
<li>
<h4>bilibili拜年祭</h4>
<p class="p1">bilibili拜年祭</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
<li>
<h4>阴阳师</h4>
<p class="p1">网易大热手游《阴阳师》官方定制主题，还原唯美奇幻之旅</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
<li>
<h4>你的名字。</h4>
<p class="p1">前前前世就追寻着你的身影。——官方定制主题</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
</ul>
</div>
<div class="bar">
<ul id="cz" class="index">
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
<a href="#" class="prev">&lt;</a>
<a href="#" class="next">&gt;</a>
</li>
<li class="mi-li">
<h2>MIUI主题</h2>
<div class="content">
<ul class="slider">
<li>
<h4>bilibili拜年祭</h4>
<p class="p1">bilibili拜年祭</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
</ul>
</div>
<div class="bar">
<ul class="index">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="#" class="prev">&lt;</a>
<a href="#" class="next">&gt;</a>
</li>
<li class="mi-li">
<h2>MIUI主题</h2>
<div class="content">
<ul class="slider">
<li>
<h4>bilibili拜年祭</h4>
<p class="p1">bilibili拜年祭</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
</ul>
</div>
<div class="bar">
<ul class="index">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="#" class="prev">&lt;</a>
<a href="#" class="next">&gt;</a>
</li>
<li class="mi-li">
<h2>MIUI主题</h2>
<div class="content">
<ul class="slider">
<li>
<h4>bilibili拜年祭</h4>
<p class="p1">bilibili拜年祭</p>
<p class="p2">免费</p>
<div class="slider-img">
<a href="#"><img src="images/q1.png" alt=""></a>
</div>
</li>
</ul>
</div>
<div class="bar">
<ul class="index">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<a href="#" class="prev">&lt;</a>
<a href="#" class="next">&gt;</a>
</li>
</ul>
</div>
</div>
这是html部分
下面是js部分
var liWidth = $('.slider li').width();
var size = $('.slider li').size();
$('.slider').width(liWidth * size + 'px');
var index = 0;
$('.bar .index li').click(function () {
index = $(this).index();
imgTogge(index);
});
var last = $('.index>li:last-child');
$('.prev').click(function (e) {
e.preventDefault();
if (index > 0) {
index--;
}
imgTogge(index);
});
$('.next').click(function (e) {
e.preventDefault();
if (index < last.index()) {
index++;
}
imgTogge(index);
});
function imgTogge(index) {
var liFirstWidth = $('.slider>li:first').width();
$('.slider').stop(true).animate({
"marginLeft": -liFirstWidth * index + 'px'
}, 500);
$('.bar .index li').removeClass('active').eq(index).addClass('active');
}
因为要四个部分，单击第一部分的按钮后四个模块都一起动，请教一下大神怎么解决