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

@garmoni · Регистрация: 06.01.2014

Author24 — интернет-сервис помощи студентам

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

HTML5

<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

.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

$(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);   
});

@Mr_Sergo · 28.02.2019, 14:47

garmoni,

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

HTML5

<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

$(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

.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';
}

	28.02.2019, 14:47