Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Михаил555
0 / 0 / 0
Регистрация: 08.10.2018
Сообщений: 5
1

Infinite slider

08.10.2018, 07:24. Просмотров 242. Ответов 9
Метки нет (Все метки)

господа есть ли кто хорошо понимает javaScript ? никак не могу сделать этот слайдер бесконечным чтоб он крутился по кругу помогите если кто может!! разметка 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="slider" id="slider1">
        <div class="slider-content">
            <div class="slider-item">
                <img src="img/-1.jpg" alt="">
            </div>
            <div class="slider-item">
                <img src="img/-2.jpg" alt="">
            </div>
            <div class="slider-item">
                <img src="img/-3.jpg" alt="">
            </div>
            <div class="slider-item">
                <img src="img/-4.jpg" alt="">
            </div>
        </div>
        <button class="slider-button slider-button-prev" data-action='left'>prev</button>
        <button class="slider-button slider-button-next" data-action='right'>next</button>
    </div>
 
    <script src="script.js"></script>
</body>
</html>
--------------------------------------------
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
.slider {
    position: relative;
    padding: 0 50px;
}
.slider-content {
    position: relative;
    overflow: hidden;
    height: 300px;
}
.slider-item {
    position: absolute;
    border: 1px solid #000;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: grey;
}
.slider-item img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid green;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    cursor: pointer;
    outline: none;
}
.slider-button-prev {
    left: 0;
}
.slider-button-next {
    right: 0;
}
.slider-button.disabled {
    background: grey;
    border: gray;
    opacity: 0.5;
}
-----------------------------------
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
function Slider(settings) {
    var slider = document.getElementById(settings.sliderId);
    var sliderContent = slider.getElementsByClassName('slider-content')[0];
    var sliderItems = slider.getElementsByClassName('slider-item');
    var slideWidth = parseFloat(getComputedStyle(sliderContent).width);
    singleSlideWidth = 0;
    var sliderButtons = slider.getElementsByClassName('slider-button');
    var self = this;
    var showSlides = function(a) {
        for(var i = 0; i < sliderItems.length; i++) {
            if (sliderItems[i].style.left !== '') {
                var current = parseFloat(sliderItems[i].style.left);
                sliderItems[i].style.left = (current + (singleSlideWidth * a)) + 'px';
            }else {
                sliderItems[i].style.width = singleSlideWidth + 'px';
                sliderItems[i].style.left = (singleSlideWidth * i) + 'px';
            }
            
        }
    }
 
    this.move_left = function() {
        showSlides(-1);
    }
 
    this.move_right = function() {
        showSlides(1);
    }
    var init = function() {
        if (!settings.slidesToShow || isNaN(settings.slidesToShow)) {
            settings.slidesToShow = 1;
        }
        singleSlideWidth = slideWidth/settings.slidesToShow;
 
        showSlides(1);
        for(var i = 0; i < sliderButtons.length; i++) {
            sliderButtons[i].addEventListener('click', function() {
                self['move_'+this.dataset.action]()
            });
        }
    }
init()
    
}
Slider({
    sliderId: 'slider1',
    slidesToShow: 3,
    infinite: true
});
0
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
08.10.2018, 07:24
Ответы с готовыми решениями:

Скрипт infinite scroll
Нужен такой скрипт для использования в интернет магазине. &lt;div class=&quot;raw1&quot;&gt; &lt;div...

Не могу сделать прокрутку с пагинацией Infinite Scroll
Разложите пожалуйста по полочкам для новичка 1-Скачал демку 2 страницы...

Slider
Здраствуйте. Вот есть во такой шаблон на wp, так вот вопрос как сделать такой же движущийся...

Калькулятор slider ui
Всем доброго дня. Сделал калькулятор, при перемещении ползунка все параметры пересчитываются как...

Ползунок (slider) на JavaScript
Помогите пожалуйста, очень срочно нужен простенький ползунок на JS, у кого нибудь есть? Пыталась...

9
Qwerty_Wasd
investigator web-dev
Эксперт JSЭксперт HTML/CSS
2039 / 1253 / 582
Регистрация: 16.04.2016
Сообщений: 3,260
Завершенные тесты: 2
08.10.2018, 08:15 2
Михаил555, ваш код не смотрел. Уж извините - глаза режет. Вот пример простой карусели - https://codepen.io/qwerty_wasd/pen/GdGobd
HTML5
1
2
3
4
5
<div class="carousel-module">
  <div class="arrow-left"></div>
  <div class="img-container"><img class="item-img" src="https://dummyimage.com/100x100/EF5350/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/BA68C8/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/7986CB/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/64B5F6/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/4DB6AC/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/81C784/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/AED581/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/DCE775/000000.png&amp;text=image" alt=""/><img class="item-img" src="https://dummyimage.com/100x100/FB8C00/000000.png&amp;text=image" alt=""/></div>
  <div class="arrow-right"></div>
</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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
}
 
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
}
 
*:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: 0;
}
 
.carousel-module {
    margin-top: 100px;
    min-width: 660px;
    text-align: center;
}
 
.img-container {
    display: inline-block;
    position: relative;
    height: 100px;
    width: 600px;
    border: 2px solid #000;
    overflow: hidden;
}
 
.arrow-left {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    cursor: pointer;
    transition: 1s;
    border-width: 50px 20px 50px 0;
    border-color: transparent #000000 transparent transparent;
}
 
.arrow-left:active {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
 
.arrow-right {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    cursor: pointer;
    transition: 1s;
    border-width: 50px 0 50px 20px;
    border-color: transparent transparent transparent #000000;
}
 
.arrow-right:active {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
 
.item-img {
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    transition: .7s;
}
 
.item-img:nth-of-type(1) {
    -webkit-transform: translate(-530%, -50%);
    transform: translate(-530%, -50%);
}
 
.item-img:nth-of-type(2) {
    -webkit-transform: translate(-410%, -50%);
    transform: translate(-410%, -50%);
}
 
.item-img:nth-of-type(3) {
    -webkit-transform: translate(-290%, -50%);
    transform: translate(-290%, -50%);
}
 
.item-img:nth-of-type(4) {
    -webkit-transform: translate(-170%, -50%);
    transform: translate(-170%, -50%);
}
 
.item-img:nth-of-type(5) {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
 
.item-img:nth-of-type(6) {
    -webkit-transform: translate(70%, -50%);
    transform: translate(70%, -50%);
}
 
.item-img:nth-of-type(7) {
    -webkit-transform: translate(190%, -50%);
    transform: translate(190%, -50%);
}
 
.item-img:nth-of-type(8) {
    -webkit-transform: translate(310%, -50%);
    transform: translate(310%, -50%);
}
 
.item-img:nth-of-type(9) {
    -webkit-transform: translate(430%, -50%);
    transform: translate(430%, -50%);
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
(function() {
  document.querySelector('.carousel-module').addEventListener('click', function(e) {
    var first, last, parent;
    parent = document.querySelector('.img-container');
    first = parent.querySelector('.item-img');
    last = parent.querySelector('.item-img:last-child');
    if (e.target.classList.contains('arrow-left')) {
      parent.appendChild(first);
    }
    if (e.target.classList.contains('arrow-right')) {
      parent.insertBefore(last, first);
    }
  });
}).call(this);
1
Михаил555
0 / 0 / 0
Регистрация: 08.10.2018
Сообщений: 5
09.10.2018, 10:57  [ТС] 3
Спасибо само собой но как вы думаете? если я бы захотел слайдер к примеру такой какой вы мне скинули разве не поискал бы также на кодепен?
0
Qwerty_Wasd
investigator web-dev
Эксперт JSЭксперт HTML/CSS
2039 / 1253 / 582
Регистрация: 16.04.2016
Сообщений: 3,260
Завершенные тесты: 2
09.10.2018, 13:16 4
Михаил555, конечно нашли бы Михаил. Вариант что я вам скинул, не для того чтобы заменить Ваш. А для того чтобы Вы отчетливо увидели саму идею. Жаль что Вы этого не поняли. Суть то простая - appendChild() при клике на левую кнопку должен забрать первый первый из элементов и вставить в конец. insertBefore() - обратная ситуация. В общем Вы ж и сами все знаете - чего я тут распинаюсь
0
09.10.2018, 13:16
Михаил555
0 / 0 / 0
Регистрация: 08.10.2018
Сообщений: 5
10.10.2018, 07:44  [ТС] 5
Видимо вы меня просто не так поняли я ведь написал что моя проблема в том что я не могу его зациклить сделать по кругу именно в том примере который я скинул. Я понимаю как он работает, но ведь нету какого то одного универсального метода делать слайдера карусель, их по разному можно делать вот я и попытался сделать его по другому ну и само собой на ткнулся на проблему с infinite, а в том варианте который вы мне показали ничего приблизительного нету что бы могло помочь в решении этой задачи вот такая ситуация.
0
Qwerty_Wasd
investigator web-dev
Эксперт JSЭксперт HTML/CSS
2039 / 1253 / 582
Регистрация: 16.04.2016
Сообщений: 3,260
Завершенные тесты: 2
10.10.2018, 11:17 6
Михаил555, в том примере который Вы сделали - Вы упаковали картинки в контейнер и двигаете их в нем. А надо было тогда уж двигать весь контейнер, можно избавить себя от лишних циклов. Потом, чтобы зациклить движение контейнера, Вам нужно будет отследить его достижение до определенной точки и вернуть в ту позицию откуда он начал движение. Или проверять, что контейнер вышел за пределы родителя с overflow: hidden и опять же вернуть его в позицию откуда началось движение. То есть фактически эффект бегущей строки.
0
Михаил555
0 / 0 / 0
Регистрация: 08.10.2018
Сообщений: 5
25.10.2018, 22:27  [ТС] 7
Здравствуйте подскажите а как сделать етод слайдер адаптивним в том примере что ви мне показали на https://codepen.io/qwerty_wasd/pen/GdGobd
0
Qwerty_Wasd
investigator web-dev
Эксперт JSЭксперт HTML/CSS
2039 / 1253 / 582
Регистрация: 16.04.2016
Сообщений: 3,260
Завершенные тесты: 2
25.10.2018, 22:47 8
Михаил555, здравствуйте, так медиа-запросы же.

Добавлено через 6 минут
Михаил555, и почему именно мой пример? Нет, конечно же Вы можете его использовать как душе угодно. Но он был сделан лишь для примера на скорую руку. Вы можете сверстать как хотите. Смысл это примера я объяснял выше. Да даже объяснения не нужны - он предельно простой.
0
Михаил555
0 / 0 / 0
Регистрация: 08.10.2018
Сообщений: 5
25.10.2018, 23:25  [ТС] 9
Да не спорю он простой но вот с адаптивом проблема мне что под каждое расширение екрана писатт медиазапроси согласитесь как то мноно води если его сделать резиновим при сужении екрана все слайди начнут сужатся само собой і тот слайдер которий к примеру в центре сместится в край в общем проблема со всеми слайдерами такого типа есле ток не писать медіазапроси под каждую ширину єкранов спасибо за ваши ответи щас пишу с телефона суто украинская роскладка за ошибки извиняюсь
0
Qwerty_Wasd
investigator web-dev
Эксперт JSЭксперт HTML/CSS
2039 / 1253 / 582
Регистрация: 16.04.2016
Сообщений: 3,260
Завершенные тесты: 2
25.10.2018, 23:29 10
Михаил555, все нормально, я понимаю. Всего четыре брекпоинта - это я так.. мысли вслух. Вы можете сверстать свой вариант, если идея понятна с перемещением элементов.
0
25.10.2018, 23:29
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.10.2018, 23:29

json slider не работает корректно
Вообщем внедряю я верстку, в которой присутствует эта радость. Происхождения я не знаю, да и просто...

Загрузка nivo slider при открытии сайта
Доброго времени суток, форумчане. Пишу вам с просьбой о помощи. На сайте http://novolukomlcrb.by/ в...

Framework slider carousel bootstrap для динамического списка
Необходимо реализовать слайдер carousel для для динамического списка, в котором элементы...


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

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

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