메인 비쥬얼 슬라이드 머무르는 시간 채택완료

2년 전 조회 1,684

Copy
function slidewow() {
        new WOW({
            boxClass: 'slidewow'
        }).init();
    }
    slidewow();

    var bar = new ProgressBar.Circle(timer, {
        strokeWidth: 3,
        duration: 4000,
        color: '#FFFFFF',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: null
    });


    function slider() {
        var winW = window.innerWidth; //화면 가로사이즈
        var swiper = undefined;
        var viewNum = ''; //슬라이드 개수 (옵션)
        var loopChk = ''; //무한반복 체크
        var slideNum = $('.visual .swiper-container .swiper-slide').length //슬라이드 총 개수
        var slideInx = 0; //현재 슬라이드 index

        //디바이스 체크
        var winWChk = '';
        $(window).on('load resize', function () {
            winW = window.innerWidth;
            if (winWChk != 'mo' && winW <= 768) { //모바일 버전으로 전환할 때
                winWChk = 'mo'
                sliderAct();
            }

            if (winWChk != 'pc' && winW >= 769) { //PC 버전으로 전환할 때
                winWChk = 'pc'
                sliderAct();
            }
        })

        function sliderAct() {
            //슬라이드 초기화
            if (swiper != undefined) {
                swiper.destroy();
                swiper = undefined;
            }

            //slidesPerView 옵션 설정
            if (winW > 768) { //PC 버전
                viewNum = 5;
            } else { //mobile 버전
                viewNum = 2.3;
            }

            //loop 옵션 체크
            if (slideNum > viewNum) {
                loopChk = true;
            } else {
                loopChk = false;
            }

            visualSwiper = new Swiper(".visual .swiper-container", {
                slidesPerView: viewNum,
                initialSlide: slideInx,
                spaceBetween: 10,
                // loop: loopChk,
                loop: true,
                speed: 1000,
                // on: {
                //     activeIndexChange: function () {
                //         slideInx = this.realIndex; //현재 슬라이드 index 갱신
                //     }
                // },
                effect: "fade",
                fadeEffect: {crossFade: false},
                loopAdditionalSlides: 1,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false,
                },
                on: {
                    init: function () {
                        bar.animate(1.0);
                    },
                },
                pagination: {
                    el: ".main .visual .swiper-pagination",
                    clickable: true,
                },
                navigation: {
                    nextEl: '.main .visual .swiper-button-next',
                    prevEl: '.main .visual .swiper-button-prev',
                },
            }),

                visualSwiper.on('slideChange', function () {
                    // function slidewow() {
                    //     new WOW({
                    //         boxClass: 'slidewow'
                    //     }).init();
                    // }
                    // slidewow();
                    if ($(".play").hasClass('off')) {
                        bar.set(0)
                        bar.animate(1.0, {
                            duration: 4500
                        })

                    } else {
                        bar.set(0)
                        bar.animate(0)
                    }


                });

            visualSwiper.on('sliderMove', function () {
                if ($(".play").hasClass('off')) {
                    bar.set(0)
                    bar.animate(1.0, {
                        duration: 4000
                    })
                } else {
                    bar.set(0)
                    bar.animate(0)
                }
            });

        }
    }

    slider();


    $(".btn").click(function (e) {
        if ($(".play").hasClass('off')) {
            $(".play").removeClass('off');
            $(".pause").addClass('off');
            visualSwiper.autoplay.stop();
            bar.set(0)
            bar.stop();

        } else {
            $(".pause").removeClass('off');
            $(".play").addClass('off');
            visualSwiper.autoplay.start();
            bar.animate(1.0);
        }
    });

 

첫페이지랑 첫번째 이후 페이지들 머무르는 시간이 다르게 나와요~

첫페이지는 좀 짧고 두번째부터는 빠르고

또 한판 다 돌아가면 첫페이지도 정상적으로 맞춰지고 ㅠㅠ

이거 봐주실 분~~

답변 2개

채택된 답변
+20 포인트
                on: {
                    init: function () {
                        bar.animate(1.0);
                    },
                },

 

 

bar.animate(1.0) 에서 1.0을 0으로 바꿔보시는건요?

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

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

이건 어떠실까요?

function sliderAct() {
  // 슬라이드 초기화
  if (swiper != undefined) {
    swiper.destroy();
    swiper = undefined;
  }

  // 슬라이드 머무는 시간 설정
  var slideDelay = 4000;

  // ...

  visualSwiper = new Swiper(".visual .swiper-container", {
    // ...
    autoplay: {
      delay: slideDelay,
      disableOnInteraction: false,
    },
    // ...
  });

  // 타이머 초기화
  bar.animate(1.0, {
    duration: slideDelay,
  });

  // ...
}
 

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

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

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

로그인
🐛 버그신고