찐이
50
2021-07-17 16:15:06 작성 2021-07-17 16:19:13 수정됨
2
572

스와이퍼로 슬라이드 작업했는데 스크롤바 드래그가 처음부터 스크롤되게 어떻게 하나요?ㅠㅠ


아무리 찾아봐도 모르겠어요...

아래 캡쳐한 이미지에 스크롤바 보면 저 붉은색 드래그가 중간부터 시작되는데

이거 왼쪽 끝에서부터 시작되도록 어떻게 해야할까요ㅠㅠ

혹시 몰라서 코드도 같이 올려요ㅠㅠ!



const swiper04 = new Swiper(".s-slide", {
                loop: true,
                slidesPerView: 3.4,
                arrows: true,
                autoplay: true,
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
                scrollbar: {
                    el: ".swiper-scrollbar",
                },
            });



0
  • 댓글 2

  • nameEO
    6
    2021-07-17 21:27:13

    https://swiperjs.com/swiper-api#methods-and-properties

    swiper.slidePrev 메소드로 표시되자마자 슬라이드를 뒤로 이동시켜서 스크롤바 위치를 바꾸거나

    initialSlide 프로퍼티를 0이나 전체 슬라이드 갯수 - 1 ~ 3 같은 값으로 넣어보시거나

    loop가 활성화되어 있으니 swiper.slideToLoop 메소드를 사용해봐도 될것 같습니다.

    혹시 효과가 없으면 타이밍 때문일 수 있으니 init 이벤트에서 호출해 보시거나 setTimeout을 이용해서 호출해도 될거같네요

    위의 방법으로 사용하면 아마 스크롤은 처음부터 나오겠지만 슬라이드 내용은 loop가 활성화되어 있기 때문에 뒤의 내용과 첫 내용이 섞여서 표시될 것 같습니다. jsfiddle 같은게 있으면 직접 해보면서 세팅하는게 확실한데 아쉽네요.

  • 찐이
    50
    2021-07-18 00:33:42

    대박 친절하고 상세한 답변 너무너무 감사드려요...제가 아직 배운지 얼마안되서 사실 메소드 사용이나 이벤트 호출 같은거 활용 거의 못하지만..! 알려주신것들 검색해보면서 한번 해볼게요!! 넘 감사합니다☺️☺️

  • 로그인을 하시면 댓글을 등록할 수 있습니다.