Banyak orang di situs mereka sendiri ingin melihat bilah geser - ini adalah blok yang menampilkan satu elemen konten di layar, dan setelah jangka waktu tertentu mengubah konten ini ke konten lainnya. Secara alami, setiap pengembang web dapat secara mandiri membuat bilah geser menggunakan HTML, CSS, dan JavaScript, tetapi ini tidak selalu masuk akal. Anda akan menghabiskan cukup banyak waktu, terlepas dari kenyataan bahwa ada beberapa solusi siap pakai di Internet yang membuat hidup Anda lebih mudah dan membuat situs Anda jauh lebih menarik. Artikel ini akan fokus pada salah satu solusi yang disebut Owl Carousel. Menyiapkan penggeser ini sangat sederhana, sehingga bahkan seorang pemula pun dapat menanganinya. Sekarang Anda akan mempelajari apa itu slider, serta detail penting lainnya. Menyiapkan Owl Carousel adalah proses langkah demi langkah, jadi Anda harus mempelajari materi ini secara berurutan.
Apa itu dan mengapa Anda harus memilih slider khusus ini?
Owl Carousel, konfigurasi yang akan dibahas dalam artikel ini, adalah plugin yang sangat efektif yang menambahkan slider yang indah dan nyaman ke halaman Anda, yang akan sangat memudahkan pekerjaan Anda di situs,menghemat banyak waktu, tenaga dan uang. Apa keuntungan dari plugin khusus ini, karena ada cukup banyak slider di Web? Faktanya adalah bahwa penggeser ini menawarkan lusinan opsi penyesuaian, yang memungkinkan Anda menjadikan halaman Anda unik dan tak ada bandingannya. Ini adalah plugin responsif yang akan bekerja pada semua versi browser dan dapat dengan mudah terhubung ke WordPress dan CMS populer lainnya. Secara umum, slider ini memiliki banyak keunggulan, jadi Anda harus membuat pilihan yang menguntungkannya. Namun, sebelum Anda mulai mengatur Owl Carousel, plugin ini masih perlu dimuat.
Unduh
Menyiapkan Owl Carousel 2 tidak dimungkinkan jika Anda belum mengunduhnya ke komputer Anda, dan karena ini adalah petunjuk langkah demi langkah, Anda harus mulai dari awal. Jadi, program dapat diunduh menggunakan manajer paket, tetapi ini adalah alat pengembang tingkat lanjut, jadi di sini kami akan memberi tahu Anda cara mendapatkan plugin ini dengan cara standar. Anda harus pergi ke situs resmi plugin dan mengunduh versi terbarunya. Setelah itu, semua file yang diunduh harus ditransfer ke direktori situs Anda, setelah menyiapkan folder yang nyaman, yang namanya sama dengan plugin itu sendiri. Perhatikan bahwa plugin ini dibundel dengan jQuery, jadi Anda harus memiliki perpustakaan itu juga. Nah, setelah Anda mengunduh plugin ini, Anda harus melakukan langkah selanjutnya yaitu menyiapkan slider Owl Carousel 2.
CSS
BPengaturan Owl Carousel 1.3 tetap hampir sama seperti di versi 2 yang lebih baru, hanya fitur baru yang ditambahkan. Namun, informasi dasarnya akan sama, dimulai dengan menambahkan CSS ke dokumen Anda. Jadi langkah pertama adalah menambahkan baris. Apa yang dia berikan padamu? Ini adalah string yang memuat gaya yang diperlukan ke situs untuk menampilkan bilah geser. Di sinilah Anda dapat menyelesaikan dengan melakukan pemrosesan visual sendiri. Namun, ada solusi yang lebih nyaman dan lebih cepat. Anda juga dapat menambahkan baris yang juga memuat tema default penggeser, membuatnya langsung siap digunakan. Anda dapat mengedit beberapa gaya untuk membuat slider Anda lebih unik dan berbeda, dan lebih cocok untuk konten Anda. Secara alami, pengaturan Owl Carousel dalam bahasa Rusia akan sangat nyaman, tetapi setiap orang yang membuat situs web harus memahami bahwa ia tidak dapat melakukannya tanpa pengetahuan bahasa Inggris.
Koneksi JavaSpript
Tentu saja, penggeser tidak akan berfungsi tanpa JS, jadi Anda juga harus berhati-hati untuk memasukkan file yang sesuai yang berisi kode yang diperlukan. Untuk melakukan ini, Anda perlu memasukkan sebaris kode dari dokumentasi, namun, satu syarat harus dipenuhi. Semua orang tahu bahwa JS adalah bahasa pemrograman yang mengeksekusi semua perintah secara berurutan, jadi dalam hal ini Anda harus menambahkan baris kode ini setelah baris yang menambahkan library jQuery ke dokumen Anda. Lebih banyak dengan JS dalam kasus slider ini, Anda tidak ada hubungannyaperlu.
Pengkodean HTML
Nah, Anda telah menghubungkan penggeser, sekarang saatnya untuk mendesain dan menyesuaikannya. Pertama-tama, Anda perlu menulis kode HTML agar slider muncul di halaman Anda sama sekali. Untuk melakukan ini, Anda perlu membuat wadah yang akan berisi slide. Ini dapat dilakukan dengan menggunakan tag div, yang perlu ditetapkan ke kelas owl-carousel. Kelas inilah yang memastikan bahwa semua gaya yang terkait dengan penggeser akan diaktifkan. Anda juga dapat menulis kelas lain - tema burung hantu. Ini akan berguna jika Anda memutuskan untuk menggunakan desain default atau menggunakan versi standar dari penggeser sebagai dasar untuk pekerjaan lebih lanjut.
Kemudian Anda perlu menambahkan setiap slide dalam wadah terpisah dengan tag div. Tentu saja, Anda dapat menggunakan tag lain, tetapi tag ini adalah yang terbaik untuk slider.
Plugin panggilan
Dan hal terakhir yang perlu Anda lakukan untuk memiliki slider siap pakai di situs Anda adalah dengan menggunakan blok kode ini:
$(dokumen).siap(fungsi(){
$(".owl-carousel").owlCarousel();
});
Ini memastikan bahwa penggeser mulai berfungsi, yaitu menggulir konten, saat halaman Anda dimuat. Dengan kode yang sama, Anda dapat menghubungkan Owl Carousel ke WordPress. Pengaturan plugin ini banyak dan beragam, dan sekarang Anda akan belajar tentang poin-poin utama.
Mengatur tampilan dan fungsionalitas bilah geser
Jadi, perintah apa yang dapat Anda gunakan untuk menyesuaikan slider Anda? Pertama-tama, Anda perlu mengingat perintah item, karena dengannya Anda dapat mengatur jumlah slide tertentu di slider Anda. Perintah loop akan memungkinkan Anda untuk memilih apakah akan mengulang slider atau berhenti menggulir pada elemen terakhir. Ada juga perintah Drag, yang memiliki beberapa opsi, seperti mouse dan sentuh. Dalam kasus pertama, Anda dapat membuatnya sehingga elemen penggeser Anda dapat digesek dengan mouse ditekan, dan dalam kasus kedua, dengan bantuan sentuhan (perintah ini cocok untuk perangkat seluler). Perintah penting lainnya adalah nav, yang memungkinkan tampilan panah navigasi. Bersamaan dengan itu, Anda dapat menggunakan perintah navText untuk menambahkan label ke tombol navigasi. Juga, Anda tidak boleh melupakan perintah putar otomatis, yang memungkinkan Anda untuk mengaktifkan dan menonaktifkan awal otomatis untuk memutar slide slider Anda saat halaman dimuat. Dengan perintah ini, Anda juga dapat menggunakan autoplayTimeout, di mana Anda dapat menetapkan nilai tertentu dalam milidetik, yang akan menentukan waktu antara pemutaran otomatis setiap slide.
Jika Anda menggunakan desain web responsif, yaitu, desain halaman Anda secara otomatis berubah tergantung pada perangkat yang melihatnya, maka Anda pasti perlu mengingat perintah responsif, yang memungkinkan Anda untuk mengatur jumlah slide untuk ditampilkan tergantung pada lebar layar halaman yang sedang dilihat.
