Как заставить раздельно работать слайдеры с одинаковыми классами?

[Malleys]

а как же это https://idangero.us/swiper/api/#keyboard?

О, спасибо за такую прекрасную ссылку, а то тот плагин для jQuery с кучей проблем. Что, это очень сложно построить слайдер, который бы не ломался, когда мышь уводят за его пределы и отпускают? Сотни настроек предлагают, а основной функционал слайдера не могут нормально сделать!

[DenKuzmin17]

как задать translateX через проценты? Если вместо value записываю новую переменную percent, перелистывание работает, а перетаскивание нет.

[рони]

Malleys,
мне сложно понять, что вы пишите.

[DenKuzmin17]

О, спасибо за такую прекрасную ссылку, а то тот плагин для jQuery с кучей проблем. Что, это очень сложно построить слайдер, который бы не ломался, когда мышь уводят за его пределы и отпускают?

для меня, к сожалению, пока что, сложно. Разбираюсь с Вашей помощью. Спасибо большое.

[Malleys]

для меня, к сожалению, пока что, сложно.

Я имел в виду про авторов этих плагинов...

[рони]

Malleys,
попробую спросить снова, можно ли использовать методы плагина для клавиатуры или нет, в данном случае?

[рони]

а основной функционал слайдера не могут нормально сделать!

а что там не так?

[Malleys]

Давайте по порядку...

Я использовал этот плагин, поскольку он был указан в скрипте автора, в котором поддержки клавиатуры нет! http://labs.rampinteractive.co.uk/to...mos/index.html

Вы, рони, предложили это https://idangero.us/swiper/demos/

В обоих вариантах если нажать мышкой на слайд и увести нажатую мышь вне рамок слайдера, и затем отпустить, то потом когда поводить курсором отпущенной мыши
по слайдеру, то он начнёт вести себя так, как будто мышь зажата.

И позвольте уж тогда мне предложить... вот готовый слайдер, в котором нет таких багов... https://flickity.metafizzy.co/options.html

как задать translateX через проценты? Если вместо value записываю новую переменную percent, перелистывание работает, а перетаскивание нет.

А вам принципиально важно использовать ту библиотеку или можно заменить, а то я ковырялся там 2 часа, но мне таки не удалось добиться желаемого результата из-за того, что библиотека отменяет в слайдере события focus и mousedown

[рони]

Malleys,
ок! думал плагины одинаковы, исходил из названия.

вот готовый слайдер,

спасибо!

[Malleys]

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<style>
* {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: #ececec;
}
.block {
  width: 500px;
  height: 100px;
  margin: 10px auto;
}
.slider-box {
  border: 1px solid #909090;
}
.slider {
  transition: 0.5s;
}
.slide {
  display: flex;
  width: 500px;
  height: 100px;
  align-items: center;
  justify-content: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
<script>
	$(function() {
		$('.slider').flickity({
			prevNextButtons: false,
			pageDots: false
		});
	});
</script>

<section>
  <div class="block 1">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">1 / 3</div>
        <div class="slide">2 / 3</div>
        <div class="slide">3 / 3</div>
      </div>
    </div>
  </div>
  <hr>
  <div class="block 2">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">1 / 4</div>
        <div class="slide">2 / 4</div>
        <div class="slide">3 / 4</div>
        <div class="slide">4 / 4</div>
      </div>
    </div>
  </div>
  <hr>
  <div class="block 3">
    <div class="slider-box">
      <div class="slider">
        <div class="slide">1 / 2</div>
        <div class="slide">2 / 2</div>
      </div>
    </div>
  </div>
  <hr>
</section>