swiper 속도
본문
$(document).ready(function(){
//아래 소스는 오토슬라이드, 페이드효과
var swiper = new Swiper('.swiper-container-main', {
speed: 3000,
/*페이드의 duration*/
spaceBetween: 0,
effect: 'fade', //메인 화면의 전환 효과설정입니다. fade와 scroll 둘중에 선택해주세요
loop: true,
autoplay: {
delay: 1000, //메인 화면의 fadein되는 초입니다. 1000 = 1초입니다.
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination-main',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next-main',
prevEl: '.swiper-button-prev-main',
},
});
//아래 소스는 오토슬라이드, 페이드효과
var swiper = new Swiper('.swiper-container-topbanner', {
speed: 1400,
/*페이드의 duration*/
spaceBetween: 0,
effect: 'slide', //메인 화면의 전환 효과설정입니다. fade와 scroll 둘중에 선택해주세요
centeredSlides: true,
loop: true,
autoplay: {
delay: 1, //메인 화면의 fadein되는 초입니다. 1000 = 1초입니다.
disableOnInteraction: false,
}
});
var galleryTop = new Swiper('.gallery-top', {
slidesPerView: 2,
spaceBetween: 10,
// init: false,
navigation: {
nextEl: '.swiper-button-next-detail',
prevEl: '.swiper-button-prev-detail',
},
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 10,
},
768: {
slidesPerView: 2,
spaceBetween: 10,
},
1024: {
slidesPerView: 2,
spaceBetween: 10,
},
}
});
var swiper = new Swiper('.swiper-container2', {
slidesPerView: 5,
spaceBetween: 0,
// init: false,
navigation: {
nextEl: '.swiper-button-next2',
prevEl: '.swiper-button-prev2',
},
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
speed: 1400,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
breakpoints: {
300: {
slidesPerView: 2,
spaceBetween: 10,
},
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 3,
spaceBetween: 10,
},
1100: {
slidesPerView: 5,
spaceBetween: 10,
},
}
});
var swiper = new Swiper('.swiper-container4', {
slidesPerView: 4,
spaceBetween: 10,
// init: false,
navigation: {
nextEl: '.swiper-button-next4',
prevEl: '.swiper-button-prev4',
},
/*autoplay: {
delay: 4000,
disableOnInteraction: false,
},*/
speed: 1400,
slidesPerGroup: 1,
loop: false,
loopFillGroupWithBlank: true,
breakpoints: {
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 4,
spaceBetween: 10,
},
1100: {
slidesPerView: 4,
spaceBetween: 10,
},
}
});
var swiper = new Swiper('.swiper-container-recommend', {
slidesPerView: 5,
spaceBetween: 0,
// init: false,
navigation: {
nextEl: '.swiper-button-next-recommend',
prevEl: '.swiper-button-prev-recommend',
},
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
speed: 1400,
slidesPerGroup: 1,
loop: true,
loopFillGroupWithBlank: true,
breakpoints: {
300: {
slidesPerView: 2,
spaceBetween: 10,
},
640: {
slidesPerView: 2,
spaceBetween: 10,
},
900: {
slidesPerView: 3,
spaceBetween: 10,
},
1100: {
slidesPerView: 5,
spaceBetween: 10,
},
}
});
});
-------------------------------------------------------
지금 위에 처럼 되어있는데 speed 나 delay 다 바꿔도 메인 화면 슬라이드 자동으로 넘어가는 속도 변화가 없습니다..
답변 1
지금 보면 전부 변수가 var swiper 로 되어있잖아요 ?
스와이퍼 갯수만큼 분리하세요
var swiper =
var swiper2 =
var swiper3 =
var swiper4 =
이런식으로