Advertiser

Home / Unlabelled / Membuat Slider sendiri dengan jQuery dan Font Awesome (Tanpa Plugin)

Membuat Slider sendiri dengan jQuery dan Font Awesome (Tanpa Plugin)


Memang jQuery sangat memudahkan kita dalam membuat website yang interaktif. Apalagi dengan adnya plugin jQuery yang sangat banyak dan bervariasi fungsinya, Salah satunya adalah Image Slider. Nivo Slider adalah salah satu image slider yang cukup banyak penggunanya.
Kali ini saya akan memberikan tutorial untuk membuat Image Slider jQuery tanpa menggunakan Plugin apapun,.

Tools:
  • jQuery (saya pakai versi 2.1.4)
  • Notepad++
  • Font Awesome
Berikut isi Skripnya:
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Slider jQuery</title>
        <script src="jquery-2.1.4.min.js"></script>
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <style>
            .slider{
                width: 800px;
                overflow: hidden;
                height: 500px;
                margin: 50px auto;
                position: relative;
            }
            .slider ul{
                width: 2400px;
                padding: 0;
                margin: 0;
            }
            .slider li{
                float: left;
                list-style: none;
                width: 800px;
                height: 500px;
            }
            .slider li img{
                width: 100%;
                height: 100%;
            }
            .slider i{
                position: absolute;
                top: 200px;
                cursor: pointer;
                color: #BDBDBD;
            }
            .slider i:hover{
                color: #000;
            }
            .left{
                left: 10px;
            }
            .right{
                right: 10px;
            }
        </style>
    </head>
    <body>
             
        <div class="slider">
            <ul>
                <li><img src="img19.jpg"></li>
                <li><img src="img20.jpg"></li>
                <li><img src="img21.jpg"></li>
            </ul>
            <i class="left fa fa-caret-square-o-left fa-3x"></i>
            <i class="right fa fa-caret-square-o-right fa-3x"></i>
        </div>
    </body>
    <script>
        $(document).ready(function(){
             
            setInterval(function(){
                var satu = $(".slider li:first").html();
                $(".slider ul").append('<li>'+satu+'</li>');
                $('.slider li:first').animate({'margin-left':'-800px'},1000,function(){
                    $(this).remove();
                });
            }, 5000);
            $(".right").click(function(){
                var first = $(".slider li:first").html();
                $(".slider ul").append('<li>'+first+'</li>');
                $('.slider li:first').animate({'margin-left':'-800px'},1000,function(){
                    $(this).remove();
                });
            });
            $(".left").click(function(){
                var last = $('.slider li:last').html();
                $('.slider li:last').remove();
                $('.slider ul').prepend('<li>'+last+'</li>');
                $('.slider li:first').css({'margin-left':'-800px'});
                $('.slider li:first').animate({'margin-left' : '0px'},1000);
            });
        });
    </script>
</html>
Penjelasan:
  • Div dengan class slider dibuat sedemikian rupa dan widthnya menyesuaikan lebar gambbar dan objek didalamnya yang melebihi lebar akan tersembunyi. Ini dikarenakan gambar yang ada diset berjajar dari kiri ke kanan jadi agar gambar yang tidak disorot tidak terlihat.
  • 1
    2
    3
    4
    5
    6
    7
    setInterval(function(){
        var satu = $(".slider li:first").html();
        $(".slider ul").append('<li>'+satu+'</li>');
        $('.slider li:first').animate({'margin-left':'-800px'},1000,function(){
            $(this).remove();
        });
    }, 5000);
Skrip diatas berfungsi untuk membuat slider otomatis. dimana cara kerjanya adalah mengambil isi dari tag <li> yang pertama lalu menyisipkan tag <li> dengan isi tersebut dibagian akhir <ul>. Dan untuk melakukan animasi terus menerus menggunakan function setInterval
  • 1
    2
    3
    4
    5
    6
    7
    $(".right").click(function(){
        var first = $(".slider li:first").html();
        $(".slider ul").append('<li>'+first+'</li>');
        $('.slider li:first').animate({'margin-left':'-800px'},1000,function(){
            $(this).remove();
        });
    });
Skrip diatas akan bekerja jika tombol navigasi kanan diklik dimana akan menjalankan sistem yang sama seperti skrip sebelumnya, yang membedakan adalah skrip ini tidak memakai function setInterval().
  • 1
    2
    3
    4
    5
    6
    7
    $(".left").click(function(){
        var last = $('.slider li:last').html();
        $('.slider li:last').remove();
        $('.slider ul').prepend('<li>'+last+'</li>');
        $('.slider li:first').css({'margin-left':'-800px'});
        $('.slider li:first').animate({'margin-left' : '0px'},1000);
    });
Cara kerja skrip diatas adalah jika tombol navigasi kiri diklik maka isi dari <li> terakhir akan dimasukkan di tag <li> pertama dan tag <li> yang sebelumnya dihapus.
Author Image

About sandy pangestu
Soratemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of templatesyard is to provide the best quality blogger templates.

Related Posts:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)