Цитата:
|
как задать translateX через проценты? Если вместо value записываю новую переменную percent, перелистывание работает, а перетаскивание нет.
|
Malleys,
мне сложно понять, что вы пишите. |
Цитата:
|
Цитата:
|
Malleys,
попробую спросить снова, можно ли использовать методы плагина для клавиатуры или нет, в данном случае? |
Цитата:
|
Давайте по порядку...
Я использовал этот плагин, поскольку он был указан в скрипте автора, в котором поддержки клавиатуры нет! http://labs.rampinteractive.co.uk/to...mos/index.html Вы, рони, предложили это https://idangero.us/swiper/demos/ В обоих вариантах если нажать мышкой на слайд и увести нажатую мышь вне рамок слайдера, и затем отпустить, то потом когда поводить курсором отпущенной мыши по слайдеру, то он начнёт вести себя так, как будто мышь зажата. И позвольте уж тогда мне предложить... вот готовый слайдер, в котором нет таких багов... https://flickity.metafizzy.co/options.html Цитата:
|
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>
|
| Часовой пояс GMT +3, время: 01:45. |