swiper如何防止冲突_swiper和jquery冲突怎么解决

导航左右滚动，跳转切换

/*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/

*{ margin:0; padding:0; font-family: "微软雅黑";}

body{ font-size:16px; background-color:#f4f4f4;}

li{ list-style:none;}

a{ text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0);}

.wrap{width:100%;}

/*导航滑动*/

#topNav {

width: 100%;

overflow: hidden;

font-style:normal;

font-variant-ligatures: normal;

font-variant-caps: normal;

font-variant-numeric: normal;

font-weight: normal;

font-stretch: normal;

font: 0.35rem;

line-height: 100%;

background: #34026A;

}

#topNav .swiper-slide {

width:20%;

text-align:center;

padding-left: 1%;

padding-right:1%;

border-right-style: dotted;

}

#topNav .swiper-slide a div{

transition:all .3s ease;

display:block;

color: #fff;

width: 100%;

height: 100%;

padding-top: 10%;

padding-bottom: 10%;

}

#topNav .active a .sport{

transform:scale(1.1);

background-image:linear-gradient(to top,#FF8D14,#FFBA34);

border-radius: 15px 15px 0 0;

}

#topNav .active a .mw{

transform:scale(1.1);

background-image:linear-gradient(to top,#008754,#00B75A);

border-radius: 15px 15px 0 0;

}

#topNav .active a .bd{

transform:scale(1.1);

background-image:linear-gradient(to top,#712EEC,#3497E9);

border-radius: 15px 15px 0 0;

}

#topNav .active a .sp{

transform:scale(1.1);

background-image:linear-gradient(to top,#F84387,#F95ACB);

border-radius: 15px 15px 0 0;

}

#topNav .active a .mh{

transform:scale(1.1);

background-image:linear-gradient(to top,#BD00E0,#B152F5);

border-radius: 15px 15px 0 0;

}

#topNav .active a .bh{

transform:scale(1.1);

background-image:linear-gradient(to top,#FA552F,#FC7E4B);

border-radius: 15px 15px 0 0;

}

/*导航悬浮固定*/

.tabFloat{ position:fixed; top:0; left:0; z-index:100;}

/*主体内容样式*/

#div1{

background: yellow;

height: 12.5rem;

text-align: center;

}

#div2{

background: green;

height: 12.5rem;

text-align: center;

}

#div3{

background: blue;

height: 12.5rem;

text-align: center;

}

#div4{

background: rgb(248,76,161);

height: 12.5rem;

text-align: center;

}

#div5{

background: rgb(187,16,228);

height: 12.5rem;

text-align: center;

}

#div6{

background: rgb(251,100,57);

height: 12.5rem;

text-align: center;

}

@media screen and (max-width:334px){

.swiper-slide a div{ font-size:10px;}

}

第一模块

第二模块

第三模块

第四模块

第五模块

第六模块

这是第一块

这是第二块

这是第三块

这是第四块

这是第五块

这是第六块

/*可能需要下载swiper文件,放同级目录就可以了http://www.swiper.com.cn/download/index.html*/

//swiper部分，为了各位方便复制我就写到一个页面中

var mySwiper = new Swiper('#topNav', {

freeMode: true,

freeModeMomentumRatio: 0.5,

slidesPerView: 'auto',

});

swiperWidth = mySwiper.container[0].clientWidth

maxTranslate = mySwiper.maxTranslate();

maxWidth = -maxTranslate + swiperWidth / 2

$(".swiper-container").on('touchstart', function(e) {

e.preventDefault()

})

mySwiper.on('tap', function(swiper, e) {

//  e.preventDefault()

slide = swiper.slides[swiper.clickedIndex]

slideLeft = slide.offsetLeft

slideWidth = slide.clientWidth

slideCenter = slideLeft + slideWidth / 2

// 被点击slide的中心点

mySwiper.setWrapperTransition(300)

if (slideCenter < swiperWidth / 2) {

mySwiper.setWrapperTranslate(0)

} else if (slideCenter > maxWidth) {

mySwiper.setWrapperTranslate(maxTranslate)

} else {

nowTlanslate = slideCenter - swiperWidth / 2

mySwiper.setWrapperTranslate(-nowTlanslate)

}

$("#topNav  .active").removeClass('active')

$("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')

$("#topNav .swiper-slide").eq(swiper.clickedIndex)

})

//jquery部分

$(document).ready(function(){

$("html,body").animate({scrollTop:0});

//判断导航个数

var tabLength = $('.swiper-slide a').length;

//导航高度

var tabTop = $("#topNav").offset().top;

// console.log(tabTop)

//分类数组 把每个模块的高度放进sectop中

var secTop = new Array();

$(".tabSection").each(function(index) {

secTop.push($(this).offset().top);

});

$(window).scroll(function(){

var winScrollTop = $(window).scrollTop();

//悬浮导航

if(winScrollTop >= tabTop){

$("#topNav").addClass("tabFloat");

}else{

$("#topNav").removeClass("tabFloat");

}

//切换导航

if(winScrollTop >= secTop[secTop.length-1]-100){

$("#topNav  .active").removeClass('active')

$("#topNav .swiper-slide").eq(secTop.length-1).addClass('active')

}else  if(winScrollTop < secTop[0]-100){

$("#topNav  .active").removeClass("active");

}else{

for(i = 0 ; i < secTop.length-1 ; i++){

if(winScrollTop >= secTop[i]-100 && winScrollTop < secTop[i+1]-100){

$("#topNav  .active").removeClass("active");

$("#topNav  .swiper-slide").eq(i).addClass("active");

}

}

}

});

/*就是这块用谷歌模拟手机时这块的事件没有执行，不知道为什么*/

//滚动到对应专区

$('.swiper-slide').each(function(index) {

$(this).click(function(){

var scrollHeight = $(".tabSection").eq(index).offset().top;

$("html,body").animate({scrollTop:scrollHeight-40});

});

});

});