你好,通过滑块使用滑动滑块主页
这是设置它的网站主页。带有滑动滑块的"我的网站">
《守则》内部网页
<!-- 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 替换为 #homepagetabs,但仍然不起作用。
谢谢!
$(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
}
}
});
}
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
YourSlideFunction();
})