h5页面滑动效果实例

$(function(){
var navIndex = 0;
$('.cakehead li').each(function(){
navIndex = $('.cakehead li').index($('.cakehead .active'));
});
var navSwiper = $(".cakehead .swiper-container").swiper({
slidesPerView : 'auto',
nextButton: '.next',
prevButton: '.prev'
});

navSwiper.slideTo(navIndex);

})

<link rel="stylesheet" href="style/swiper.css" />

<script src="style/swiper.min.js"></script>

$(function(){
var navIndex = 0;
$('.cakehead li').each(function(){
navIndex = $('.cakehead li').index($('.cakehead li a.cut').parent());
if ($(this).children('a').attr('class')=='cut') {
// alert($(this).index());
// alert($('.cakehead li').length-1);
if($(this).index()==0){
$('.prev').css('display','none');
}
if($(this).index()==$('.cakehead li').length-1){
$('.next').css('display','none');
}
}
});

var navSwiper = $(".cakehead .swiper-container").swiper({
slidesPerView : 'auto',
nextButton: '.next',

                prevButton: '.prev'
});

navSwiper.slideTo(navIndex);

});