0 / 0 / 0
Регистрация: 31.05.2019
Сообщений: 1
1

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

31.05.2019, 12:20. Показов 336. Ответов 1

Есть несколько слайдеров с одинаковыми классами. При взаимодействии с одним, перелисывают все остальные. Как их разделить, сохранив одинаковые классы? Унифицировать каждый слайдер классом или айди - не вариант.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
* {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 100vh;
  background: #ececec;
}
.block {
  width: 500px;
  height: 100px;
  margin: 10px auto;
}
.slider-box {
  display: flex;
  overflow: hidden;
  border: 1px solid #909090;
}
.slider {
  display: flex;
  transition: 0.5s;
}
.slide {
  display: flex;
  width: 500px;
  height: 100px;
  align-items: center;
  justify-content: center;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    var IMG_WIDTH = 500;
    var currentImg = 0;
    var maxImages = 3;
    var speed = 500;
 
    var slider;
 
    var swipeOptions = {
        triggerOnTouchEnd: true,
        swipeStatus: swipeStatus,
        allowPageScroll: "vertical",
        threshold: 75
    };
 
    $(function () {
        slider = $(this).find('.slider');
        slider.swipe(swipeOptions);
    });
 
 
    /**
     * Catch each phase of the swipe.
     * move : we drag the div
     * cancel : we animate back to where we were
     * end : we animate to the next image
     */
    function swipeStatus(event, phase, direction, distance) {
        //If we are moving before swipe, and we are going L or R in X mode, or U or D in Y mode then drag.
        if (phase == "move" && (direction == "left" || direction == "right")) {
            var duration = 0;
 
            if (direction == "left") {
                scrollImages((IMG_WIDTH * currentImg) + distance, duration);
            } else if (direction == "right") {
                scrollImages((IMG_WIDTH * currentImg) - distance, duration);
            }
 
        } else if (phase == "cancel") {
            scrollImages(IMG_WIDTH * currentImg, speed);
        } else if (phase == "end") {
            if (direction == "right") {
                previousImage();
            } else if (direction == "left") {
                nextImage();
            }
        }
    }
 
    function previousImage() {
        currentImg = Math.max(currentImg - 1, 0);
        scrollImages(IMG_WIDTH * currentImg, speed);
    }
 
    function nextImage() {
        currentImg = Math.min(currentImg + 1, maxImages - 1);
        scrollImages(IMG_WIDTH * currentImg, speed);
    }
 
    /**
     * Manually update the position of the slider on drag
     */
    function scrollImages(distance, duration) {
        slider.css("transition-duration", (duration / 1000).toFixed(1) + "s");
 
        //inverse the number we set in the css
        var value = (distance < 0 ? "" : "-") + Math.abs(distance).toString();
        slider.css("transform", "translate(" + value + "px,0)");
    }
Ссылка на codepen
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
31.05.2019, 12:20
Ответы с готовыми решениями:

Как заставить сайт написанный на 5.3 заставить работать на 5.6? Как принудительно включить register_globals?
Есть древний сайт. Работает на php 5.3. Как объяснил разработчик данного сайта - все дело в...

Как получить хэндл окна среди окон с одинаковыми классами
опять я с вопросами. вот как получить хэндл окна среди окон с одинаковыми классами, т.е. у меня...

Как работать с классами?
Пожалуйста, объясните как работать с классами в PascalABC.NET. Что такое классы и с чем их едят?

Как работать с классами в C++ Builder
Покажите пожалуйста пример работы с классами в c++ builder.

1
888 / 723 / 447
Регистрация: 13.07.2015
Сообщений: 2,258
31.05.2019, 14:46 2
а че нет то?
Javascript
1
2
3
4
$('.slider').each(function(i){
  $(this).addClass('slide'+i);
  $('.slide'+1).swipe(swipeOptions);
);
конечно второй вариант разобраться с кодом библиотеки и поправить селекторы https://github.com/mattbryson/... chSwipe.js
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
31.05.2019, 14:46

Как быстро работать с классами
Подскажите как быстро работать с классами. В этой программе мне надо ввести все имена из класса и...

Заполнение Div с одинаковыми классами
Добрый день. Есть блоки которые динамически добавляются, все они имеют одинаковый класс. Данные...

Как работать с глобальными переменными\классами
Добрый день, Задача - нужно создать свой SSH клиент для терминального подключения к сетевому...

Робота с детьми у блоков с одинаковыми классами
Пример кода (суть вопроса внизу): &lt;div class=&quot;item&quot;&gt; &lt;div class=&quot;subitem&quot;&gt;Some text&lt;div&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.