Disinfeksi
Membuat slider menggunakan Bootstrap. Cara membuat slider bootstrap Anda sendiri dalam beberapa langkah mudah Korsel responsif untuk bootstrap 3

Membuat slider menggunakan Bootstrap. Cara membuat slider bootstrap Anda sendiri dalam beberapa langkah mudah Korsel responsif untuk bootstrap 3

Twitter Bootstrap 3 adalah salah satu kerangka kerja CSS terbaik untuk mengembangkan dan memelihara sistem manajemen konten. Dengan Bootstrap, Anda dapat dengan mudah membuat blog atau portofolio menggunakan sistem grid Bootstrap Twitter (grid layout). Di jantung banyak sistem CMS, kami biasanya memiliki komponen dasar yang disebut "Slider" (Carousel), pada dasarnya ini adalah tampilan gambar yang berurutan secara otomatis, tetapi juga dapat menampilkan proyek terbaru yang diselesaikan, testimonial dari pelanggan Anda, deskripsi khusus penawaran, tautan ke berita atau artikel terbaru dari blog. Pada artikel ini, kita akan melihat cara membuat slider menggunakan komponen Carousel di Twitter Bootstrap 3.

Pengantar Komponen Twitter Carousel Bootstrap 3

Markup untuk komponen carousel terlihat seperti ini:

>
>

...
>
>
...
>

>
>

>
>
>

Dari kode di atas, kita dapat melihat bahwa slider Bootstrap 3 terbagi menjadi beberapa bagian:

Petunjuk
Konten penggeser
Kontrol

Untuk mengubah elemen div di penggeser, kami menambahkan nama kelas: korsel dan menggeser. Kelas korsel menciptakan efek "korsel", yaitu, mengubah slide dalam lingkaran. Kelas menggeser menambahkan animasi geser dari sisi kanan atau kiri. Pointer adalah lingkaran kecil di bagian bawah slider, mereka menunjukkan posisi slide saat ini dan jumlah slide. Pointer dibuat menggunakan daftar yang diurutkan.

>
>

Daftar yang dipesan memiliki kelas indikator korsel, yang mengubah elemen anak menjadi lingkaran kecil. Setiap elemen li harus memiliki atribut sasaran data dengan ID wadah induk. Itu juga harus memiliki atribut data-slide-to dengan nilai numerik yang unik, untuk merujuk ke slide tertentu, nilainya harus dimulai dengan "0".

...
>
>
...
>

Setiap elemen dengan kelas barang memiliki dua subbagian: gambar dan korsel-keterangan. Gambar digunakan sebagai latar belakang slide. Elemen dengan kelas korsel-keterangan diposisikan di atas gambar, dan digunakan sebagai judul slide. Dalam korsel-keterangan, kita dapat menambahkan

atau tag, atau bahkan keduanya.

Kontrol dilakukan oleh panah kiri dan kanan, mereka digunakan untuk mengubah slide secara manual.

"glyphicon glyphicon-chevron-kiri"> >
>

"glyphicon glyphicon-chevron-kanan"> >
>
>

Harus ada dua elemen: satu untuk setiap arah. Elemen pertama akan memiliki menjangkau elemen dengan kelas glyphicon glyphicon-chevron-kiri, yang merupakan ikon panah kiri dan elemen kedua akan memiliki kelas glyphicon glyphicon-chevron-kanan, itu panah kanan. Di Bootstrap, kita dapat menggunakan font sebagai ganti gambar untuk menampilkan ikon.

Itu saja! Anda telah berhasil membuat slider untuk situs web Anda. Juga, Anda tidak menulis satu baris kode JavaScript, tetapi bootstrap.js melakukan segalanya untuk Anda.

pengaturan korsel

Untuk lebih menyesuaikan penggeser, Anda dapat menambahkan beberapa atribut data-* untuk wadah induk carousel.

"interval data" digunakan untuk menentukan interval waktu antara beralih slide. Dibutuhkan nilai numerik, dan jumlahnya harus dalam milidetik.
"jeda data" digunakan untuk menentukan kapan acara jeda akan diaktifkan. Misalnya, saat itu sama dengan " melayang-layang", perpindahan geser berhenti saat mouse berada di atas penggeser.
"bungkus data" adalah atribut boolean dan memungkinkan Anda menyetel apakah akan melanjutkan beralih slide jika akhir daftar slide tercapai.

Kustomisasi dengan jQuery

Jika Anda ingin menggunakan atribut jQuery dan data-*, Bootstrap memungkinkan inisialisasi dengan JavaScript. Untuk melakukan ini, Anda dapat menulis kode berikut:

$(".carousel" ) .carousel() ;

Pengaturan carousel dapat diatur menggunakan opsi. Sebagai contoh:

$(".korsel")
selang waktu: 2000
jeda: "arahkan",
bungkus: benar
} ) ;

Anda juga dapat memicu peristiwa penggeser secara manual menggunakan kode berikut:

.carousel("jeda") // jeda
.carousel("cycle") // aktifkan slide
.carousel(3) // tampilkan slide keempat
.carousel("prev") // tampilkan slide sebelumnya
.carousel("berikutnya") // tampilkan slide berikutnya

Metode di atas dapat dipanggil dari kode JavaScript apa pun untuk mengontrol operasi normal penggeser. Saya menemukan metode sebelumnya dan selanjutnya sangat berguna jika saya ingin menampilkan tombol saya sendiri alih-alih panah standar. Terutama ketika mereka berada di luar tata letak carousel.

Kesimpulan

Artikel ini akan bermanfaat bagi mereka yang ingin mempelajari cara membuat slider tanpa menulis ribuan baris kode JavaScript. Tanpa ragu, ini akan meningkatkan kecepatan pembangunan. Yang paling penting, solusi ini adalah lintas-browser, jadi Anda tidak perlu merobek rambut Anda untuk membuatnya bekerja di browser lama.

Jika Anda memiliki pertanyaan, silakan gunakan kami

Komponen peragaan slide untuk elemen bersepeda - korsel gambar atau slide teks.

Bagaimana itu bekerja

Carousel adalah slideshow untuk menampilkan serangkaian konten berdasarkan transformasi 3D CSS dan beberapa JS. Ia bekerja dengan teks, gambar, atau markup biasa. Ini juga mendukung tombol berikutnya/sebelumnya.

Contoh

Korsel tidak secara otomatis menormalkan ukuran konten slide. Oleh karena itu, Anda mungkin memerlukan utilitas tambahan untuk membuat konten mereka dalam ukuran yang tepat. Selama carousel mendukung tombol prev/next, mereka tidak perlu ditambahkan secara eksplisit. Tambahkan dan sesuaikan sendiri.

Berikan id unik ke kelas .carousel untuk fleksibilitas, terutama jika Anda menggunakan banyak carousel pada sebuah halaman.

Hanya slide

Berikut adalah contoh carousel dengan slide saja. Perhatikan keberadaan kelas .d-block dan .img-fluid di gambar carousel - tujuannya adalah untuk mencegah browser melakukan penyelarasan gambar secara default.

Dengan kontrol

Menambahkan tombol sebelumnya/berikutnya:

Dengan indikator

Anda juga dapat menambahkan indikator ke carousel bersama dengan kontrol.

Membutuhkan elemen aktif awal

Kelas .active harus ditambahkan ke salah satu slide, jika tidak, carousel tidak akan terlihat.

Dengan tulisan

Tambahkan teks ke slide Anda dengan menambahkan elemen kelas .carousel-caption ke setiap elemen carousel dari kelas .carousel-item. Label mudah disembunyikan di perangkat yang lebih kecil menggunakan utilitas tampilan. Mereka awalnya disembunyikan dengan kelas .d-none dan menampilkannya lagi di perangkat menengah dengan kelas blok .d-md.

Label slide pertama

Nulla vitae elit libero, sebuah pharetra augue mollis interdum.

Label slide kedua

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

Label slide ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

"carousel-caption d-none d-md-block">

...

Penggunaan

Melalui atribut

Atribut data-slide mengambil nilai prev atau next , yang mengubah posisi slide relatif terhadap posisinya saat ini. Atau gunakan data-slide-to untuk menavigasi ke slide pada indeks, seperti 2: data-slide-to="2" , indeks slide dimulai dari 0 .

Atribut data-ride="carousel" digunakan untuk membuat animasi carousel. Itu tidak dapat digabungkan dengan inisialisasi carousel eksplisit melalui JavaScript.

Melalui JavaScript

Panggil carousel secara manual:

$(".korsel"). korsel()

Pilihan

Parameter dapat diteruskan melalui atribut atau JavaScript. Untuk menggunakan atribut, tambahkan nama parameter ke data- , misalnya: data-interval="" .

Nama	Jenis	Secara default	Keterangan
selang	nomor	5000	Waktu tunda antara perubahan slide otomatis. Jika salah, korsel tidak akan secara otomatis mengubah slide.
papan ketik	boolean	BENAR	Apakah carousel akan merespons peristiwa keyboard.
berhenti sebentar	string \| boolean	melayang-layang	Jika "hover" diatur, perubahan slide diperlambat oleh mouseenter , dan perubahan dimulai dengan mouseleave. Jika salah, mengarahkan kursor ke korsel tidak akan menghentikan perubahan slide. Perangkat yang diaktifkan dengan sentuhan: "arahkan" - jeda di ujung sentuh (saat pengguna selesai berinteraksi dengan korsel) selama dua interval, lalu ubah slide lagi. Perhatikan bahwa perilaku ini merupakan tambahan dari perilaku mouse yang dijelaskan di atas.
mengendarai	garis	Salah	Ubah slide carousel secara otomatis setelah perubahan slide manual pertama oleh pengguna. Jika carousel - autochange diaktifkan setelah memuat.
membungkus	boolean	BENAR	Apakah korsel harus berubah dengan lancar atau tidak.

Metode

Metode dan Transisi Asinkron

Semua Metode API asinkron dan luncurkan transisi. Mereka dikembalikan ke fungsi yang memanggil mereka ketika transisi dimulai, tapi sampai akhir. Plus, memanggil metode pada komponen, mengeksekusi transisi akan diabaikan.

.carousel(opsi)

Menginisialisasi objek carousel dengan opsi yang ditentukan dan memulai transisi slide.

$(".korsel"). korsel (( interval : 2000 ))

.carousel("siklus")

Mengubah slide carousel dari kiri ke kanan.

.carousel("jeda")

Menghentikan transisi slide.

.carousel(angka)

Gulungan meluncur ke titik tertentu (berbasis 0, mirip dengan baris).

.carousel("sebelumnya")

Menggulir ke slide sebelumnya. Mengembalikan nilai pemanggilan fungsi sebelum elemen "target" ditampilkan(yaitu sebelum acara slid.bs.carousel diaktifkan).

.carousel("berikutnya")

Ke slide berikutnya. Mengembalikan nilai pemanggilan fungsi sebelum elemen "target" ditampilkan(yaitu sebelum acara slid.bs.carousel diaktifkan).

.carousel("membuang")

Menghancurkan korsel item.

Perkembangan

Korsel di Bootstrap memiliki 2 acara untuk menerapkan fungsionalitas. Kedua acara memiliki properti tambahan berikut:

arah: Arah gerakan slide ("kiri" atau "kanan").
relatedTarget: Elemen DOM yang bergerak ke posisi slide "dijentikkan".
dari: Indeks slide saat ini
ke: Indeks slide berikutnya

Semua peristiwa carousel dipicu langsung pada carousel (yaitu di

$("#myCarousel" ). pada ("slide.bs.carousel" , function () ( // melakukan sesuatu… ))

Hari baik untuk semua orang yang ingin mempelajari sesuatu yang baru dari elemen kerangka Bootstrap. Topik hari ini adalah slider Bootstrap Carousel. Ini adalah elemen populer yang ada di hampir setiap situs web.

Oleh karena itu, saya akan memberi tahu Anda cara membuat slider Carousel, alat bawaan apa yang diperlukan untuk ini, bagaimana Anda dapat mengonfigurasi parameter, dan di akhir artikel saya akan menunjukkan implementasi contoh spesifik. Dan sekarang turun ke bisnis!

Semua Tentang Alat Plugin Carousel Bootstrap

Galeri foto carousel digunakan untuk menyajikan penawaran baru, produk, daftar promosi saat ini, tampilan portofolio yang nyaman, dll. Oleh karena itu, hari ini penting untuk dapat bekerja dengan plugin ini di bawah nama resmi Plugin Korsel Bootstrap.

Perlu segera dicatat bahwa elemen yang dijelaskan tidak didukung dengan benar di Internet Explorer 9 dan versi sebelumnya. Namun, ini berfungsi dengan baik di (untuk WordPress, Joomla! dan mesin lainnya, menghubungkan kerangka kerja cukup sederhana).

Agar mudah beroperasi dengan semua parameter dan menyesuaikan slider dengan cepat, Anda perlu mempelajari kelas bawaan utama Bootstrap 3.

Kelas	tujuan
korsel	Membuat slider Carousel itu sendiri.
menggeser	Menambahkan dengan css efek animasi dan transisi saat beralih antar slide. Kelas adalah opsional.
indikator korsel	Menambahkan, bisa dikatakan, panel kontrol dalam bentuk titik-titik kecil di bagian bawah setiap gambar, yang dengannya Anda dapat dengan cepat beralih ke gambar apa pun. Kelas adalah opsional.
korsel-dalam	Menambahkan slide itu sendiri ke galeri.
korsel-keterangan	Bertanggung jawab untuk menandatangani file grafik. Bisa dimasukkan sesuai keinginan.
barang	Mendefinisikan satu set konten untuk setiap slide.
Kontrol korsel kanan/kiri	Menambahkan tombol kanan dan kiri sesuai dengan namanya untuk beralih antar bingkai.

Selain itu, ada baiknya mengetahui fitur lain dari tata letak galeri tersebut.

Sebagai permulaan, membuat blok Carousel itu sendiri membutuhkan deklarasi id="myCarousel" untuk fungsi yang benar dari yang terakhir.

Di div yang sama, Anda perlu mendaftarkan atribut data-ride="korsel", yang menentukan bahwa animasi harus dimuat segera setelah halaman dimuat.

Sekarang mari kita beralih ke indikator. Setiap tag li harus memiliki beberapa atribut: sasaran data, yang menunjuk ke ID Carousel tertentu, dan data-slide-to, yang menentukan nomor bingkai yang akan dituju.

Adapun tombol yang mengubah gambar maju atau mundur, untuk menerapkannya, ada baiknya mendaftarkan atribut data-slide dengan kata kunci "sebelumnya" atau "berikutnya".

Sekarang Anda tahu tentang elemen dasar kerangka kerja, berkat itu Anda dapat mengedit tampilan slider dengan cara tertentu. Secara alami, Anda dapat menonaktifkan pengguliran bingkai otomatis, keterangan gambar, atau tombol samping.

Mekanisme kontrol alternatif

Selain menggunakan kelas bawaan Bootstrap, Anda juga dapat melihat ke . Jadi, ada banyak metode dan opsi di JS yang menerapkan semua tindakan yang sama, hanya melalui alat $.carousel(). Diantaranya dapat dicantumkan seperti:

tes pengetahuan

Nah, sekarang saatnya untuk memeriksa bagaimana Anda mempelajari materi dan mengkonsolidasikan pengetahuan yang diperoleh. Untuk melakukan ini, saya akan menjelaskan setiap tindakan yang perlu Anda lakukan untuk membuat "Carousel".

Pertama, Anda perlu menyertakan skrip dan gaya yang diperlukan. Saya lebih suka , tetapi Anda dapat mengunduh kerangka kerja dari situs web resmi ( http://getbootstrap.com/) dan tempatkan file yang diunduh di root direktori proyek.

Jika Anda setuju dengan saya, maka di tajuk dokumen kami menulis:

1 2 3

Jika Anda adalah pendukung metode kedua, maka alih-alih bagian pertama dari tautan, Anda harus memasukkan jalur ke file.

Sekarang tinggal mengimplementasikannya di slider. Untuk melakukan ini, gunakan pengetahuan yang Anda peroleh dan tulis potongan kode yang diperlukan secara berurutan:

membuka blok umum yang bertanggung jawab atas instrumen yang dijelaskan;
blok untuk menentukan indikator kontrol;
blok untuk slide itu sendiri;
implementasi tombol samping.

Hanya div kedua dan terakhir yang dapat dikecualikan dari daftar ini.

Sekarang Anda pasti siap untuk menulis kode.

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

Contoh galeri carousel

/*Buat blok utama*/

/*Mengisi slide*/

Contoh galeri carousel

/*Buat blok utama*/

/*Tunjukkan 4 indikator sesuai dengan jumlah gambar*/ /*Isi slide*/ /*Buat tombol kontrol samping*/

Sebuah komponen slideshow untuk iterasi melalui elemen gambar atau slide teks carousel. Di browser yang mendukung Page Visibility API , carousel akan menghindari perpindahan slide saat halaman web tidak terlihat oleh pengguna (misalnya, saat browser tidak aktif, jendela browser diminimalkan, dll.). Korsel bersarang tidak didukung.

Contoh

Animasi tidak didukung di Internet Explorer 9

Bootstrap secara eksklusif menggunakan CSS3 untuk animasi, tetapi Internet Explorer 9 tidak mendukung properti CSS yang diperlukan. Oleh karena itu, tidak ada animasi transisi slide saat menggunakan browser ini. Kami sengaja memilih untuk tidak menyertakan fallback berbasis jQuery untuk transisi.

Elemen aktif awal diperlukan

Kelas .active harus ditambahkan ke salah satu slide. Jika tidak, komidi putar tidak akan terlihat.

Judul tambahan

Tambahkan teks dengan mudah ke slide Anda dengan elemen .carousel-caption di .carousel-item apa pun. Tempatkan HTML ekstra di sana dan itu akan secara otomatis menyelaraskan dan memformat.

label slide pertama

Nulla vitae elit libero, sebuah pharetra augue mollis interdum.

label slide kedua

Lorem ipsum dolor sit amet, conectetur adipiscing elit.

label slide ketiga

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

...

Masalah aksesibilitas

Komponen carousel sama sekali tidak memenuhi standar aksesibilitas. Jika Anda membutuhkan kompatibilitas, harap pertimbangkan cara lain untuk menyajikan Konten Anda.

Penggunaan

Beberapa korsel

Carousel memerlukan penggunaan id pada wadah terluar (dalam .carousel) untuk mengelola carousel agar berfungsi dengan baik. Saat menambahkan beberapa korsel, atau saat mengubah id korsel , pastikan untuk memperbarui kontrol yang sesuai.

Dengan atribut ini

Dengan menggunakan atribut data, mudah untuk mengontrol posisi carousel. data-slide dapat diminta oleh prev atau next , yang mengubah posisi slider relatif terhadap posisinya saat ini. Atau, gunakan data-slide-to untuk meneruskan indeks slide carousel mentah ke data-slide-to="2" , yang mengimbangi posisi slide dengan definisi indeks mulai dari 0 .

Atribut data-ride="carousel" digunakan untuk menunjuk carousel sebagai animasi mulai dari pemuatan halaman. Itu tidak dapat digunakan bersama dengan inisialisasi JavaScript eksplisit (yang tidak perlu) dari korsel yang sama.