Hello使用Swiper滑块slider home page
这是设置的网站主页。 MY SITE WITH SWIPER SLIDER
守则 内部html
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="http://dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/swiper.min.css">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide1.png"></picture></div>
<div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide2.png"></picture></div>
<div class="swiper-slide"><report><module name="LIVESCORING_SUMMARY"/></report></div>
<div class="swiper-slide"><picture><img src="//dagrafixdesigns.com/Images/2008/DA_2017/DA_RSkin/Slider/Slide3.png"></picture></div>
<div class="swiper-slide"><report><module name="OWNER_ACTIVITY"/></report></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<script>
$( document ).ready(function() {
var mySwiper = new Swiper ('.swiper-container', {
loop: true,
keyboardControl: true,
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
nextButton: '.swiper-button-next-icon',
prevButton: '.swiper-button-prev-icon',
autoplay:3000,
speed:1000,
grabCursor:true,
roundLengths: true,
effect: 'fade',
fade: {
crossFade:true
}
});
});
</script>
网站加载和幻灯片工作正常,但是如果您单击TABS GAMEDAY,MY TEAM,MISC,并在这些选项卡上向上或向下滚动,则单击返回HOME TAB,滑块被冻结。
我已经阅读了一些关于标签和swiper的报告,并试图用标签修改脚本,但我似乎无法让它工作。
想要保留我的脚本代码,看看为什么标签调用不适合我。我根据我的网站标签元素调用用#homepagetabs替换#tabs,仍然无法正常工作。
谢谢!
答案 0 :(得分:1)
$(document).ready(function(){
var swiper = new Swiper ('.swiper-container', {
loop: true,
keyboardControl: true,
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
nextButton: '.swiper-button-next-icon',
prevButton: '.swiper-button-prev-icon',
autoplay:3000,
speed:1000,
grabCursor:true,
roundLengths: true,
effect: 'fade',
fade: {
crossFade:true
}
}
});
$("#tab0").click(function(){
var swiper = new Swiper ('.swiper-container', {
loop: true,
keyboardControl: true,
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
nextButton: '.swiper-button-next-icon',
prevButton: '.swiper-button-prev-icon',
autoplay:3000,
speed:1000,
grabCursor:true,
roundLengths: true,
effect: 'fade',
fade: {
crossFade:true
}
}
});
});
由于这似乎解决了Swiper功能问题,您可以尝试将其重新清理:
$(document).ready(function(){
initSwiper();
$("#tab0").click(function(){
initSwiper();
});
});
function initSwiper(){
var swiper = new Swiper ('.swiper-container', {
loop: true,
keyboardControl: true,
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
nextButton: '.swiper-button-next-icon',
prevButton: '.swiper-button-prev-icon',
autoplay:3000,
speed:1000,
grabCursor:true,
roundLengths: true,
effect: 'fade',
fade: {
crossFade:true
}
}
});
}
答案 1 :(得分:0)
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
YourSlideFunction();
})