Buat Slider Gambar menggunakan jQuery dan CSS3

Bookmark and Share
Dalam tutorial ini kita akan belajar membuat sebuah Slider dengan “Script Slider jQuery Nivo” dan CSS3. Kami akan menggunakan “Nivo Slider Script jQuery” karena itu alat yang ampuh dan gratis. Script ini memiliki 16 efek transisi, sederhana, fleksibel dan memiliki banyak fitur bagus. Kita dapat menggunakannya hampir di mana saja dan untuk hampir semua jenis proyek, termasuk situs pribadi dan komersial dan theme yang kita buat.

Step 1 – Markup HTML Dasar

Pertama anda harus mendownload versi Nivo Slider jQuery di sini. Anda hanya perlu dua file dari pak telah Anda download: “Nivo-slider.css” dan “jquery.nivo.slider.pack.js”.
Kemudian membuat Markup HTML dasar dan menambahkan “Nivo Slider” CSS dan JS file. Anda juga perlu link ke library jQuery menggunakan versi terakhir diselenggarakan oleh Google atau jika Anda mau, Anda bisa menyimpannya di server Anda sendiri, itu pilihan Anda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slider Tutorial</title>
    <link rel="stylesheet" href="css/nivo-slider.css" media="screen">
</head>
 
<body>
 
<!-- jQuery & Nivo Slider -->
<script src="js/jquery.nivo.slider.pack.js"></script>
 
</body>
</html>
Untuk memuat slider Nivo kita perlu menambahkan baris lagi kode sebelum </ body> tag penutup. Kita juga perlu mengatur beberapa opsi untuk membuat kontrol terlihat, mengubah opacity keterangan dan mengubah teks slide sebelumnya dan di samping panah. Anda dapat menemukan daftar pilihan lengkap di sini.
1
2
3
4
5
6
7
8
9
10
<pre title=""><script>
    $(window).load(function() {
        $('#slider').nivoSlider({
            directionNavHide: false,
            captionOpacity: 1,
            prevText: '<',
            nextText: '>'
        });
    });
</script>

Step 2 – Slider HTML Markup

Pertama kita perlu menciptakan div dengan “slider-wrapper” kelas dan “futurico-theme”. Kemudian membuat sebuah div dengan id “slider” dan kelas “nivoSlider”. Untuk setiap slide kita akan menciptakan sebuah <img>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<pre title=""><div>
 
<div id="slider">
 
<img src="img/slide1.png" alt="">
 
<img src="img/slide2.png" alt="">
 
<img src="img/slide3.png" alt="">
 
<img src="img/slide4.png" alt="">
 
</div>
 
</div>

Step 3 – Slider Layout

Kita akan menciptakan sebuah lebar 300px dan tinggi 180px slider. Seperti yang akan kita tambahkan bantalan 5px perlu kita kurangi 10px dari width dan height Kami juga akan mengatur warna latar belakang dan sudut-sudut membulat. masukkan script 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
.futurico-theme.slider-wrapper {
position: relative;
width: 290px;
height: 170px;
margin: 0;
padding: 5px;
 
background: #141517;
 
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
 
.futurico-theme .nivoSlider {
position: relative;
width: 290px;
height: 170px;
}
 
.futurico-theme .nivoSlider img {
display: none;
position: absolute;
width: 290px;
height: 170px;
top: 0;
left: 0;
}

Step 4 – Control Slider

Sekarang kita akan gaya Control slider. Kita akan mulai dengan menempatkan kontrol di bagian bawah dan berpusat. Jika Anda akan memiliki lebih dari empat slide Anda harus mengubah “left” nilai untuk pusat kontrol.
1
2
3
4
5
.futurico-theme .nivo-controlNav {
    position: absolute;
    bottom: -30px;
    left: 105px;
}
Kita akan menciptakan sebuah lingkaran untuk setiap slide. Untuk gaya itu kami akan menambahkan warna latar belakang, beberapa bayangan dan sudut dibulatkan untuk membuat lingkaran. Untuk menyembunyikan “1,2,3,4″ penomoran kita akan menambahkan teks indent dengan nilai negatif. masukin lagi cssnya..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.futurico-theme .nivo-controlNav a {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    text-indent: -9999px;
 
    background: #141517;
 
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
    box-shadow: inset 0px 1px 1px rgba(0,0,0, .5), 0px 1px 1px rgba(255,255,255, .05);
}
Untuk slide aktif kita akan menambahkan gradien hijau dan mengubah bayangan.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.futurico-theme .nivo-controlNav a.active,
.futurico-theme .nivo-caption span {
    background: #a5cd4e;
    background: -moz-linear-gradient(top#a5cd4e 0%, #6b8f1a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
    background: -webkit-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%);
    background: -o-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%);
    background: -ms-linear-gradient(top#a5cd4e 0%,#6b8f1a 100%);
    background: linear-gradient(top#a5cd4e 0%,#6b8f1a 100%);
 
    -webkit-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    -moz-box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
    box-shadow: inset 0px 1px 1px rgba(255,255,255, .4), 0px 1px 1px rgba(0,0,0, .3);
}

Step 5- Next dan Perview Slide

Untuk gaya slide berikutnya dan sebelumnya mengontrol kita akan posisi itu di pusat dan menambahkan beberapa CSS gaya dasar (font-family, font-ukuran, warna, dll).
1
2
3
4
5
6
7
8
9
10
11
12
13
.futurico-theme .nivo-directionNav a {
    display: block;
    top: 60px;
 
    font-family: 'Consolas', sans-serif;
    font-size: 40px;
    color: #141517;
    text-shadow: 0px 1px 1px rgba(255,255,255, .05);
}
 
.futurico-theme a.nivo-prevNav { left: -40px; }
 
.futurico-theme a.nivo-nextNav { right: -40px; }



Step 6 – Keterangan HTML Markup

Untuk membuat keterangan kita perlu membuat sebuah div dengan class “Nivo-html-caption” dan id acak. Untuk menghubungkan keterangan ke slide masing-masing menambahkan “title” untuk <img> dengan nama yang sama dengan id keterangan. markup lagi htmlnya!!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="slider" class="nivoSlider">
 
    <img src="img/slide1.png" alt="" title="#caption1">
 
    <img src="img/slide2.png" alt="">
 
    <img src="img/slide3.png" alt="" title="#caption3">
 
    <img src="img/slide4.png" alt="">
 
</div>
 
<div id="caption1" class="nivo-html-caption">
    <strong>New Project</strong> <span></span> <em>Some description here</em>.
</div>
 
<div id="caption3" class="nivo-html-caption">
    <strong>Image 3</strong> <span></span> <em>Some description here</em>.
</div>

Step 7 – Keterangan Style

Untuk gaya keterangan kita akan mengubah warna teks ukuran keluarga font dan font. Kami juga akan menggunakan gradien hijau yang sama yang telah kita gunakan sebelumnya.
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
.futurico-theme .nivo-caption {
    padding: 5px 0;
 
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    color: #e1e1e1;
 
    background: #000000;
 
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
}
 
.futurico-theme .nivo-caption span {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 5px 1px 5px;
 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
 
.futurico-theme .nivo-caption em {
    font-family: Georgia, sans-serif;
    font-size: 11px;
    color: #727581;
}

Kesimpulan

Itu saja! Kami telah menciptakan sebuah slider yang kuat dan indah. Dalam tutorial ini kami fokus pada gaya slider dan “Nivo Slider Script” ditempelkan mengurus fungsi tersebut. Jangan lupa untuk meninggalkan feedback di komentar.

{ 0 komentar... Views All / Send Comment! }

Poskan Komentar