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

Логика смены слайдов

15.10.2018, 20:12. Просмотров 430. Ответов 2
Метки нет (Все метки)

Переделать логику смены слайдов: теперь все картинки надо прятать, а показывать только одну, добавляя картнке класс active, соответственно, надо этот класс при перелистывании передавать следующей или предыдущей картинке
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
15.10.2018, 20:12
Ответы с готовыми решениями:

Скорость смены слайдов хедера
Помогите,как сделать слайды раза в 3 медленее http://pastebin.com/yWg0SYHW /* * jQuery Nivo...

Скорость смены слайдов слайдера Бутстрап
Здравствуйте! Подскажите, пожалуйста, как изменить скорость смены слайдов слайдера Бутстрап. ...

Подскажите как интегрировать скрипт смены слайдов по времени в уже готовый слайдер
Добрый день. Подскажите как интегрировать скрипт смены слайдов в уже готовый слайд. Имеется...

Закруглением у слайдов
Скачал слайдер...

2
17 / 0 / 0
Регистрация: 02.09.2018
Сообщений: 58
16.10.2018, 09:56  [ТС] 2
Получается надо сделать слайдер,например из 3 картинок и если мы нажимаем стрелочку вперед или назад показывается только одна картинка из 3 по очереди.
0
Эксперт JS
1775 / 932 / 364
Регистрация: 29.04.2016
Сообщений: 2,394
17.10.2018, 08:12 3
defender24_1,

Можно так -> https://codepen.io/Mr_Sergo/pen/PyQPvZ

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="slider">
    <div class="overflow-imgs">
        <div class="line-imgs">
            <img src="https://pp.userapi.com/c830409/v830409785/1be33e/73SFiK33foM.jpg" />
            <img src="https://pp.userapi.com/c830409/v830409785/1be345/oIX93cgm34k.jpg" />
            <img src="https://pp.userapi.com/c830409/v830409785/1be34c/ApLT7ZF9qXg.jpg" />
            <img src="https://pp.userapi.com/c830409/v830409785/1be353/SjILkQiUBac.jpg" />
        </div>
    </div>
    <div class="prev arrow">Назад</div><div class="next arrow">Вперед</div>
</div>
Javascript
1
2
3
4
5
6
7
let lineImgs = document.querySelectorAll('.line-imgs')[0],
    img = lineImgs.querySelector('img'),
    i = 0;
document.querySelectorAll('.slider')[0].addEventListener('click',e => {
    if(e.target.classList.contains('next')) i == -3 ? (i = 0, lineImgs.style.left = '0px') : (i--, lineImgs.style.left = (i * img.width) + 'px');
    if(e.target.classList.contains('prev')) i == 0 ? (i = -3, lineImgs.style.left = '-300px') : (i++, lineImgs.style.left = (i * img.width) + 'px');
});
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
html, body{margin: 0px 0px 0px 0px;width:  100%;}
 
.slider{
    width: 230px;
    margin: 20px auto 0px auto;
}
 
.overflow-imgs{
    width: 100px;
    height: 100px;
    margin: 0px auto 0px auto;
    overflow: hidden;
}
 
.line-imgs{
    width: 400px;
    position: relative;
    left: 0px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
 
.line-imgs > img{
    float: left;
}
 
.arrow{
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 37px;
    color: #fff;
    cursor: pointer;
    margin: 10px 0px 0px 0px;
    background: #2269ff;
    display: inline-block;
    position: relative;
    margin-left: 10px;
}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.10.2018, 08:12

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Несколько слайдов на листе
Почему недоступно печать несколько слайдов на листе?

Печать фона слайдов
Добрый день. При создании слайда выбираю: формат фона - градиентная заливка. На экране все...

Переключение слайдов на сайте
Здравствуйте, нашел ниже прикрепленный скрипт в интернете, решил интегрировать его на свой сайт и в...

Создание слайдов на форме
Добрый день. Нужна ваша помощь. Как сделать список слайдов в форме. Мне нужно что бы при нажатии на...


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

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

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