Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Designing

Kode Slider Tabbed Juicy Anda Sendiri (menggunakan Nivo Slider)

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Keti Pritania (you can also view the original English article)

Seminggu yang lalu, di situs saudara kami, Webdesigntuts+, kami menunjukkan kepada Anda bagaimana merancang 'Juicy Tabbed Slider' di Photoshop. Hari ini kami akan menunjukkan kepada Anda bagaimana sebenarnya kode itu dalam beberapa langkah cepat. Tidak diperlukan pengetahuan CSS atau Javascript yang berat - janji! Kami akan menggunakan Nivo Slider populer untuk menangani animasi, jadi mari kita menggali!


Mari kita menggali!

Alright, jadi dengan asumsi bahwa Anda telah melewati tahap desain tutorial ini, sekarang Anda harus memiliki sebuah elemen slider cukup mendasar dalam format Photoshop (atau kembang api). Saya akan menulis tutorial ini sebagai "standalone" slider - berarti itu pada dasarnya akan menjadi satu-satunya unsur pada halaman yang kita ciptakan... tetapi menggunakan hanya beberapa langkah tambahan setelah fakta, Anda harus dapat menambahkan ini ke desain Anda sendiri dan posisi/resize itu cara apapun yang Anda inginkan!

Apa yang baik adalah bahwa ini benar-benar skinnable dan resizable - jadi jika Anda telah membuat penyesuaian apapun berat dalam PSD gratis yang kami bagikan, Anda akan mampu menggabungkan franken-modifikasi Anda di sini juga!


Langkah 1: Download Nivo Slider

Pergi ke depan dan download versi terbaru dari Nivo Slider dari halaman mereka. Versi yang kita akan menggunakan versi 2.4, tetapi kecuali jika mereka benar-benar merombak basis-kode seluruh mereka, kemungkinan baik bahwa langkah-langkah dalam tutorial ini akan masih bekerja di versi 2.5, 2,6, dan pernah selanjutnya.

Hal ini penting untuk dicatat bahwa kami sedang tidak kembali menemukan roda di sini. Kita sudah cukup banyak hanya akan menggunakan file "demo.html" mereka sebagai kita sendiri basis operasi. Kami tidak menyimpang jauh dari dokumentasi penggunaan resmi baik.

Sebagai web desainer, saya melakukan banyak pekerjaan di mana saya hanya memodifikasi dan pembajakan kode sumber terbuka orang lain - Anda mungkin melakukan hal yang sama. Itu adalah keahlian yang penting untuk memiliki kecuali Anda bermaksud belajar setiap utama pengkodean bahasa luar sana dan Anda bersedia untuk terus menjaga pengetahuan Anda up to date. Terus terang, saya pikir itu konyol - Jadi mencari tahu cara menggunakan kode orang lain adalah salah satu keterampilan yang paling penting bahwa Anda dapat memiliki.

Dalam kebanyakan kasus (seperti ini satu), semua yang benar-benar diperlukan adalah pemahaman yang kasar tentang HTML dan CSS dan kemampuan untuk membaca dokumentasi.

Kami akan memulai langkah selanjutnya dengan membuka folder 'demo' - jadi lanjutkan dan lakukan sebelum melanjutkan.


Langkah 2: Memahami konfigurasi dasar

Pada langkah ini, kami hanya akan mencoba untuk mendapatkan ide tentang cara kerja Nivo Slider. Setiap slider di luar sana akan bekerja sedikit berbeda, jadi perlu beberapa menit untuk membiasakan diri dengan skrip tertentu yang ingin Anda gunakan pada suatu proyek.

Jika Anda melihat sekilas kode untuk Nivo Slider (di dalam file demo.html), Anda akan melihat bahwa semua gaya dan struktur utama sedang ditangani dari file 'style.css'. Sebenarnya, kode HTML yang sebenarnya cukup sederhana setelah Anda mereferensikan skrip yang sesuai di bagian HEAD di demo.html.

Mari kita mulai walkthrough kami dengan melihat baris kode dari header. Kita tidak perlu mengubah ini, tetapi mereka perlu hadir dalam file apa pun yang kita ingin menggunakan slider pada:

Selanjutnya, mari kita intip HTML mentah yang menghasilkan slider:

Terakhir, kami tidak akan berurusan dengan takarir dalam bilah geser khusus ini, sehingga Anda dapat mengabaikan baris berikutnya (kecuali jika Anda ingin melakukan kustomisasi bilah geser sendiri nanti):

Jadi, sungguh, semua yang diperlukan bagi Anda untuk mengerti adalah HTML dasar yang menghasilkan slider (ditunjukkan di atas di blok kode kedua). Karena kami tidak akan berurusan dengan teks dalam bilah geser kami, Anda dapat lebih menyederhanakan kode menjadi seperti ini:

Itu tidak begitu buruk kanan? Hal ini pada dasarnya hanya beberapa elemen DIV dibungkus dengan gambar di dalam.


CSS for Nivo Slider

CSS adalah apa yang akan dilakukan angkat berat, jadi mari kita intip itu:

Jika Anda baru untuk CSS, ini mungkin terlihat menakutkan pada awalnya... tetapi sebagian besar dari Anda akan melihat ini untuk sedikit cukup sederhana styling kode. Semua yang Anda butuhkan untuk mengubah ukuran dan reskin slider ada di sini... dan kita hanya perlu mengubah beberapa baris script untuk mendapatkan hal ini tampak persis seperti versi kita.

Namun, pertama-tama, kita perlu mencari dan mengecat ulang gambar yang saat ini digunakan untuk slider dengan milik kita. Jika Anda membuka folder '/ demo / gambar /', Anda akan melihat hanya ada beberapa gambar utama yang ingin kami periksa kembali:

  • Arrows.png (kiri / kanan panah)
  • bullets.png (indikator Dot)
  • Slider.png (bingkai latar belakang)
  • background.png (opsional)
  • loading.png (opsional)

Kembali menguliti aset

Jika kita adalah coding slider ini dari awal, kami mungkin akan mulai dengan hati-hati memotong di Photoshop, sepotong demi sepotong. Namun, karena kita sedang bekerja dengan seperangkat yang sudah ada "aset" (alias, gambar yang digunakan untuk membuat latar belakang, peluru dan panah), itu akan sedikit lebih masuk akal untuk kulit pra-aset daripada memulai dari awal.

Reskin peluru

Mari kita mulai dengan file "bullets.png" karena terjadi menjadi file yang paling lurus ke depan. Pergi ke depan dan membukanya di Photoshop:

Perhatikan struktur dasar dari file di sini. Ada dua grafik yang akan diposisikan menggunakan CSS sehingga seseorang muncul pada waktu.

Kita sudah memiliki kita sendiri grafis peluru dari PSD kita sendiri, jadi kami hanya ingin posisi mereka atas unsur yang asli dan kembali menyimpan file:

Dalam kasus ini, kita bahkan tidak perlu untuk kembali ukuran file sama sekali... Jadi kita benar-benar selesai reskinning peluru! Simpan file ini baru atas asli "bullets.png".

Reskin the Arrows

Panah akan menjadi satu tingkat lebih sulit, hanya karena grafik panah kami lebih besar dari grafik aslinya. Tapi tidak apa-apa - kita masih akan mulai dengan membuka file 'arrows.png' di dalam Photoshop.


Sulit untuk melihat panah karena mereka transparan.

Sekali lagi, melihat struktur file - dua Panah, di samping saat ini - yang akan diposisikan menggunakan CSS sehingga satu-satunya muncul pada waktu.

Ukuran grafis adalah 60x30px... tetapi kita harus cukup besar untuk menampung kedua panah lebih besar kami. Memiliki diukur panah kita sendiri (Anda dapat melakukannya menggunakan Rectangular Marquee tool dan Info panel), saya telah memutuskan bahwa dimensi baru harus 70x65px. Ini akan menjadi cukup besar untuk menampung kedua Panah, serta bayangan cahaya yang kita ingin muncul selanjutnya untuk setiap satu.

Kita harus membuat beberapa perubahan pada ukuran dan posisi di CSS, tetapi ini menyelesaikan reskin awal untuk panah. Simpan file baru ini di atas 'arrows.png' yang asli.

Reskin latar belakang

Terakhir, mari kita kembali kulit latar belakang grafis. Demo Nivo Slider menggunakan semacam abstrak latar belakang lingkaran - tetapi kita ingin menggunakan grafik kami "kerangka dan bayangan" untuk latar belakang.

Swap akan menjadi serupa dengan apa yang kami lakukan dengan Panah, tapi bukannya perlu untuk membuat gambar yang lebih besar, kali ini kita benar-benar perlu untuk menyimpan dokumen lebih kecil. Perhatikan seberapa besar gambar asli adalah:


998x392px - diperkecil untuk situs.

998x392px adalah latar belakang yang asli dimensi - kami ingin menjadi lebih dekat ke 494x310px untuk mencocokkan bingkai kita sendiri. Ini tidak sulit, tetapi itu adalah kasus dimana itu akan lebih masuk akal hanya untuk ambil sepotong langsung dari file PSD kami asli.

Pergi ke depan dan mematikan semua lapisan (termasuk latar belakang) Selain frame dan bayangan, kemudian memotong gambar ke tentang 20-25px dari jarak sekitar frame hanya untuk menjadi aman (kami tidak ingin tanpa sengaja tanaman bayangan kami):

Seperti dengan dua grafik, pergi ke depan dan Simpan langsung di atas gambar asli "slider.png".


Simpan slide gambar kami

Slider asli menggunakan gambar yang 618 x 246 dalam ukuran. Slider kami menggunakan gambar yang 430x250px meskipun, jadi kita perlu untuk menyelamatkan atas slide gambar asli menggunakan kita sendiri dipotong dalam versi. Anda jelas dapat menggunakan gambar Anda sendiri di sini ... tapi demi kesederhanaan, saya baru saja memotong gambar Pixar yang digunakan demo.

Jika Anda apakah ingin menggunakan gambar Anda sendiri, jelas Anda akan ingin nama mereka unik (my_image1.jpg, my_image2.jpg, dll), dan kemudian mengubah gambar jalan di dalam dokumen demo.html.


Tweaker CSS untuk menyesuaikan baru kami berkulit gambar

Langkah terakhir di sini adalah mungkin paling sulit karena membutuhkan banyak trial and error. Tujuan kami adalah akan untuk men-tweak file style.css asli sehingga slider kami cocok desain kami sendiri. Masalah utama adalah bahwa slider asli menggunakan dimensi yang sama sekali berbeda untuk sebagian besar unsur-unsur utama, jadi kita perlu hati-hati, melalui trial and error, memilah dimensi kita sendiri apa yang harus.

Trial and Error dalam CSS dapat dilakukan beberapa cara - cara yang "keras" adalah hanya tetap di tweaker file CSS, menyimpannya, dan kemudian melihat pratinjau dalam browser. Cara mudah adalah dengan menggunakan sebuah plugin browser seperti Firebug untuk benar-benar menguji penyesuaian Anda di browser itu sendiri. Jika Anda belum mengambil Firebug belum, saya sangat merekomendasikan melakukannya sekarang. Ini adalah sebuah plugin sederhana yang melekat pada browser Anda.

Aku akan hanya hidangan keluar file CSS selesai sekarang, maka kami akan memecahnya langkah demi langkah. Aku akan menandai setiap baris utama yang diedit dengan "/ * = NEW = * /" Catatan:

Melihat lebih dekat, Anda akan melihat bahwa semua perubahan (dengan catatan '/ * = BARU = * /') masuk ke dalam kategori dasar yang sama:

  • Lebar
  • Tinggi
  • Posisi (kiri, kanan, atas, bawah)

Pengecualian hanya dua adalah mana kita telah ditambahkan warna latar belakang dan membulat sudut untuk elemen ".nivo-controlNav" dan mana kita telah disesuaikan standar posisi ".nivo-directionNav" elemen (kedua ini satu sebelumnya ditetapkan oleh orang lain stylesheet, jadi kita override pengaturan default 45% jadi kami dengan Panah, lebih tinggi pada slider).

Aturan baru lain bahwa kami telah menambahkan "a.nivo-prevNav:hover {kiri:-41px;}" aturan untuk tombol kiri dan kanan. Tujuan di sini adalah untuk menambahkan sentuhan halus untuk masing-masing tombol ketika Anda mengarahkan mouse di atas mereka.

Jika Anda berencana untuk membuat versi Anda sendiri diubah ukurannya slider, Anda akan ingin untuk memperhatikan dua tempat yang mana keseluruhan tinggi dan lebar slider ditetapkan. Singkatnya, unsur-unsur "#slider-pembungkus" dan "#slider" adalah apa kontrol ini - hanya menyesuaikan tinggi dan lebar parameter untuk mencocokkan dimensi slider Anda sendiri dan Anda harus baik untuk pergi.


Langkah Terakhir - Membuka Panah Kiri / Kanan

Modifikasi terakhir bahwa saya telah memutuskan untuk membuat dari file demo.html asli adalah untuk unhide tombol panah. Secara default, Slide Nivo menyembunyikan kontrol navigasi 'terarah' ini - hanya memperlihatkannya ketika mouse Anda berada di atas slider. Namun bagi kita, elemen-elemen ini adalah estetika utama yang tidak ingin kita sembunyikan.

Untuk memperbaiki ini, Nivo Slider memberikan kita sebuah metode sederhana dari unhiding dengan menambahkan pilihan yang satu ke script aktivasi. Di bagian bawah file demo.html, menemukan berikut:

Sekarang cukup tambahkan opsi berikut:

Sehingga kode yang direvisi terlihat seperti ini:


Kesimpulan

That's it untuk tutorial ini! Sementara kita belum dikodekan satu hal dari awal, kami telah efektif dibuat kustom slider dan kemudian menyadari itu dalam kode menggunakan salah satu terbaik pra-dibangun slider script luar sana di Internet sekarang. Saya harap Anda sudah memilih atas beberapa keterampilan baru dalam walkthrough ini - bersenang-senang mengubah ini dan menggunakannya dalam desain Anda sendiri!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.