如何解决Swiper 幻灯片无法与同位素插件完美配合
一般来说,SWIPER 插件可以完美运行,但是当我用 ISOTOPE 启动它时,我找不到像下图这样的感觉和外观
基本上,当 loop: true
模式和幻灯片显示任意时,同位素和滑动条滑块会在最后一张幻灯片之后创建空白空间,但我想在所有桌面版本上至少显示三张幻灯片,即使我想点击过滤文本!
同位素脚本
// init Isotope
$(document).ready( function() {
$('.grid').isotope({
itemSelector: '.grid-item',});
// filter items on button click
$('.filter-button-group').on( 'click','li',function() {
var filterValue = $(this).attr('data-filter');
$('.grid').isotope({ filter: filterValue });
$('.filter-button-group li').removeClass('active');
$(this).addClass('active');
});
})
Swiper 脚本
$(document).ready(function(){
$('.swiper-filter').on( 'click','a',function() {
var filter = $(this).attr('data-filter');
$('.swiper-product .swiper-slide').css('display','none')
$('.swiper-product .swiper-slide' + filter).css('display','')
$( '.swiper-filter a' ).removeClass( 'swiper-active' );
$( this ).addClass( 'swiper-active' );
productSwiper.updateSize();
productSwiper.updateSlides();
productSwiper.updateProgress();
productSwiper.updateSlidesClasses();
productSwiper.slideTo(0);
productSwiper.scrollbar.updateSize();
return false;
});
var productSwiper = new Swiper ('.swiper-product',{
loop:true,slidesPerView: 'auto',spaceBetween: 30,centeredSlides:true,loopFillGroupWithBlank: false,grabCursor: true,autoplay:{
delay:5000,},breakpoints: {
320: {
slidesPerView: 1,768: {
slidesPerView: 2,1024: {
slidesPerView: 3,}
},})
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。