Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 2
Регистрация: 06.01.2014
Сообщений: 118
1

Как добавить к слайду управление

28.02.2019, 11:04. Просмотров 268. Ответов 1

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

HTML5
1
2
3
4
5
<div id="slider" class="slider_wrap">
    <img src="/slider_image1.jpg" alt="" />
    <img src="/slider_image2.jpg" alt="" />
    <img src="/slider_image3.jpg" alt="" />
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.slider_wrap {
    margin:100px auto 0;
    width:640px;
    height:400px;
    position:relative;
    overflow:hidden;
}
.slider_wrap img {
    width:100%;
    height:auto;
    display:none;
    position:absolute;
    top:0;
    left:0; 
}
.slider_wrap img:first-child {
    display:block;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
    var indexImg = 1,
        indexMax = $('#slider img').length; 
        
    function autoCange () { 
        indexImg++;
        if(indexImg > indexMax) {
            indexImg = 1;
        }           
        $('#slider img').fadeOut(500);
        $('#slider img:nth-child('+indexImg+')').fadeIn(500);
    }
    
    setInterval(autoCange, 5000);   
});
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
28.02.2019, 11:04
Ответы с готовыми решениями:

Как обратиться к слайду?
Помогите решить

Как перейти от слайда к слайду макросом
Помогите новичку. Свойство или метод - как перейти от слайда к слайду в power point макрос....

Как добавить валюту в управление подпиской?
Понадобилось включить коммерческую подписку в vBulletin 4.2.2 Для начала собираюсь использовать...

Как добавить управление RTS и DTR в работу с ком портом?
Как можно добавить эти две линии в работу с портом? Нигде не смог найти нормального объяснения

1
Эксперт JS
1822 / 942 / 370
Регистрация: 29.04.2016
Сообщений: 2,416
28.02.2019, 14:47 2
garmoni,

Можно так -> https://codepen.io/Mr_Sergo/pen/Ygyrmv
HTML5
1
2
3
4
5
6
<div id="slider" class="slider_wrap">
    <img src="https://proxy12.online.ua/photo/r2-375d4d99df/678123_640.jpg" alt="" />
    <img src="https://flirtic.com/media/photos/1/c/3/1c38630232.jpg" alt="" />
    <img src="https://wallpapers-fenix.eu/lar/141215/115527451.jpg" alt="" />
    <div class="left"></div><div class="right"></div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function () {
    return function(){
        var i = 0, max = $('#slider img').length;
        $('#slider').on('click', autoCange);
        function autoCange(e){
            if(e.target.classList.contains('right')){ i++; change(); }
            if(e.target.classList.contains('left')){ i--; change(); }
            function change(){
                if(i > max-1) i = 0; if(i < 0) i = max-1;
                $('#slider img').stop(true, true).fadeOut(500);
                $('#slider img').eq(i).stop(true, true).fadeIn(500);
            }
        }
    }();
});
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
.slider_wrap {
    margin:100px auto 0;
    width:640px;
    height:400px;
    position:relative;
    overflow:hidden;
}
.slider_wrap img {
    width:100%;
    height:auto;
    display:none;
    position:absolute;
    top:0;
    left:0; 
}
.slider_wrap img:first-child {
    display:block;
}
 
.left, .right{
    width: 50px;
    height: 100%;
    background: black;
    position: relative;
    cursor: pointer;
    opacity: 0.4;
    transition: opacity 0.3s;
    text-align: center;
    font-size: 40px;
    color: white;
    line-height: 370px;
}
 
.right{
    margin-top: -400px;
    float: right;
}
 
.left:hover, .right:hover{
    opacity: 0.6;
}
 
.left:after{
    content: '\21D0';
}
 
.right:after{
    content: '\21D2';
}
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
28.02.2019, 14:47

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

Как обратиться к слайду (т.е. сделать активным следующий слайд для работы с таблицами на нём)?
Добрый день! Подскажите, пожалуйста, как обратиться к следующему слайду для работы с таблицами...

Как в коде Custom WebControl добавить управление из наружного кода свойствами BackColor, ForeColor, FontSise, FontName
Помогите пожалуйста в приведенном коде Custom WebControl добавить управление из наружного кода...

Как добавить поля в список справочника Партнеры в "Управление торговлей 11"
В справочнике &quot;Партнеры&quot; при нажатии на кнопку &quot;Все действия&quot; -&gt; &quot;Вывести список...&quot; необходимо...

Возврат к первому слайду автоматически
Задача: с первого слайда с помощью гиперссылок переходить на нужный слайд. Слайд, на который...


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

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

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