Cara Membuat Slider dengan Jquery

Yoo kawan-kawan Otaku-IT disini mimin mau share tutorial yang menarik yaitu membuat slider dengan menggunakan Jquery yuk langsung aja cek tutorialnya dibawah:

bahan:
Download jquery disini

Masukkan jquerynya dengan perintah

set Htmlnya seperti berikut:
<!-- <div id="slider">
        <div id="container">
            <img src="image1.png" alt="">    
            <img src="image2.png" alt="">    
            <img src="image3.png" alt="">    
        </div>
    </div> -->

set Cssnya seperti berikut:
/*
body{
    background-color: darkslategrey;
}
#slider{
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}
#container{
    position: absolute;
    min-width: max-content;
}
#container>img, #slider{
    width: 400px;
    height: 400px;
}
*/

set Jquerynya seperti berikut:
/*
$(document).ready(function(){
    var idx = 1;
    var slider = $('#container');
    
    function slide_next(){
        if(idx < 3){
            slider.animate({left:'-=400px'}, 500);
            idx++;
        }else{
            slider.animate({left:'0px'}, 1500);
            idx = 1;
        }
    }
    setInterval(slide_next, 2000);
});
*/


jangan lupa Uncomment dan maka maka tampilanya akan seperti berikut: