테스트 사이트 - 개발 중인 베타 버전입니다

swiper 속도

266 11개월 전 조회 1,031

$(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개

11개월 전

지금 보면 전부 변수가 var swiper 로 되어있잖아요 ?

스와이퍼 갯수만큼 분리하세요

var swiper = 

var swiper2 = 

var swiper3 = 

var swiper4 =

 

이런식으로 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

2
266
11개월 전
그렇게 했는데 페이드 되면서 넘어가는 속도는 똑같네요ㅠㅠㅠㅠ
미니님a
11개월 전
다르게 동작해요 변수 확인 및 강력새로고침 해보세요
2
266
11개월 전
Uncaught ReferenceError: swiper is not defined at <anonymous>:1:1
이 메세지가 혹시 원인이 될 수 있을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인