Suatu hari teman-teman saya memutuskan untuk memberi saya kejutan yang menyenangkan. Kejutannya sendiri sangat sederhana; dibutuhkan kaos yang sangat biasa tanpa desain apapun.

Dan kemudian mereka mengalami masalah - semua kaos di toko memiliki gambar. Mereka tidak dapat menemukan T-shirt paling sederhana tanpa gambar apa pun. Saya rasa Anda pernah mengalami masalah serupa ketika Anda tidak dapat menemukan hal yang paling sederhana.

Ceritanya sama dengan carousel; hampir semua carousel sudah memiliki desain. Dan Anda hampir selalu membutuhkan carousel yang bersih, yang kemudian dapat Anda desain sesuai keinginan desainer.

Oleh karena itu, agar dapat segera menikmati bekerja dengan carousel, dan membuatnya dengan cepat, saya sarankan Anda menggunakan plugin berikut.

Hal yang keren tentang plugin ini adalah tidak memiliki desain dan lebih mudah digunakan dibandingkan plugin cantik lainnya.

Itu dapat didekorasi sesuka Anda.

Jadi, inilah plugin ini: Owl Carousel.

1. Hubungkan jQuery jika belum terhubung, contohnya seperti ini

2. Salin file plugin ke folder situs

• Membongkar
• Salin folder burung hantu-carousel ke situs

3. Hubungkan file-file ini ke situs:

4. Tambahkan kode ke halaman

1 2 3 4 5 6 7 8 9 10 11 12 13 14

5. Luncurkan pluginnya

$(document).ready(function())( // Temukan blok carousel var carousel = $("#carousel"); // Luncurkan plugin carousel carousel.owlCarousel(); ));

6. Kami mengatur

/* Blok utama */ .owl-wrapper-outer ( batas: 1px solid #777; radius batas: 5px; luapan: tersembunyi; latar belakang: putih; ) /* 1 kotak carousel */ .carousel-element ( padding: 30px ; perataan teks: tengah; ukuran font: 300%; batas kanan: 1 piksel padat #777;

Dalam contoh ini, saya tidak akan menunjukkan metode tercepat, tetapi metode paling universal.

1. Tambahkan tombolnya sendiri

Mundur ke Depan

2. Melampirkan tombol ke plugin carousel

Setelah meluncurkan plugin, tambahkan kodenya

// Kembali // Saat Anda mengeklik "Kembali" $("#js-prev").click(function () ( // Mulai memutar ulang carousel.trigger("owl.prev"); return false; )); // Teruskan // Saat Anda mengklik "Teruskan" $("#js-next").click(function () ( // Mulai memutar ulang ke carousel.trigger("owl.next"); return false; ) );

Sekarang, ketika Anda mengklik "Kembali" dan "Maju", proses mundur akan dipicu.

Poin-poin inilah yang menunjukkan posisi kita saat ini.

Mereka dapat diaktifkan saat menjalankan plugin dengan menambahkan parameter berikutnya

// Luncurkan plugin carousel carousel.owlCarousel(( // Poin di bawah pagination carousel: true ));

/* Blokir dengan titik */ .owl-pagination ( text-align: center; /* Ratakan titik di tengah */ ) /* 1 Titik */ .owl-page ( lebar: 10 piksel; tinggi: 10 piksel; batas: 1px solid #777; tampilan: blok-sebaris; latar belakang: putih; radius batas: 5px) /* Titik aktif */ .owl-page.aktif ( latar belakang: #777; )

Ini cukup sering diperlukan, untuk ini kami menambahkan parameter berikut

// Luncurkan plugin carousel carousel.owlCarousel(( singleItem: true, // Tampilkan hanya 1 blok dengan lebar penuh ));

Sebuah fitur yang sangat berguna, memungkinkan Anda melakukannya korsel adaptif untuk perangkat seluler.

// Luncurkan plugin carousel carousel.owlCarousel(( // Jumlah blok yang ditampilkan // bergantung pada perangkat (lebar layar) // Jumlah blok per layar besar item: 10, // 5 blok pada komputer (layar dari 1400px hingga 901px) itemsDesktop: , // 3 blok pada komputer kecil (layar dari 900px hingga 601px) itemsDesktopSmall: , // 2 elemen pada tablet (layar dari 600 hingga 480 piksel ) itemsTablet: , // Pengaturan untuk ponsel dinonaktifkan, dalam hal ini // pengaturan tablet akan digunakan itemsMobile: false ));

Teman-teman datang ke pesta ulang tahunku, mereka tersenyum gembira, kegembiraan meluap-luap. Mereka dengan sungguh-sungguh memberi saya hadiah.

Aku membukanya dan melihat T-shirtnya. Aku sedang membukanya. Sial, sungguh bodoh. Saya melihat 3 foto diri saya di T-shirt ini. Saya memakai T-shirt dan semua orang mulai tertawa, ternyata bodoh dan lucu.

Akhir-akhir ini kami sedang mengerjakan situs yang menggunakan CMS, yang agak membatasi. Kita bisa menambahkan milik kita HTML khusus dan CSS ke situs, tetapi bukan JavaScript.

Proyek yang kami kerjakan memiliki carousel. Kami punya ide tentang bagaimana kami bisa membuat ini berfungsi menggunakan animasi CSS dan mengubah properti, tapi ini akan membuat carousel bergulir secara otomatis dan tidak mengizinkan masukan pengguna, yang bukan merupakan keinginan ibu. Setelah beberapa pemikiran, kami menemukan solusi yang menggunakan pemosisian absolut dan pemilih semu :target untuk mengubah indeks-z dan opacity carousel kami untuk digilir.

Ayo buat ini!

Struktur

Struktur carousel kita terlihat seperti ini: Kita memiliki div.carousel-wrapper utama yang memberikan ukuran pada carousel kita. Di dalam wrapper, kami memiliki elemen span.hidden-target dengan ID unik yang bertindak sebagai target untuk kontrol carousel dan elemen div.carousel-item yang berisi konten dari setiap kontrol carousel.

Masing-masing elemen div.carousel-item akan memiliki konten, dan dua link, a.arrow-prev dan a.arrow-next, yang kita gunakan untuk melakukan loop di antara elemen carousel.

Karena milik kita elemen individu carousel akan berada pada posisi: absolut (kita dapat menumpuknya di atas satu sama lain), kita harus mengatur ketinggian div.carousel-wrapper secara manual. Kami akan mencoba memindahkan CSS ke stylesheet eksternal kami, namun ada beberapa hal yang perlu kami tulis agar carousel kami dapat digunakan dan diskalakan.

Kami juga menggunakan CSS untuk mengatur gambar latar belakang dari dua elemen div.carousel-item untuk membuatnya lebih menonjol, namun kami akan membiarkannya di bawah agar markup kami lebih mudah dibaca.

Barang 1

Konten ada di sini.

Konten ada di sini.

Konten ada di sini.

Itu semua HTMLnya. Ternyata sangat ringan. Dalam CSS (SCSS, dalam hal ini), di sinilah keajaiban terjadi.

Gaya

Anda memiliki carousel yang berfungsi penuh dan 100% HTML dan CSS! Kami membuat carousel dengan tiga elemen, namun Anda dapat terus menambahkan elemen, pastikan Anda menambahkan lebih banyak elemen bertarget, dan menautkan tautan Anda dengan benar.

/* Di sinilah carousel kita dimulai, dengan pembungkus utama diposisikan secara relatif, sehingga item-item kita yang benar-benar diposisikan berada di tempat yang tepat. */ .carousel-wrapper ( position: relative; /* Item-item carousel kita yang benar-benar diposisikan menjangkau width dan height dari induknya. Kami membuatnya transparan secara default sehingga memudar saat kami menggilirnya menggunakan tautan panah. */ .carousel-item ( position: absolute; top: 0; bottom: 0; left : 0; kanan: 0; padding: 25px 50px; transisi: semua 0.5s ease-in-out; /* Apakah Anda memperhatikan 50px kiri, kanan padding Ini agar kita dapat memposisikan panah kita? lebarnya 50 piksel. Selain itu, saya menggunakan tautan kosong dengan gambar latar belakang sehingga tautannya terlihat seperti panah. Pastikan Anda menukar URL tersebut dengan URL sebenarnya sehingga tautan panah Anda tidak hanya berbentuk persegi panjang transparan. panah ( posisi: absolut; atas: 0; tampilan: blok; lebar: 50 piksel; tinggi: 100%; -webkit-tap-highlight-color: rgba(0,0,0,0); Selain itu, kami menyetel indeks z-nya ke 2, sehingga posisinya di atas item carousel lainnya. */ .item-1 ( z-index: 2; opacity: 1; ) /* Tapi kami tidak ingin item pertama yang ALAWYS menjadi opacity: 1; jika tidak, item tersebut akan mengintip saat berpindah di antara item dua dan di atasnya. * / *:target ~ .item-1 ( opacity: 0; ) /* ...tetapi jika #target-item-1 ditargetkan, kami ingin item pertama muncul, jadi kami memilihnya dengan ~ pemilih saudara dan atur opacitynya menjadi 1 lagi:-) */ #target-item-1:target ~ .item-1 ( opacity: 1; ) /* Jika ada target-item-# lainnya yang ditargetkan, ayo pilih menggunakan pemilih saudara, buat memudar, dan letakkan di atas tumpukan menggunakan indeks-z: 3. Di sinilah Anda akan menambahkan lebih banyak item target jika carousel Anda memiliki lebih dari tiga item. layak ditambahkan seperti 10 item langsung. */ #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 ( z-index: 3; opacity: 1; ) )

Konversi tinggi untuk Anda!

Blokir dengan menggulirkan pengumuman berita. Gunakan panah kiri/kanan untuk menelusuri blok. Di arsip ada carousel menjadi dua gaya: terang dan gelap.

Korsel gambar yang rapi dan segar di jQuery.

Penggeser konten yang bagus dalam bentuk carousel gambar menggunakan jQuery. Halaman demo menjelaskan cara melampirkan carousel ini ke situs Anda.

Plugin "Slider Kit", carousel ringan dengan dalam berbagai cara menggulir.

Navigasi asli antar thumbnail gambar. Untuk melihat efeknya di sisi kanan halaman demo, klik tombol Atas dan Bawah. Solusi jQuery ini juga memberikan efek hover pada thumbnail dan scrolling dengan roda mouse.

plugin jQuery "Penomoran Halaman Mudah". Setiap blok persegi panjang mewakili item daftar li biasa, dan jika ada lebih dari tiga item, maka untuk melihatnya semua Anda perlu menggunakan navigasi seperti penggeser (menggunakan panah "maju", "mundur" dan menggunakan tombol navigasi di dasar).

Rotator vertikal di jQuery: pengguliran otomatis konten di halaman. Tombol navigasi disediakan, serta kemampuan untuk menghentikan rotasi dan memulainya kembali. Saat Anda mengarahkan kursor mouse, gerakannya berhenti. Pada tingkat HTML Dalam markup, blok gulir diwakili oleh item daftar li biasa.

solusi javascript "TinyScroller" untuk membuat area gulir yang ditempatkan dalam wadah DIV.

Plugin untuk implementasi gulir horizontal konten di area tertentu. Saat Anda mengarahkan mouse ke tepi kiri atau kanan area tersebut, pengguliran dimulai.

Navigasi antar slide konten dapat dilakukan dengan menggunakan panah atau dengan mengklik thumbnail. Di bagian bawah terdapat tombol “Tampilkan” yang memungkinkan Anda menyembunyikan/menampilkan thumbnail atau deskripsi lengkap menggeser.

Blok dengan penggulung yang muncul saat Anda mengarahkan kursor. Anda dapat menggulir konten menggunakan bilah gulir atau roda mouse.

Solusi jQuery ini terinspirasi oleh efek serupa di situs web Apple. Pengembang perusahaan ini selalu menemukan solusi menarik yang menginspirasi webmaster dari seluruh dunia. Untuk mendemonstrasikan plugin, pilih kategori dari daftar.

Slider dibuat secara otomatis. Data nama produk, deskripsi, link dan alamat gambar diambil dari file slider.db.txt. Teknologi yang digunakan: CSS, PHP, jQuery.

Untuk melihat efek rotasi blok, klik salah satu persegi panjang kecil di halaman demo

Plugin pengguliran konten, misalnya, dapat digunakan untuk menampilkan berita terkini atau menampilkan pamflet Twitter di situs web.

Rotasi otomatis konten blok. Teknologi yang digunakan: PHP, XML, CSS, jQuery.

Plugin ini mengubah item daftar (ul li) menjadi elemen jQuery komidi putar.

Sangat mudah untuk menelusuri gambar menggunakan roda mouse.

Blok kompak dengan pengumuman bahan terbaru di situs web atau berita. Kolom kiri menampilkan daftar pengumuman singkat berita terbaru yang diberi nomor halaman. Bila Anda memilih salah satunya, lebih dari satu akan ditampilkan di kolom kanan deskripsi rinci dan tautan untuk membaca teks lengkap publikasi tersebut. Diimplementasikan menggunakan jQuery.

Gambar dengan tautan digulir, saat Anda mengarahkan mouse, pengguliran berhenti dan bilah navigasi muncul. Saat Anda mengarahkan mouse ke atas gambar, namanya juga ditampilkan di antara tombol kontrol. Terlihat sangat bagus di halaman

Pengguliran dilakukan menggunakan bilah gulir dan roda mouse.

Saat saya mulai mempelajari topik ini, saya tidak memerlukan carousel 3D, tetapi saya lebih tertarik pada detail teknis penerapannya. Tentu saja, teknik utama yang digunakan adalah Modul Transformasi CSS Level 1, tetapi sekelompok teknologi pengembangan front-end lainnya juga akan diterapkan, menyentuh berbagai topik dalam CSS, Sass, dan JavaScript sisi klien.

Untuk mengilustrasikan pengaturan transformasi 3D CSS, saya akan menunjukkan versi komponen khusus CSS. Lalu saya akan menunjukkan cara memperbaikinya dengan JavaScript dengan mengembangkan skrip komponen sederhana.

Untuk tata letak, gambar di dalam komponen dibungkus dalam elemen yang menyediakan kerangka dasar:

Ini akan menjadi landasan kami.

Sebelum melihat ke dalam CSS, mari kita lihat garis besar yang akan dikembangkan pada bagian berikut.

Ini elemen harus diatur dalam lingkaran yang digariskan oleh carousel. Lingkaran ini dapat didekati dengan poligon beraturan yang dibatasi dan gambar yang mengapitnya:

Jadi, jumlah sisi poligon tersebut sama dengan jumlah gambar di carousel:
Dengan tiga gambar, poligonnya adalah segitiga sama sisi;
Dengan empat gambar, bentuknya persegi;
Dengan lima segi lima; dan sebagainya:

Poligon tidak dapat ditentukan dan prosedur berikut tidak dapat diterapkan sebagaimana adanya. Bagaimanapun, case gambar tunggal tidak berguna; Kedua gambar tersebut lebih mungkin terjadi dan mungkin ditempatkan pada dua titik yang berlawanan secara diametris pada lingkaran. Untuk mempermudah, kasus khusus ini tidak ditangani dan diasumsikan minimal tiga gambar. Namun, modifikasi kode relatif tidak akan sulit.

Poligon referensi imajiner ini akan ditempatkan dalam ruang tiga dimensi yang tegak lurus terhadap bidang area pandang, dan pusatnya akan didorong kembali ke layar pada jarak yang sama dengan apotemanya, yaitu jarak sisi poligon dari pusatnya, seperti yang ditunjukkan pada Gambar 1. Ini adalah tampilan carousel dari atas ke bawah:

Jadi, sisi yang sedang menghadap pemirsa akan berada pada bidang layar pada z = 0, dan gambar depan, yang tidak terpengaruh oleh perspektif yang diperpendek, akan berada pada ukuran 2D normalnya. d Huruf pada gambar mewakili nilai properti perspektif CSS.

Di bagian ini saya akan menunjukkannya kepada Anda aturan utama CSS yang akan saya lalui langkah demi langkah.

Cuplikan kode berikut menggunakan beberapa variabel Sass untuk membuat komponen lebih dapat disesuaikan. Saya akan menggunakan $n untuk menunjukkan jumlah gambar di carousel dan $item-width untuk menunjukkan lebar gambar.

Elemen adalah jendela yang berisi gambar pertama dan elemen referensi di mana gambar lain akan diposisikan dan diubah.
Misalkan saja saat ini bahwa carousel hanya memiliki satu gambar untuk ditampilkan, saya bisa mulai dengan ukuran dan penyelarasan:

Korsel ( tampilan: fleksibel; arah fleksibel: kolom; penyelarasan item: tengah; > * ( fleksibel: 0 0 otomatis; ) .gambar ( lebar: $lebar item; gaya transformasi: pelestarian-3d; img ( lebar: 100%; &:tidak(:tipe pertama) ( tampilan: tidak ada /* Hanya untuk saat ini */ ) ) )

Elemen tersebut memiliki lebar tertentu dari elemen carousel, dan memiliki tinggi gambar yang sama (dapat memiliki berbagai ukuran, namun keduanya harus memiliki rasio aspek yang sama). Dengan cara ini ketinggian wadah carousel menyesuaikan dengan tinggi gambar. Selain itu, ia dipusatkan secara horizontal di wadah carousel.

Gambar pertama tidak memerlukan transformasi tambahan karena sudah berada pada posisi targetnya, yaitu bagian depan carousel.

Korsel dapat diputar dalam ruang 3D dengan menerapkan transformasi rotasi pada elemen. Rotasi ini harus berada di sekitar pusat poligon, jadi saya akan mengubah asal mula transformasi:

Gambar carousel ( transform-origin: 50% 50% (-$apothem); )

Nilai ini dinegasikan karena dalam CSS arah sumbu z positif berada di luar layar, menuju pemirsa. Tanda kurung diperlukan untuk menghindari kesalahan sintaksis Sass. Perhitungan poligon apotema akan dijelaskan nanti.

Dengan menerjemahkan kerangka acuan elemen, seluruh carousel dapat diputar dengan rotasi pada sumbu y (baru):

Gambar carousel ( transform:rotateY(/*beberapa jumlah di sini */rad); )

Saya akan kembali ke detail twist ini nanti.

Mari beralih ke transformasi untuk gambar lainnya. Pada penentuan posisi mutlak gambar dilipat ke dalam:

Gambar carousel img:not(:first-of-type) ( posisi: absolut; kiri: 0; atas: 0; )

Nilai indeks z ini diabaikan karena hanya merupakan langkah awal untuk transformasi berikut. Faktanya, setiap gambar kini dapat diputar sepanjang sumbu y carousel dengan sudut rotasi yang bergantung pada sisi poligon tempat gambar ditetapkan. Pertama, seperti yang dilakukan pada elemen, ia mengubah asal gambar default dengan memindahkannya ke tengah poligon:

Img:not(:tipe pertama) ( asal transformasi: 50% 50% (-$apothem); )

Gambar kemudian dapat diputar pada sumbu y barunya dengan jumlah yang diberikan oleh ($i - 1) * $theta radian, dengan $i adalah indeks (dimulai dari satu) gambar dan $theta = 2 * $PI / $n, $PI mewakili konstanta matematika pi. Oleh karena itu, gambar kedua akan diputar $theta oleh yang ketiga 2 * $theta , dan seterusnya, hingga gambar terakhir diputar ($n - 1) * $theta .

Penempatan relatif gambar ini akan dipertahankan selama rotasi carousel (yaitu rotasi di sekitar sumbu y yang dimodifikasi) karena sifat hierarki dari transformasi CSS bertingkat.

Jumlah rotasi setiap gambar ini dapat ditetapkan menggunakan direktif kontrol @for Sass:

Gambar carousel img ( @untuk $i dari 2 hingga $n ( &:nth-child(#($i)) ( transform: memutarY(#(($i - 1) * $theta)rad); ) ) )

Ini menggunakan konstruksi for...through daripada for...to karena alih-alih for...to nilai terakhir yang ditetapkan ke variabel indeks $i akan menjadi n-1 alih-alih n .

Perhatikan dua contoh sintaks interpolasi #() Sass. Dalam kasus pertama ini digunakan untuk pemilih index:nth-child();
Dalam kasus kedua, ini digunakan untuk mengatur nilai properti rotasi.

Perhitungan apotema poligon bergantung pada jumlah sisi dan lebar sisi, yaitu pada variabel $n dan $item-width.
Rumus:

$lebar gambar / (2 * tan($PI/$n))

Dimana tan() adalah fungsi trigonometri tangen.

Rumus ini dapat diturunkan dengan beberapa geometri dan trigonometri. Di sumber pena, rumus ini tidak diterapkan seperti yang tertulis karena fungsi tangen tidak tersedia di Sass, sehingga digunakan nilai solid. Rumusnya akan diterapkan sepenuhnya dalam demo JavaScript.

Pada tahap ini, gambar carousel “dijahit” secara berdampingan hingga membentuk bentuk poligonal yang diinginkan. Namun di sini semuanya sangat padat, dan sering kali dalam carousel 3D ada ruang di antara keduanya. Jarak ini meningkatkan persepsi ruang 3D karena memungkinkan Anda melihat gambar terbalik di bagian belakang carousel.

Anda dapat menambahkan jarak antar gambar lebih lanjut dengan memperkenalkan variabel konfigurasi lain $item-separation dan menggunakannya sebagai pengatur jarak horizontal untuk masing-masing gambar. elemen. Lebih tepatnya, mengambil setengah nilai ini untuk padding kiri dan kanan:

Gambar korsel gambar (padding: 0 $pemisahan item / 2; )

Gambar dibuat tembus cahaya dengan properti opacity untuk mengilustrasikan struktur carousel dengan lebih baik, dan tata letak yang fleksibel pada elemen akar carousel digunakan untuk pemusatan vertikal itu di jendela tampilan.

Untuk mempermudah pengujian rotasi carousel, saya akan menambahkan kontrol antarmuka pengguna untuk berpindah antar gambar. Lihat demo CodePen untuk HTML, CSS dan JavaScript yang menerapkan kontrol ini; Disini saya hanya akan menjelaskan kode yang berhubungan dengan rotasi.

Kami menggunakan currImage variabel integer yang menunjukkan gambar mana yang ada di depan carousel. Saat pengguna berinteraksi dengan tombol sebelumnya/berikutnya, variabel ini bertambah atau berkurang satu.

Setelah memperbarui currImage , rotasi carousel dilakukan dengan:

Gambar.style.transform = `rotateY($(currImage * -theta)rad)`;

(Di sini dan cuplikan berikut, literal templat ES6 digunakan untuk menginterpolasi ekspresi dalam string, silakan gunakan operator penggabungan "+" tradisional jika Anda mau)

Dimana theta sama dengan sebelumnya:

NumImages = angka.childElementCount; theta = 2 * Math.PI/numImages;

Rotasi terjadi -theta karena perpindahan ke item berikutnya memerlukan rotasi berlawanan arah jarum jam, dan nilai rotasi tersebut negatif dalam transformasi CSS.

Perhatikan bahwa nilai currImage ini tidak terbatas pada suatu rentang, namun dapat tumbuh tanpa batas, baik dalam arah positif maupun negatif. Faktanya, jika gambar di panel depan adalah yang terakhir (jadi currImage==n-1) dan pengguna mengklik tombol berikutnya Jika kita menyetel ulang currImage ke 0 untuk menuju ke gambar pertama carousel, akan ada transisi Sudut Rotasi dari (n-1)*theta ke 0, dan ini akan memutar carousel ke arah yang berlawanan di semua gambar sebelumnya. Masalah serupa dapat terjadi saat menekan tombol sebelumnya saat gambar pertama muncul.

Agar pilih-pilih, saya bahkan harus memeriksa potensi luapan currentImage karena tipe data Number tidak dapat mengambil nilai besar secara sewenang-wenang. Pemeriksaan ini tidak diterapkan dalam kode demo.

Melihat css dasar, yang merupakan dasar dari carousel, JavaScript kini dapat digunakan untuk menyempurnakan komponen dengan beberapa cara, seperti:

• Berapa pun jumlah gambarnya
• Gambar dengan persentase lebar
• Beberapa contoh carousel per halaman
• Konfigurasi per instans seperti ukuran celah dan visibilitas bagian belakang
• Konfigurasi menggunakan atribut data HTML5*

Pertama saya menghapus variabel dan aturan yang terkait dengan transformasi asal dan rotasi dari stylesheet, karena ini akan dilakukan menggunakan JavaScript:

$lebar item: 40%; // Sekarang kita bisa menggunakan persentase $item-separation: 0px; // Ini sekarang disetel dengan Js $viewer-distance: 500px; .carousel ( padding: 20px; perspektif: $viewer-distance; overflow: tersembunyi; tampilan: flex; flex-direction: kolom; align-items: center; > * ( flex: 0 0 auto; ) figure ( margin: 0; lebar: $lebar item; gaya transformasi: pelestarian-3d; transisi: transformasi 0,5 detik; img ( lebar: 100%; ukuran kotak: kotak batas; bantalan: 0 $pemisahan item / 2; &:tidak( :tipe pertama) ( posisi: absolut; kiri: 0; atas: 0; ) ) ) )

Fungsi carousel(root) ( // segera hadir... )

Argumen root mengacu pada elemen DOM yang berisi carousel.

Biasanya fungsi ini akan menjadi konstruktor untuk menghasilkan satu objek untuk setiap carousel di halaman, tapi saya tidak sedang menulis perpustakaan carousel di sini, jadi fungsi sederhana saja sudah cukup.

Untuk membuat beberapa komponen pada halaman yang sama, kode menunggu semua gambar dimuat dengan mendaftarkan pendengar pada objek window untuk acara load, dan kemudian memanggil carousel() pada setiap elemen dengan kelas carousel:

Window.addEventListener("load", () => ( var carousels = document.querySelectorAll(".carousel"); for (var i = 0; i< carousels.length; i++) { carousel(carousels[i]); } });

carousel() Melakukan tiga tugas utama:

• Pengaturan navigasi.
• Menyiapkan transformasi
• Daftarkan pemroses pengubahan ukuran jendela untuk mempertahankan masukan carousel sambil menyesuaikannya dengan ukuran area pandang yang baru

Sebelum melihat kode penyiapan konversi, saya akan melihat beberapa variabel utama dan cara mereka diinisialisasi berdasarkan konfigurasi instance:

Var gambar = root.querySelector("gambar"), gambar = gambar.anak, n = gambar.panjang, gap = root.dataset.gap || 0, bfc = "bfc" di root.dataset ;

Jumlah gambar (n) diinisialisasi berdasarkan jumlah anak elemen. Kesenjangan antar slide, diinisialisasi dari atribut kesenjangan data HTML5, jika disetel. Bendera visibilitas bagian belakang (bfc) dibaca menggunakan API kumpulan data HTML5. Ini nantinya akan digunakan untuk menentukan apakah gambar di belakang carousel harus terlihat atau tidak.

Kode yang menyetel properti yang terkait dengan transformasi CSS dienkapsulasi dalam setupCarousel(). Fungsi bersarang ini membutuhkan dua argumen. Yang pertama adalah jumlah elemen dalam carousel, yaitu variabel yang dimasukkan di atas. Parameter kedua s adalah panjang sisi poligon carousel. Seperti yang saya sebutkan sebelumnya, ini sama dengan lebar gambar, sehingga Anda dapat membaca lebar salah satunya saat ini dengan getComputedStyle():

SetupCarousel(n, parseFloat(getComputedStyle(gambar).lebar));

Dengan cara ini, lebar gambar dapat diatur menggunakan nilai persentase.

Window.addEventListener("mengubah ukuran", () => ( setupCarousel(n, parseFloat(getComputedStyle(images).width)); ));

Demi kesederhanaan, saya tidak mengerti mengubah ukuran pendengar.

Hal pertama yang perlu dilakukan setupCarousel() adalah menghitung apotema poligon menggunakan parameter yang dimasukkan dan rumus yang telah dibahas sebelumnya:

Apotema = s / (2 * Math.tan(Math.PI / n));

Nilai ini kemudian digunakan untuk mengubah awal transformasi elemen bentuk untuk menghasilkan sumbu rotasi carousel yang baru:

Gambar.style.transformOrigin = `50% 50% $(-apothem)px`;

Kemudian gaya diterapkan pada gambar:

Untuk (var i = 0; i< n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = "hidden"; } }

Loop pertama memberikan ruang pada spasi di antara item carousel. Loop kedua menyiapkan transformasi 3D. Loop terakhir memproses tepi belakang jika bendera yang sesuai ditentukan dalam konfigurasi carousel.

Terakhir,rotateCarousel() dipanggil untuk menampilkan gambar saat ini ke depan. Ini adalah fungsi pembantu kecil yang, berdasarkan indeks gambar yang ditampilkan, memutar elemen bentuk sepanjang sumbu Y untuk menggerakkan gambar target ke depan. Ini juga digunakan oleh kode navigasi untuk bernavigasi bolak-balik:

Fungsi memutarCarousel(imageIndex) ( figure.style.transform = `rotateY($(imageIndex * -theta)rad)`; )

Berikut hasil akhirnya, demo yang membuat beberapa carousel, masing-masing dengan konfigurasi berbeda.

Saat ini, penggeser - carousel - adalah fungsi yang hanya perlu dimiliki di situs web bisnis, situs web portofolio, atau sumber daya lainnya. Selain penggeser gambar layar penuh, penggeser korsel horizontal cocok dengan desain web apa pun.

Terkadang penggeser harus menempati sepertiga halaman situs. Di sini penggeser carousel digunakan dengan efek transisi dan tata letak responsif. Situs e-niaga menggunakan penggeser carousel untuk menampilkan banyak foto di setiap postingan atau halaman. Kode slider dapat digunakan dan dimodifikasi secara bebas sesuai kebutuhan Anda.

Menggunakan JQuery bersama dengan HTML5 dan CSS3, Anda dapat membuat halaman Anda lebih menarik, memberikan efek unik, dan menarik perhatian pengunjung ke area tertentu di situs.

Slick adalah plugin jquery yang tersedia secara gratis yang pengembangnya mengklaim bahwa solusi mereka akan memenuhi semua kebutuhan slider Anda. Penggeser adaptif - carousel dapat bekerja dalam mode "ubin" untuk perangkat seluler, dan dalam mode "seret dan lepas" untuk versi desktop.

Berisi efek transisi pudar, peluang menarik"mode tengah", pemuatan gambar yang lambat dengan pengguliran otomatis. Fungsionalitas yang diperbarui mencakup penambahan slide dan filter slide. Semua untuk memastikan bahwa Anda mengonfigurasi plugin sesuai dengan kebutuhan Anda.

Modus demo | Unduh

Plugin ini memiliki banyak fungsi, cocok untuk pemula dan pengguna tingkat lanjut. pengembang berpengalaman. Ini adalah versi terbaru dari penggeser carousel. Pendahulunya memiliki nama yang sama.

Slider memiliki beberapa plugin bawaan untuk meningkatkan fungsionalitas secara keseluruhan. Animasi, pemutaran video, putar otomatis slider, pemuatan lambat, penyesuaian ketinggian otomatis – ini adalah fitur utama Owl Carousel 2.0.

Dukungan fitur seret dan lepas drop disertakan untuk penggunaan plugin yang lebih nyaman di perangkat seluler.
Plugin ini sempurna untuk menampilkan gambar besar bahkan di layar kecil perangkat seluler.

Contoh | Unduh

Plugin jquery yang cukup kecil namun kaya fungsi yang memungkinkan Anda menempatkan penggeser pada halaman - carousel, yang memiliki inti kecil dan tidak menghabiskan banyak sumber daya situs. Plugin ini dapat digunakan untuk menampilkan slider vertikal dan horizontal, dengan animasi dan membuat kumpulan gambar dari galeri.

Contoh | Unduh

Sangat jQuery kompak penggeser adalah carousel, yang fungsinya jauh lebih besar daripada penggeser biasa. Itu termasuk pratinjau satu gambar, menampilkan banyak gambar dalam bentuk carousel dan slider berdasarkan judul.

Contoh | Unduh

Korsel burung hantu adalah penggeser yang mendukung layar sentuh dan teknologi drag and drop, mudah diintegrasikan ke dalam kode HTML. Plugin adalah salah satunya slider terbaik, yang memungkinkan Anda membuat carousel yang indah tanpa markup yang disiapkan secara khusus.

Contoh | Unduh

Menggunakan transisi 3D berdasarkan gaya CSS dan sedikit kode Javascript.

Contoh | Unduh

Korsel 3D yang luar biasa. Sepertinya ini masih versi beta, karena saya baru saja menemukan beberapa masalah dengannya. Jika Anda tertarik untuk menguji dan membuat bilah geser Anda sendiri, carousel ini akan sangat membantu.

Contoh | Unduh

Slider responsif - carousel menggunakan teknologi bootstrap hanya untuk situs web baru Anda.

Contoh | Unduh

Paling populer di portofolio dan situs bisnis. Jenis penggeser ini - carousel - sering ditemukan di situs jenis apa pun.

Contoh | Unduh

Slider berukuran mungil ini siap bekerja pada perangkat dengan resolusi layar apa pun. Penggeser dapat bekerja dalam mode melingkar dan korsel. Lingkaran kecil dihadirkan sebagai alternatif slider lain sejenisnya. Dukungan bawaan tersedia sistem operasi iOS dan Android.

Dalam mode melingkar, slidernya terlihat cukup menarik. Dukungan luar biasa untuk metode drag and drop dan sistem pengguliran slide otomatis.

Contoh | Unduh

Penggeser carousel yang kuat dan adaptif sangat cocok untuk situs web modern. Berfungsi dengan benar di perangkat apa pun. Memiliki mode horizontal dan vertikal. Ukurannya diperkecil menjadi hanya 1 KB. Plugin ultra kompak juga memiliki transisi mulus yang luar biasa.

Contoh | Unduh

Berisi lebih dari 50 efek, yang dapat membantu Anda membuat slider asli untuk situs web Anda.

Contoh | Unduh

Ubah ukuran jendela browser Anda untuk melihat bagaimana penggeser beradaptasi. Bxslider hadir dengan lebih dari 50 opsi penyesuaian dan menampilkan fitur-fiturnya dengan berbagai efek transisi.

Contoh | Unduh

jCarousel adalah plugin jQuery yang akan membantu mengatur tampilan gambar Anda. Anda dapat dengan mudah membuat carousel gambar khusus dari dasar yang ditunjukkan pada contoh. Penggesernya adaptif dan dioptimalkan untuk bekerja pada platform seluler.

Contoh | Unduh

Scrollbox adalah plugin ringkas untuk membuat penggeser - carousel atau perayapan teks. Fitur utama mencakup efek pengguliran vertikal dan horizontal dengan jeda saat gerakan mouse.

Contoh | Unduh

Penggeser korsel sederhana. Jika Anda membutuhkan plugin yang cepat, plugin ini 100% cocok. Hadir hanya dengan fitur dasar yang diperlukan agar penggeser dapat berfungsi.

Contoh | Unduh

Pembuat Flexisel terinspirasi oleh plugin jCarousel jadul, membuat salinannya yang bertujuan untuk memastikan pengoperasian penggeser yang benar pada perangkat seluler dan tablet.

Tata letak responsif Flexisel, ketika dijalankan di perangkat seluler, berbeda dengan tata letak berukuran jendela browser. Flexisel diadaptasi secara sempurna untuk bekerja pada layar, baik resolusi rendah maupun tinggi.

Contoh | Unduh

Elastislide beradaptasi sempurna dengan ukuran layar perangkat Anda. Anda dapat mengatur jumlah minimum gambar untuk ditampilkan pada resolusi tertentu. Berfungsi dengan baik sebagai penggeser carousel dengan galeri gambar, menggunakan pembungkus tetap bersama dengan efek pengguliran vertikal.

Contoh | Unduh

Penggeser freeware dari Woothemes. Ini dianggap sebagai salah satu penggeser adaptif terbaik. Plugin ini berisi beberapa template dan akan berguna baik bagi pengguna pemula maupun ahli.

Contoh | Unduh

Korsel Luar Biasa – penggeser gambar responsif menggunakan jQuery. Mendukung banyak sistem manajemen konten seperti WordPress, Drupal dan Joomla. Juga mendukung Android dan IOS dan opsi desktop sistem operasi tanpa masalah kompatibilitas. Templat carousel luar biasa bawaan memungkinkan Anda menggunakan penggeser dalam mode vertikal, horizontal, dan melingkar.