gsap-swiper v0.1.0

gsap-swiper

depends on gsap v3 and the Draggable plugin (included in free license)

npm install --save gsap # yarn add gsap

npm install --save gsap-swiper # yarn add gsap-swiper

import { Swiper } from "gsap-swiper";

const swiper = new Swiper('.swiper-container', true, 2);
swiper.initSwiper();

new Swiper(   container = '.swiper-container',   autoPlay = true,   slideDelay = 3,   slideDuration = 0.3,   wrapper = '.swiper-inner',   slide = '.swiper-slide',   pagination = '.swiper-pagination',   paginationBullet = '.swiper-pagination-bullet',   paginationBulletSVG = '' // SVG string  )

.section--swiper {
    position: relative;
    margin: 10% auto;
    width: 80%;
    height: 220px;
    max-width: 900px;
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
}

.swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    background-image: linear-gradient(30deg, #000, #222);
    box-shadow: 0 10px 20px 0 rgb(0 0 0 / 5%);
    border-radius: 12px;
    overflow: hidden;
}

.swiper-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.swiper-inner .swiper-slide {
    position: absolute;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.swiper-pagination {
    position: absolute;
    left: 20px;
    bottom: 10px;
    display: inline-block;
    width: auto;
}

.swiper-pagination-bullet {
    display: inline-block;
    animation-play-state: paused;
    stroke-dasharray: 0 100%;
}

.swiper-pagination-bullet svg {
    pointer-events: none;
}

.swiper-pagination-bullet svg circle {
    pointer-events: none;
}

.swiper-pagination-bullet.path {
    stroke-dasharray: 0 100%;
    stroke-dashoffset: 0;
    animation-iteration-count: 1;
    animation-play-state: running;
    animation-name: dash;
}

@keyframes dash {
    from {
        stroke-dasharray: 0 100%;
    }

    to {
        stroke-dasharray: 100% 0;
    }
}

If you can use the Inertia plugin: Codepen - Draggable Auto-Slider