css Question posted in
Some basic documentation can be found here.

Css – How do you increase the transition duration of a swiper slide?

I have the slides working properly, but they are transitioning too quickly. I would like to slow down the fade transition to two seconds or so. Here is the related code I’m currently using.
I’m using swiper 11 bundle.

<script src="code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
var swiper = new Swiper('.swiper-container',
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
    }
  },
  fadeEffect: {
    crossFade: true
  },
  autoplay: {
    speed: 2200,
    delay: 5500,
    disableOnInteraction: true
  },
  slidersPerView: 1,
  effect: "fade"
});
</script>

I’ve tried changing speed, delay, even added a ‘spaceBetween attribute, and nothing is working.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I tried a mix of suggested changes and it worked! Thank you all for commenting.

    Here's what I ended up using:

    var swiper = new Swiper('.swiper-container', {          loop: true,
speed: 3200,
autoplay: { delay: 9000 },
pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    },
},    fadeEffect: { crossFade: true },
 slidersPerView: 1,   effect: "fade" });

  2. 0 
    var swiper = new Swiper('.swiper-container', {
    loop: true,
    speed: 2200,
    autoplay: { delay: 1000 },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
        }
    }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search