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

Подскажите пожалуйста, как на этом слайдере сделать так чтобы перелистывалось сразу 3 фото?

14.11.2019, 04:38. Показов 1325. Ответов 8

Author24 — интернет-сервис помощи студентам
Всем привет ! Подскажите пожалуйста, как на этом слайдере сделать так чтобы перелистывалось сразу 3 фото? по умолчанию перелистывает по одной.
Спасибо.

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
'use strict';
            var multiItemSlider = (function () {
              return function (selector, config) {
                var
                  _mainElement = document.querySelector(selector), // основный элемент блока
                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                  _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                  _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                  _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                  _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                  _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                  _positionLeftItem = 0, // позиция левого активного элемента
                  _transform = 0, // значение транфсофрмации .slider_wrapper
                  _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                  _items = []; // массив элементов
                // наполнение массива _items
                _sliderItems.forEach(function (item, index) {
                  _items.push({ item: item, position: index, transform: 0 });
                });
 
                var position = {
                  getMin: 0,
                  getMax: _items.length - 1,
                }
 
                var _transformItem = function (direction) {
                  if (direction === 'right') {
                    if ((_positionLeftItem + _wrapperWidth  / _itemWidth - 1) >= position.getMax) {
                      return;
                    }
                    if (!_sliderControlLeft.classList.contains('slider__control_show')) {
                      _sliderControlLeft.classList.add('slider__control_show');
                    }
                    if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
                      _sliderControlRight.classList.remove('slider__control_show');
                    }
                    _positionLeftItem++;
                    _transform -= _step;
                  }
                  if (direction === 'left') {
                    if (_positionLeftItem <= position.getMin) {
                      return;
                    }
                    if (!_sliderControlRight.classList.contains('slider__control_show')) {
                      _sliderControlRight.classList.add('slider__control_show');
                    }
                    if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
                      _sliderControlLeft.classList.remove('slider__control_show');
                    }
                    _positionLeftItem--;
                    _transform += _step;
                  }
                  _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                }
 
                // обработчик события click для кнопок "назад" и "вперед"
                var _controlClick = function (e) {
                  if (e.target.classList.contains('slider__control')) {
                    e.preventDefault();
                    var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                    _transformItem(direction);
                  }
                };
 
                var _setUpListeners = function () {
                  // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                  _sliderControls.forEach(function (item) {
                    item.addEventListener('click', _controlClick);
                  });
                }
 
                // инициализация
                _setUpListeners();
 
                return {
                  right: function () { // метод right
                    _transformItem('right');
                  },
                  left: function () { // метод left
                    _transformItem('left');
                  }
                }
              }
            }());
            var slider = multiItemSlider('.slider')
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
14.11.2019, 04:38
Ответы с готовыми решениями:

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

Как сделать так, чтобы условие начало работать?Подскажите,пожалуйста
Здравствуйте. Прошу,подскажите,пожалуйста, ступор уже. Вот прога: for(n=1;n&lt;=100;n++) do...

Подскажите, пожалуйста, как сделать так, чтобы мой div открывался и закрывался плавно
HTML: &lt;nav class=&quot;menu-open&quot;&gt; &lt;div class=&quot;button-open&quot;&gt; &lt;/div&gt; &lt;a...

Файл: Подскажите, пожалуйста, как сделать так, чтобы исходный список читался из файла?
Здравствуйте! Подскажите пожалуйста как сделать так, чтобы исходный список читался из файла? ...

8
the hardway first
Эксперт JS
2461 / 1836 / 906
Регистрация: 05.06.2015
Сообщений: 3,603
14.11.2019, 09:06 2
А на слайдер можно посмотреть? Поведение есть, а разметка и стили где?
0
Заблокирован
14.11.2019, 20:06 3
Привет , есть такая проблема. слайдер шириной на 3 фото, перемещает только на одно фото, а мне нужно перемещение на 3. Вопрос как этого добиться? Привожу html, css и js код. Заранее Благодарю.

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="slider">
                    <div class="slider__wrapper">
                        <!-- Пкрвый блок -->
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic"><img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" ></div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <!-- Второй -->
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <!-- Третий -->
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                         <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="slider__control slider__control_left" href="#" role="button"></a>
                    <a class="slider__control slider__control_right slider__control_show " href="#" role="button"></a>
                </div>
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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
.workers {
    background-color: #efefef;
    margin-top: 10em;
    overflow: hidden;
}
 
.workers h2 , .center h2{
    font-weight: bold;
    color: #000;
    font-size: 3em;
    text-align: center;
    padding: 2em 0;
}
 
.text {
    margin: 0 auto;
    padding: 0 10%;
}
.text h3 {
    font-weight: bold;
    color: #000;
    font-size: 2em;
    text-align: center;
    padding: 2em 0 0;
}
 
.text p {
    font-size: 2em;
    padding: 0 0 2em;
}
 
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
 
 
 
.radiusPic {
  width: 260px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 36px 7px #3333cc33;
}
 
.pic {
  width: auto;
  height: 100%;
  margin:0 0 0 -72px;
 
}
 
 
.prev img, .next img {
    width: 3em;
    position: absolute;
    z-index: 999;
    top: 9em;
}
 
.slider__wrapper {
    display: flex;
    transition: transform 0.6s ease;
    margin: 3em 5em 2em 6em;
}
 
.slider__item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
 
 
.slider__control {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 13%;
    transform: translateY(-150%);
}
 
    .slider__control_show {
      display: flex;
    }
 
    .slider__control_left {
      left: 6em;
      background-image: url(img/left.png);
    }
 
    .slider__control_right {
      right: 5em;
      background-image: url(img/right.png);
    }
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
            'use strict';
            var multiItemSlider = (function () {
              return function (selector, config) {
                var
                  _mainElement = document.querySelector(selector), // основный элемент блока
                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                  _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                  _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                  _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                  _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                  _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                  _positionLeftItem = 0, // позиция левого активного элемента
                  _transform = 0, // значение транфсофрмации .slider_wrapper
                  _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                  _items = []; // массив элементов
                // наполнение массива _items
                _sliderItems.forEach(function (item, index) {
                  _items.push({ item: item, position: index, transform: 0 });
                });
 
                var position = {
                  getMin: 0,
                  getMax: _items.length - 1,
                }
 
                var _transformItem = function (direction) {
                  if (direction === 'right') {
                    if ((_positionLeftItem + _wrapperWidth  / _itemWidth - 1) >= position.getMax) {
                      return;
                    }
                    if (!_sliderControlLeft.classList.contains('slider__control_show')) {
                      _sliderControlLeft.classList.add('slider__control_show');
                    }
                    if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
                      _sliderControlRight.classList.remove('slider__control_show');
                    }
                    _positionLeftItem++;
                    _transform -= _step;
                  }
                  if (direction === 'left') {
                    if (_positionLeftItem <= position.getMin) {
                      return;
                    }
                    if (!_sliderControlRight.classList.contains('slider__control_show')) {
                      _sliderControlRight.classList.add('slider__control_show');
                    }
                    if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
                      _sliderControlLeft.classList.remove('slider__control_show');
                    }
                    _positionLeftItem--;
                    _transform += _step;
                  }
                  _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                }
 
                // обработчик события click для кнопок "назад" и "вперед"
                var _controlClick = function (e) {
                  if (e.target.classList.contains('slider__control')) {
                    e.preventDefault();
                    var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                    _transformItem(direction);
                  }
                };
 
                var _setUpListeners = function () {
                  // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                  _sliderControls.forEach(function (item) {
                    item.addEventListener('click', _controlClick);
                  });
                }
 
                // инициализация
                _setUpListeners();
 
                return {
                  right: function () { // метод right
                    _transformItem('right');
                  },
                  left: function () { // метод left
                    _transformItem('left');
                  }
                }
              }
            }());
            var slider = multiItemSlider('.slider')
0
0 / 0 / 0
Регистрация: 14.11.2019
Сообщений: 11
14.11.2019, 20:40  [ТС] 4
Вот пожалуйста.
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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<div class="slider">
                    <div class="slider__wrapper">
                        <!-- Пкрвый блок -->
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic"><img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" ></div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <!-- Второй -->
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <!-- Третий -->
                        <div class="slider__item">
                            <div class="blockPic">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                         <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                        <div class="slider__item">
                            <div class="blockPic ">
                                <div class="radiusPic">
                                    <img src="https://img2.akspic.ru/image/146213-tigr-hishhnik-zivotnoe-bengalskij_tigr-bakenbardy-3840x2160.jpg" class="pic" >
                                </div>
                                <div class="nameWorkers">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <a class="slider__control slider__control_left" href="#" role="button"></a>
                    <a class="slider__control slider__control_right slider__control_show " href="#" role="button"></a>
                </div>
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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
.workers {
    background-color: #efefef;
    margin-top: 10em;
    overflow: hidden;
}
 
.workers h2 , .center h2{
    font-weight: bold;
    color: #000;
    font-size: 3em;
    text-align: center;
    padding: 2em 0;
}
 
.text {
    margin: 0 auto;
    padding: 0 10%;
}
.text h3 {
    font-weight: bold;
    color: #000;
    font-size: 2em;
    text-align: center;
    padding: 2em 0 0;
}
 
.text p {
    font-size: 2em;
    padding: 0 0 2em;
}
 
.slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
 
 
 
.radiusPic {
  width: 260px;
    height: 260px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 0 0 36px 7px #3333cc33;
}
 
.pic {
  width: auto;
  height: 100%;
  margin:0 0 0 -72px;
 
}
 
 
.prev img, .next img {
    width: 3em;
    position: absolute;
    z-index: 999;
    top: 9em;
}
 
.slider__wrapper {
    display: flex;
    transition: transform 0.6s ease;
    margin: 3em 5em 2em 6em;
}
 
.slider__item {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
 
 
.slider__control {
    position: absolute;
    top: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 13%;
    transform: translateY(-150%);
}
 
    .slider__control_show {
      display: flex;
    }
 
    .slider__control_left {
      left: 6em;
      background-image: url(img/left.png);
    }
 
    .slider__control_right {
      right: 5em;
      background-image: url(img/right.png);
    }
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
            'use strict';
            var multiItemSlider = (function () {
              return function (selector, config) {
                var
                  _mainElement = document.querySelector(selector), // основный элемент блока
                  _sliderWrapper = _mainElement.querySelector('.slider__wrapper'), // обертка для .slider-item
                  _sliderItems = _mainElement.querySelectorAll('.slider__item'), // элементы (.slider-item)
                  _sliderControls = _mainElement.querySelectorAll('.slider__control'), // элементы управления
                  _sliderControlLeft = _mainElement.querySelector('.slider__control_left'), // кнопка "LEFT"
                  _sliderControlRight = _mainElement.querySelector('.slider__control_right'), // кнопка "RIGHT"
                  _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ширина обёртки
                  _itemWidth = parseFloat(getComputedStyle(_sliderItems[0]).width), // ширина одного элемента    
                  _positionLeftItem = 0, // позиция левого активного элемента
                  _transform = 0, // значение транфсофрмации .slider_wrapper
                  _step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
                  _items = []; // массив элементов
                // наполнение массива _items
                _sliderItems.forEach(function (item, index) {
                  _items.push({ item: item, position: index, transform: 0 });
                });
 
                var position = {
                  getMin: 0,
                  getMax: _items.length - 1,
                }
 
                var _transformItem = function (direction) {
                  if (direction === 'right') {
                    if ((_positionLeftItem + _wrapperWidth  / _itemWidth - 1) >= position.getMax) {
                      return;
                    }
                    if (!_sliderControlLeft.classList.contains('slider__control_show')) {
                      _sliderControlLeft.classList.add('slider__control_show');
                    }
                    if (_sliderControlRight.classList.contains('slider__control_show') && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) {
                      _sliderControlRight.classList.remove('slider__control_show');
                    }
                    _positionLeftItem++;
                    _transform -= _step;
                  }
                  if (direction === 'left') {
                    if (_positionLeftItem <= position.getMin) {
                      return;
                    }
                    if (!_sliderControlRight.classList.contains('slider__control_show')) {
                      _sliderControlRight.classList.add('slider__control_show');
                    }
                    if (_sliderControlLeft.classList.contains('slider__control_show') && _positionLeftItem - 1 <= position.getMin) {
                      _sliderControlLeft.classList.remove('slider__control_show');
                    }
                    _positionLeftItem--;
                    _transform += _step;
                  }
                  _sliderWrapper.style.transform = 'translateX(' + _transform + '%)';
                }
 
                // обработчик события click для кнопок "назад" и "вперед"
                var _controlClick = function (e) {
                  if (e.target.classList.contains('slider__control')) {
                    e.preventDefault();
                    var direction = e.target.classList.contains('slider__control_right') ? 'right' : 'left';
                    _transformItem(direction);
                  }
                };
 
                var _setUpListeners = function () {
                  // добавление к кнопкам "назад" и "вперед" обрботчика _controlClick для событя click
                  _sliderControls.forEach(function (item) {
                    item.addEventListener('click', _controlClick);
                  });
                }
 
                // инициализация
                _setUpListeners();
 
                return {
                  right: function () { // метод right
                    _transformItem('right');
                  },
                  left: function () { // метод left
                    _transformItem('left');
                  }
                }
              }
            }());
            var slider = multiItemSlider('.slider')
0
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
14.11.2019, 20:44 5
Меняйте цифру 100
Javascript
1
_step = _itemWidth / _wrapperWidth * 100, // величина шага (для трансформации)
0
0 / 0 / 0
Регистрация: 14.11.2019
Сообщений: 11
14.11.2019, 20:49  [ТС] 6
fixeri, Пробовал, Слайдер растягивается и остаются пустые окна. Т.е. когда прошли 3 партии по 3 фото kcnftncz ror две - три партии без фото.
0
380 / 230 / 115
Регистрация: 22.11.2016
Сообщений: 379
14.11.2019, 20:53 7
Javascript
1
2
3
4
5
6
var position = {
                  getMin: 0,
                  getMax: _items.length -5,
                };
 
_step = _itemWidth / _wrapperWidth * 300, // величина шага (для трансформации)
1
0 / 0 / 0
Регистрация: 14.11.2019
Сообщений: 11
14.11.2019, 21:00  [ТС] 8
fixeri, Огромное спасибо, все сработало! Благодарю!!!!!
0
0 / 0 / 0
Регистрация: 14.11.2019
Сообщений: 11
19.11.2019, 19:21  [ТС] 9
Привет. столкнулся с такой проблемой. слайдер указанный выше некорректно работает в Мазиле - у него есть лишний шаг , который показывает блок без фото. В internet Explorer вообще не хочет двигаться. Дело в стилях или нужно писать отдельный скрипт , если да то, что в нем изменить? Заранее благодарю.
0
19.11.2019, 19:21
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
19.11.2019, 19:21
Помогаю со студенческими работами здесь

Подскажите пожалуйста, нужно сделать так, чтобы х было не равно нулю
Program Lab2; Const b=2.4; c=1.7; Var x, a, y: real; Begin write ('Введите значение x='); ...

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

Подскажите,пожалуйста,можно ли сделать так,чтобы когда я вывожу из текстового файла,данные для массива,автом
Подскажите,пожалуйста,можно ли сделать так,чтобы когда я вывожу из текстового файла,данные для...

Как сделать так чтобы юзер мог сохранять фото на сервер
Юзер вводит на форме информацию о себе в том числе и фото. Как сохранять фото на сервере? Спасибо


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru