html5商品滑动多联菜单,swiper实现菜单滑动效果

使用Swiper制作webapp菜单栏切换

body {

min-width: 320px;

max-width: 640px;

margin: 0 auto;

color: #333;

padding: 0;

font-family: "Microsoft Yahei";

text-align: center;

}

.container {

/*width: 100%;*/

border: 1px solid #ccc;

}

.swiper1 {

width: 100%;

}

.swiper1 .selected {

color: #ec5566;

border-bottom: 2px solid #ec5566;

}

.swiper1 .swiper-slide {

text-align: center;

font-size: 16px;

height: 50px;

/* Center slide text vertically */

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

-webkit-justify-content: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

-webkit-align-items: center;

align-items: center;

cursor: pointer;

}

.swiper2 {

width: 100%;

}

.swiper2 .swiper-slide {

height: calc(100vh - 50px);

background-color: #ccc;

color: #fff;

text-align: center;

box-sizing: border-box !important;

overflow-x: hidden !important;

}

推荐

菜单 2

菜单 3

菜单 4

菜单 5

菜单 6

菜单 7

菜单 8

菜单 9

菜单 10

上面导航栏可以滑动

上面导航栏可以滑动2222

内容 213213123

内容 ressssssss

内容 ffffffffffff

内容 bbbbbbbbbbbbbbbbbvb

内容 bvcccccccccccbvb

内容 sdasdssssss

内容 oiouiouioiuoiuo

内容 m,jnkjhkhgjghjugh

$(function() {

function setCurrentSlide(ele, index) {

$(".swiper1 .swiper-slide").removeClass("selected");

ele.addClass("selected");

//swiper1.initialSlide=index;

}

var swiper1 = new Swiper('.swiper1', {

// 设置slider容器能够同时显示的slides数量(carousel模式)。

// 可以设置为number或者 'auto'则自动根据slides的宽度来设定数量。

// loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。

slidesPerView: 5.5,

paginationClickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。

spaceBetween: 10,//slide之间的距离(单位px)。

freeMode: true,//默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

loop: false,//是否可循环

onTab: function(swiper) {

var n = swiper1.clickedIndex;

}

});

swiper1.slides.each(function(index, val) {

var ele = $(this);

ele.on("click", function() {

setCurrentSlide(ele, index);

swiper2.slideTo(index, 500, false);

//mySwiper.initialSlide=index;

});

});

var swiper2 = new Swiper('.swiper2', {

//freeModeSticky 设置为true 滑动会自动贴合

direction: 'horizontal',//Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

loop: false,

// effect : 'fade',//淡入

//effect : 'cube',//方块

//effect : 'coverflow',//3D流

// effect : 'flip',//3D翻转

autoHeight: true,//自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。

onSlideChangeEnd: function(swiper) { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。

var n = swiper.activeIndex;

setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);

swiper1.slideTo(n, 500, false);

}

});

});