jquery 如何创建带进度条的滑动条

lsmd5eda  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(130)

面对这样的问题,我需要创建一个滑块,其中将有一个进度条时,使用Swiper,这将看起来像这样的东西,我发现一个类似的问题光滑的滑块,但它不适合这个解决方案,我不知道如何处理,帮助,指向路径)

<div class="swiper">
     <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/slider/1.jpg"></div>
        <div class="swiper-slide"><img src="img/slider/2.jpg"></div>
        <div class="swiper-slide"><img src="img/slider/3.jpg"></div>
      </div>
      <div class="swiper-pagination">
        <div>
            <h3>slide 1</h3>
              <span data-slick-index="0" class="progressBar"></span>
        </div>
        <div>
            <h3>slide 2</h3>
            <span data-slick-index="1" class="progressBar"></span>
        </div>
        <div>
            <h3>slide 3</h3>
            <span data-slick-index="2" class="progressBar"></span>
        </div>
      </div>
</div>
<script>
    new Swiper('.swiper', {
        direction: 'horizontal',
        controls: false,
        loop: true,
    });
</script>
ruarlubt

ruarlubt1#

解决了问题。
对于那些可能需要更多的人,我会留下代码:)

const arrText_Slider = new Array('text','text','text','text','text','text');
    const swiper = new Swiper(".swiper", {
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
            renderBullet: function(index,className){
                return '<span class="' + className + '">' + '<div class="slider-text">' + (arrText_Slider[index]) + '</div>' + '</span>' 
            }
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
        },
        autoplay: {
            delay: 4000,
            disableOnInteraction: false
        },
        loop: true,
        watchSlidesProgress: true
    });
document.addEventListener('mouseenter', event => {
    const el = event.target;
    if (el && el.matches && el.matches('.swiper-container')) {
                // console.log('mouseenter');
                // console.log('autoplay running', swiper.autoplay.running);
                el.swiper.autoplay.stop();
                el.classList.add('swiper-paused');

                const activeNavItem = el.querySelector('.swiper-pagination-bullet-active');
                activeNavItem.style.animationPlayState="paused";
            }
        }, true);

document.addEventListener('mouseleave', event => {
            // console.log('mouseleave', swiper.activeIndex, swiper.slides[swiper.activeIndex].progress);
            // console.log('autoplay running', swiper.autoplay.running);
            const el = event.target;
            if (el && el.matches && el.matches('.swiper-container')) {
                el.swiper.autoplay.start();
                el.classList.remove('swiper-paused');

                const activeNavItem = el.querySelector('.swiper-pagination-bullet-active');

                activeNavItem.classList.remove('swiper-pagination-bullet-active');
            // activeNavItem.style.animation = 'none';

            setTimeout(() => {
                activeNavItem.classList.add('swiper-pagination-bullet-active');
                // activeNavItem.style.animation = '';
            }, 10);
        }
    }, true);

和html

<div class="swiper">
            <div class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="img/slider/1.jpg"></div>
                <div class="swiper-slide"><img src="img/slider/2.jpg"></div>
                <div class="swiper-slide"><img src="img/slider/3.jpg"></div>
                <div class="swiper-slide"><img src="img/slider/4.jpg"></div>
                <div class="swiper-slide"><img src="img/slider/5.jpg"></div>
                <div class="swiper-slide"><img src="img/slider/6.jpg"></div>
            </div>
            <div class="swiper-pagination"></div>

        </div>

css -〉

.swiper-pagination-bullet {
    width: 15%;
    margin-left: 1% !important;
    opacity: 1;
    background: rgba(238, 238, 238, 0.6);;
    height: 4px;
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: background 200ms;

}
.slider-text {
    position: fixed;
    color: white;
    bottom: 15px;
    margin-left: 1%;
}
.swiper-pagination-bullet::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: opacity 200ms;
}

.swiper-pagination-bullet-active {
    background: rgba(#000, 0.2) !important;
    background: rgba(#000, 0.4) !important;

}
.swiper-pagination-bullet-active::before {
    background-color: white;
    animation: slide-progress 4s cubic-bezier(.3,0,.3,1) forwards;  
}
.swiper-pagination-bullet-active::before > .swiper-paused & {
    opacity: 0;
    animation-play-state: paused;
}
@media screen and (max-width: 880px) {
    .slider-text {
        display: none !important;
    }
    .swiper-pagination {
        width: 100% !important;
        bottom: 10px !important;
    }
    .swiper-pagination-bullet {
        border-radius: 50%;
        width: 4px !important;
    }
    .swiper-slide > img {
        height: 260px;
    }
}

@keyframes slide-progress {
    0% {
        transform: translateX(-100%);
        // width: 0;
    }

    100% {
        transform: translateX(0);
        // width: 100%;
    }
}

}

相关问题