Quiero agregar algo de animación a swiperjs para decirle al usuario que este control deslizante tiene una función de deslizamiento y que puede deslizar para deslizar, la animación funciona bien pero entra en conflicto con la función de deslizamiento predeterminada de swiperjs, y no puede deslizar las diapositivas, ¿hay alguna solución para arreglar esto?
var swiper = new Swiper(".mySwiper", { slidesPerView: 3, }); .swiper-wrapper { transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); animation: example 5s infinite alternate; } @keyframes example { 0% { transform: translate3d(0px, 0px, 0px); } 50% { transform: translate3d(0px, 0px, 0px); } 75% { transform: translate3d(-20px, 0px, 0px); } 100% { transform: translate3d(0px, 0px, 0px); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> </div>el css y translate3d (0px, 0px, 0px) y los fotogramas clave hacían que no funcionara. Elimina esto y funciona bien:
const swiper = new Swiper('.swiper', { // Optional parameters direction: 'horizontal', loop: true, slidesPerView: 3, // If we need pagination pagination: { el: '.swiper-pagination', }, // Navigation arrows navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // And if we need scrollbar scrollbar: { el: '.swiper-scrollbar', }, }); .swiper { width: 600px; height: 300px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script> <div class="swiper"> <!-- Additional required wrapper --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> </div> <!-- If we need pagination --> <div class="swiper-pagination"></div> <!-- If we need navigation buttons --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- If we need scrollbar --> <div class="swiper-scrollbar"></div> </div>No estaba seguro de lo que buscaba con translate3d, pero esta publicación podría ayudar:
El control deslizante de Javascript no funciona correctamente con el final de la transición
pero la API de swiperjs tiene muchos efectos que puede usar y que podrían ser más fáciles: https://swiperjs.com/swiper-api#fade-effect
espero que esto ayude