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.
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.
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.
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..
Untuk slide aktif kita akan menambahkan gradien hijau dan mengubah bayangan.
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> |
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;} |
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);} |
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;} |
0 comments
Post a Comment