Как сделать резкое переключение слайдов?

Question

[thirteen_bit]

Стандартный слайдер слайдера при нажатии на него кнопкой мыши и движением влево-вправо автоматически применяет translate к карусели... Например, здесь: https://codepen.io/ncer/pen/xpqemZ

Хотелось бы узнать: есть ли возможность задать смену слайдов более резким образом? Чтобы карусель не следовала плавно вслед за движением мыши, а попросту меняла слайды, когда нужно

Comments

[Ankhena]

Как сделать резкое переключение слайдов?

Отключить transition

Чтобы карусель не следовала плавно вслед за движением мыши

При сдвиге мыши, будет с той скоростью с которой двигают мышью.
Если это поведение не нравится, то читайте документацию, включайте/отключайте нужные параметры.

[thirteen_bit]

Здравствуйте!

читайте документацию

Я бы и не написал сюда, будь это все в документации. Transition отвечает за плавность анимации при переключении слайдов... Когда вы зажимаете ЛКМ и двигаете мышью, transition вообще никакой роли не играет

Последние два предложения – это один и тот же вопрос. Не понял, почему вы дали на него два разных ответа...

Пока кроме отключения свайпа и переключения слайдов программно на основе движения тачем/мышью решений никаких видимо нет.

Если вы не глядя перекидываете вопрос из "Средних" в "Простые" а потолок ответа: Читайте документацию, зачем вы отвечаете?

[ProjectSoft]

thirteen_bit,
Подобный эффект?

Имхо. Последняя строка вашего комментария в точку.

[Александр Сафронов]

Можно просто указать опцию speed: 0.

const swiper = new Swiper(selector, {
pagination: {...}
...
speed: 0
})

Answer 1

[Tony]

У swiper'а есть свойство speed, оно вам поможет!

var menu = ['Slide 1', 'Slide 2', 'Slide 3']
var mySwiper = new Swiper ('.swiper-container', {
    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
			clickable: true,
        renderBullet: function (index, className) {
          return '<span class="' + className + '">' + (menu[index]) + '</span>';
        },
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
	
    speed: 0,
  })