Membuat carousel menggunakan JS murni, dari awal, dan sendiri? Mengapa menemukan kembali roda ketika ada solusi siap pakai, penggeser licin/burung hantu? Setidaknya ada dua alasan untuk ini:

• untuk tujuan pendidikan
• untuk menyelesaikan tugas tes

Saat melamar pekerjaan, bahkan untuk lowongan desainer tata letak HTML, Anda akan diminta tidak hanya membuat carousel, tetapi juga mengimplementasikannya di JS, tanpa menggunakan perpustakaan pihak ketiga.

Mengubah properti elemen menggunakan metode ketika peristiwa terjadi. Tiga pilar yang menjadi sandaran JavaScript:

• properti
• metode
• acara

Pengguna mengaktifkan acara onclick ketika tombol diklik. Tugas programmer adalah melampirkan event klik ke elemen yang diinginkan dan menulis instruksi (fungsi) untuk browser apa yang harus terjadi ketika diklik.

Mari buat wadah untuk gambar, masukkan gambar itu sendiri dan dua tombol - Maju / Kembali.

Kembali
Maju

#galeri.foto img(
lebar: 100%;
tampilan: tidak ada;
}

#gallery .photos img:anak pertama(
tampilan: blok;
}

Tombol (
margin-atas: 20 piksel;
}

Bagaimana Anda menulis kode JS ketika Anda tidak memahami logika apa yang terjadi? Saat Anda menekan tombol Maju, gambar saat ini hilang, dan gambar baru muncul di tempatnya. Selalu ada satu gambar di area visibilitas, tapi di manakah sisanya? Dan kami menyembunyikan sisanya, mengatur display: none untuk semua gambar, hanya menyisakan yang pertama, mengaturnya display: block, melalui kelas semu anak pertama.

Cara membuatnya agar setiap kali Anda mengklik tombol Maju, gambar pertama menghilang, dan gambar kedua muncul, dan bukannya gambar kedua, gambar ketiga. Properti tampilan perlu dialihkan antara tidak ada / blok saat Anda mengklik tombol.

Ayo ambil tombolnya Maju / Kembali oleh pemilih, menggunakan metode querySelector dan memasukkannya ke dalam variabel btn_prev / btn_next.

Misalkan btn_prev = document.querySelector("#gallery .buttons .prev");
biarkan btn_next = document.querySelector("#gallery .buttons .next");

Mari kita ambil semua gambar dengan pemilih menggunakan metode querySelectopAll dan juga menempatkannya di variabel gambar.

querySelectopAll – mendapatkan serangkaian elemen, yaitu semua gambar.

Biarkan gambar = document.querySelectorAll("#gallery .photos img");

Dalam array, elemen disimpan, sudah diberi nomor, dimulai dari nol. Oleh karena itu, kami dapat menghubungi mereka melalui nomor. Tapi pertama-tama, mari kita buat variabel baru dan tempatkan di dalamnya nomor gambar pertama, yang memiliki properti display: block.

Misalkan saya = 0; // nomor gambar saat ini di layar

Kami beralih ke gambar saat ini dan mengubah properti tampilannya dalam gaya.

Gambar[i].style.display = "tidak ada"; // sembunyikan gambar saat ini

Sekarang, tidak ada satu pun gambar di layar. Bagaimana gambar selanjutnya akan muncul di sana? Kita tahu bahwa jumlah gambar berikutnya akan selalu lebih banyak daripada jumlah gambar sebelumnya.

saya++ ; // menambah variabel i sebanyak satu

images.length adalah jumlah gambar yang bisa diubah, jadi tidak perlu menunjukkan bahwa kita memiliki 3 gambar, browser sudah mengetahui hal ini. Kami menambah penghitung i, setiap kali satu per satu, hingga gambar terakhir ditampilkan, dan kemudian kami memaksa carousel untuk kembali lagi ke gambar pertama. Ini disebut perulangan.

Kita tuliskan syaratnya ketika penghitung i menjadi lebih besar dari jumlah gambar yang tersedia, maka akan kembali ke gambar sekarang, angka 0.

If(i >= gambar.panjang)(
saya = 0; // variabel i adalah 0
}

Saat menelusuri gambar dalam urutan terbalik, penghitung i harus berkurang satu. Jika nilai variabel menjadi kurang dari nol, maka Anda perlu memasukkan nomor gambar terakhir ke dalamnya.

Btn_prev.onclick = fungsi())(
gambar[i].style.display = "tidak ada";
saya = saya - 1;
jika (saya< 0){
i = gambar.panjang - 1;
}
gambar[i].style.display = "blok";
}

Kami mengurangi satu dari jumlah total panjang gambar dan mendapatkan gambar nomor 2. Ini akan menjadi gambar terakhir, karena kalkulus dalam pemrograman dimulai dari nol.

Untuk lulus ujian posisi desainer tata letak, Anda memerlukan pemahaman yang percaya diri tentang JS, yang khusus ditujukan untuk desainer tata letak.

Plugin carousel jQuery memungkinkan Anda menampilkan konten situs web dengan cara yang lebih menarik. Dengan bantuan plugin tersebut, Anda dapat membuat presentasi yang indah langsung di halaman website dan menarik perhatian pengunjung.

Bootstrap Ambilight Slider adalah plugin untuk membuat slider/carousel dengan efek cahaya sekitar dan fungsionalitas Bootstrap.

Plugin jQuery TouchSwipe Carousel memungkinkan Anda mendeteksi sentuhan pada layar sentuh dan mensimulasikan penekanan tombol mouse.

ItemSlide.js adalah plugin jquery untuk membuat carousel yang dapat berfungsi pada PC desktop dan perangkat sentuh seluler.

– plugin jquery untuk membuat carousel/slider adaptif.

Plugin jquery carousel yang sepenuhnya responsif dan dioptimalkan untuk seluler. Untuk animasi, transisi CSS3 digunakan di sini, tetapi ada juga opsi fallback di jQuery. Plugin ini mendukung jumlah slide yang tidak terbatas dengan jenis konten apa pun. dapat berinteraksi dengan keyboard, dan pada saat yang sama berfungsi dengan baik di sebagian besar browser, termasuk browser seluler.

SilverTrack adalah plugin jQuery yang dapat diperluas. Ini terdiri dari inti kecil tempat Anda dapat menghubungkan plugin yang nyaman.

Owl Carousel 2 adalah carousel jQuery/Zepto yang sepenuhnya responsif dengan dukungan layar sentuh.

UtilCarousel adalah plugin carousel jQuery dengan transisi mulus yang diimplementasikan melalui akselerasi perangkat keras. Ini sepenuhnya adaptif. Plugin ini mendukung layar sentuh dan menggunakan animasi 3D CSS3 yang dipercepat perangkat keras. Berkat ini, plugin akan terlihat bagus di PC desktop dan perangkat seluler. Anda dapat mengontrol UtilCarousel menggunakan sentuhan, navigasi, atau roda mouse.

Slick adalah carousel jQuery responsif yang memiliki semua yang Anda butuhkan.

Carousel ini didukung oleh perangkat iOS dan Android serta dilengkapi dengan fungsi touchwipe. Tampak hebat di tablet dan ponsel cerdas.

jQuery Slideshow adalah carousel dan slider dengan dukungan gerakan untuk perangkat sentuh. Arsip plugin hanya berbobot 2 kilobyte.

FlimRoll adalah miniatur jQuery carousel yang memfokuskan perhatian pengguna pada objek tertentu, menempatkannya di tengah layar.

Tikslus adalah carousel jQuery yang sepenuhnya responsif dengan banyak fitur dan properti. Dan kemampuan beradaptasi yang tinggi dari plugin memungkinkan Anda untuk tidak menentukan ukuran gambar. Selain itu, perlu diperhatikan dukungan untuk animasi khusus berdasarkan kelas CSS3. Tikslus dapat digunakan dengan plugin Jquery Mobile.

Scrollbox adalah plugin jQuery mini sederhana yang mengubah daftar menjadi carousel atau ticker.

Sky Touch Carousel adalah plugin carousel jQuery dengan serangkaian fungsi yang kaya. Plugin ini adaptif, mendukung layar sentuh, dan pada saat yang sama bekerja dengan cepat dan lancar. Pengaturan memungkinkan Anda mengubah tampilan carousel menggunakan CSS.

– plugin jQuery fleksibel untuk membuat tayangan slide atau carousel. Ini memiliki banyak pengaturan, termasuk jenis transisi, penyelarasan gambar, dan kecepatan peralihan bingkai.

Di Internet Anda dapat menemukan banyak plugin bagus untuk membuat carousel dan slider jQuery. Mereka memungkinkan Anda menerapkan pengguliran dinamis dengan efek tambahan.

Ini adalah salah satu tren paling populer dalam desain web selama beberapa tahun terakhir. Selain itu, penggunaan perpustakaan siap pakai dan plugin jQuery dapat menghemat waktu secara signifikan. Yang perlu Anda lakukan hanyalah memberikan tautan ke file JavaScript dan CSS, lalu menerapkan efeknya ke elemen HTML yang diinginkan.

Anda juga dapat mengatur pengaturan dan gaya CSS Anda sendiri. Artikel hari ini bertujuan untuk memperkenalkan Anda pada plugin jQuery responsif untuk membuat carousel dan slider.

Mengganggu – plugin jQuery untuk membuat penggeser konten layar penuh yang sensitif terhadap sentuhan

Slider carousel konten jQuery layar penuh responsif dengan dukungan layar sentuh. Plugin ini didistribusikan di bawah LISENSI PUBLIK UMUM GNU v3:

Neoslide: plugin carousel jQuery yang sederhana dan dapat diperluas

Plugin jQuery sederhana dan dapat diperluas yang memungkinkan Anda menggunakan penggeser yang sepenuhnya dapat disesuaikan di halaman web mana pun:

Hslider: plugin galeri gambar responsif lebar penuh

Plugin lain untuk menampilkan gambar menggunakan carousel jQuery responsif dengan kontrol dan durasi penundaan khusus:

Carousel 3D: plugin carousel jQuery dengan efek rotasi 3D

Slider Ramping: Korsel jQuery Responsif Layar Penuh

Korsel jQuery mini dan menarik untuk menampilkan konten dan gambar dengan berbagai jenis navigasi (panah SVG dengan thumbnail gambar, elemen penomoran halaman, atau tab):

PaW Carousel: Carousel Responsif Didukung oleh jQuery

PaW Carousel (v2) adalah plugin miniatur untuk membuat carousel jQuery sederhana dan responsif dengan thumbnail gambar:

Carousel Sharer: carousel jQuery untuk memposting ulang di jejaring sosial

Carousel Sharer adalah plugin jQuery yang memungkinkan Anda menampilkan beberapa produk secara berurutan, dan memungkinkan pengunjung membagikan produk Anda di Facebook, Twitter, Google+, dan Pinterest:

Simply Carousel: carousel gambar responsif minimalis

Simply Carousel adalah plugin jQuery kecil dan cepat yang memungkinkan Anda membuat slider dan carousel gambar yang fleksibel dan responsif:

Slide: Korsel dan tayangan slide jQuery responsif dengan dukungan sentuh

Slides adalah plugin jQuery mini untuk membuat carousel responsif untuk situs web jQuery dengan thumbnail, navigasi panah, dan kemampuan untuk menggunakan kontrol khusus. Dukungan untuk layar sentuh telah diterapkan:

korsel konten jQuery

Korsel jQuery responsif sederhana dengan fitur putar otomatis, kontrol, dan bahkan fungsi panggilan balik:

Slick: Korsel jQuery yang responsif dan fleksibel

Slick adalah plugin "segar" untuk membuat carousel dan slider jQuery yang disesuaikan, responsif, dan dioptimalkan untuk seluler yang dapat bekerja dengan elemen HTML apa pun:

bxSlider: penggeser konten HTML jQuery

bxSlider adalah salah satu penggeser konten jQuery terbaik yang tersedia saat ini. Plugin ini sangat cocok untuk mengatur tayangan slide:

CarouFredSel: plugin carousel jQuery yang fleksibel dan kuat

jQuery.carouFredSel adalah plugin yang mengubah elemen HTML apa pun menjadi carousel konten. Ini memungkinkan Anda menggulir satu atau lebih elemen secara bersamaan, baik secara horizontal maupun vertikal. Anda juga dapat mengaktifkan pemutaran otomatis dan membuat pengguliran tanpa akhir:

Korsel konten bersepeda dengan jQuery

Korsel di mana setiap klik akan menampilkan blok konten baru. Mengklik tanda silang akan menutup blok aktif dan mengembalikan kita ke posisi awal melihat thumbnail:

Cloud Carousel: Korsel 3D dalam Javascript

Korsel ini memungkinkan Anda menciptakan perspektif yang realistis. Banyak carousel 3D jQuery yang menerapkan efek perspektif hanya pada ukuran gambar, bukan posisinya, yang mengakibatkan disproporsi elemen pada laman:

Elastislide: carousel responsif dengan jQuery

Elastislide adalah carousel jQuery responsif yang beradaptasi dengan ukuran layar apa pun. Memasukkan carousel ke dalam wadah dengan lebar yang fleksibel akan membuat carousel itu sendiri menjadi “karet”:

jCarousel Lite

Dengan plugin ini Anda akan dapat melihat gambar atau elemen HTML sebagai slider. Beratnya hanya 2Kb, tetapi pada saat yang sama memungkinkan Anda untuk menggunakan pengaturan Anda sendiri:

Korsel 3D

Buat carousel jQuery 3D dari gambar dengan efek bayangan dan animasi yang bereaksi terhadap posisi kursor:

Plugin korsel JQuery

Pengaturan plugin ini memungkinkan Anda menentukan berapa banyak elemen yang akan ditampilkan di carousel, setelah itu plugin menyesuaikannya dengan lebar yang diinginkan:

Memutar penggeser gambar dengan jQuery

Penggeser gambar asimetris dengan tambahan kecil: saat Anda menggulir gambar, gambar akan berputar sedikit. Karena sedikit perpindahan elemen, penggeser memperoleh bentuk yang tidak biasa:

Korsel Fitur jQuery

Plugin ini dirancang untuk menampilkan artikel yang direkomendasikan di halaman beranda, tetapi juga dapat digunakan untuk konten lainnya. Ini memungkinkan hingga tiga gambar ditampilkan secara bersamaan sementara carousel konten jQuery lainnya disembunyikan:

Korsel Tak Terbatas jQuery

Ini adalah plugin jQuery yang memungkinkan Anda menampilkan gambar dan video dalam jumlah tak terbatas di carousel. Tidak seperti carousel lainnya, Infinite Carousel menampilkan elemen dalam loop tanpa akhir tanpa perlu menggunakan navigasi:

plugin jQuery Liquid Carousel

Liquid Carousel adalah plugin yang dirancang untuk membuat desain yang mengalir. Setiap kali wadah carousel responsif jQuery berubah ukurannya, jumlah elemen yang ditampilkan menyesuaikan dengan lebar baru:

Korsel Jquery MS

Salah satu cara efektif untuk menarik perhatian pengguna pada suatu halaman website adalah dengan membuat animasi bergerak. Elemen animasi membantu memberi tahu dan menampilkan produk Anda dengan lebih jelas kepada pengguna. Baru-baru ini, panel geser menjadi sangat populer, serta sejumlah efek lain yang muncul saat menggulir atau mengklik gambar. Mereka juga dikenal sebagai slider, carousel, dan panel pop-up. Pada artikel ini kita akan membahas tentang membuat penggeser carousel adaptif dengan efek gulir otomatis yang mulus.

Saat ini, ada ratusan ulasan di Internet dengan tautan ke solusi siap pakai, namun kebanyakan berisi banyak fungsi yang tidak digunakan yang secara signifikan mengurangi kinerja penggeser, serta memperlambat pemuatan situs secara keseluruhan. Pengembang web profesional selalu berupaya menciptakan produk perangkat lunak yang konfigurasinya fleksibel, dengan hambatan masuk yang rendah untuk perpustakaan dan plugin tambahan. Itulah sebabnya skrip kami menggunakan persyaratan minimum untuk mengatur penggeser semacam itu. Fungsionalitasnya memungkinkan Anda mengatur interval peralihan, kecepatan, serta pilihan slide tertentu. Di bawah ini adalah sejumlah variabel yang mengatur pengoperasian slider itu sendiri.

timeList - kecepatan perpindahan slide

TimeView - menampilkan waktu

RadioBut - tombol di bawah slide untuk navigasi cepat. Nilai defaultnya adalah true, jika menggunakan false tombol-tombolnya akan hilang.

Sekarang mari kita mulai! Mari buat dan buka file index.htm

Seperti yang bisa kita lihat, tidak ada yang rumit dalam kode yang disajikan; slider-wrap menentukan posisi umum dan menyelaraskan slider ke tengah layar. Parameter slide aktif mengatur ukuran dan tinggi gambar sesuai dengan panjangnya. Dan penggeser hanya menampilkan gambar yang aktif.

Sekarang mari kita buat dan buka file style.css dan tambahkan markup yang kita perlukan di sana:

@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body ( warna: #4f4f5a; font-family: "Roboto", sans-serif; ukuran font: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-atas: 80px; ) #slide aktif ( lebar: 100%; tampilan: tabel; posisi: relatif; luapan: tersembunyi; -webkit-pilih-pengguna: tidak ada; -moz-pilih-pengguna: tidak ada; -ms- pilih pengguna: tidak ada; -o-pilih pengguna: tidak ada; pilih pengguna: tidak ada; #slider( posisi: relatif; lebar: kalk(100% * 4); atas: 0; kiri: 0; margin: 0 ; padding: 0; -webkit-transition: 1s; -webkit-transition-timing-function: kemudahan masuk -keluar; fungsi waktu transisi: kemudahan masuk; ) .slide( lebar: calc(100%/4 ); gaya daftar: tidak ada; tampilan: inline; float: kiri; ) .slide img ( lebar: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But . ctrl-pilih ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden; text-indent:-9999px; background:url(radioBg.png) tengah bawah tanpa pengulangan; ) .Radio-But .ctrl-select:hover ( kursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( tampilan :blok; tinggi:100%; overflow:hidden; latar belakang: url("arrowBg.png") opacity tengah kiri:0.5 ; z-index:3; tombol berikutnya ( kanan:10px; latar belakang:url(panahBg.png) tengah kanan tanpa pengulangan; ) #prewbutton:hover, # tombol berikutnya:hover ( opacity:1; )

Di properti gaya slider-wrap, masukkan lebar – panjang maksimum gambar Anda.

Di properti gaya #slider ( width: calc(100% * 4); ) dan .slide ( width: calc(100%/4); ), tentukan jumlah gambar di slider Anda. Dalam contoh kita ada 4 di antaranya.

Jika panah maju/mundur mengganggu visibilitas penggeser Anda, panah tersebut dapat dibuat tidak terlihat dan akan muncul saat Anda mengarahkan kursor ke atasnya. Untuk melakukan ini, pada parameter prewBut dan nextBut, atur properti opacity ke 0.

Sekarang mari kita buat dan buka file slider.js kita, yang akan berisi kode slider. Jangan lupa sertakan perpustakaan jQuery.

$(dokumen).siap(fungsi () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(panah)( clearTimeout(slideTime); if(panah == "berikutnya")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) TranslateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); ") ( if(slideNum == 1) ( slideNum=slideCount; ) else(slideNum-=1) TranslateWidth = -$("#active-slide").width() * (slideNum - 1); $(" # slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); )else( slideNum = panah; TranslateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); $(".ctrl-select.active" ). hapusKelas("aktif"); $(".ctrl-pilih").eq(slideNum - 1).addClass("aktif" ) if(RadioBut)( var $linkArrow = $("") .prependTo ("#aktif -menggeser");< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >$("#nextbutton").click(function())( animSlide("next"); return false; )) $("#prewbutton").click(function())( animSlide("prew"); return salah; )) ) var adderSpan = "";

$(".slide").each(fungsi(indeks) ( adderSpan += "" + indeks + ""; ));

Slider yang disajikan menggunakan gambar dari sumber web https://pixabay.com/.

Owl Carousel adalah plugin jQuery dengan dukungan sentuh yang memungkinkan Anda membuat slider (carousel) yang responsif (adaptif).
Ini adalah plugin yang sangat nyaman, sederhana dan adaptif untuk membuat slider, carousel, dll.
Pada artikel ini saya akan mencoba menjelaskan dan menunjukkan cara kerjanya.

Memasang plugin Owl Carousel
Pertama kita perlu mengunduh arsip dengan plugin

Di bawah ini saya akan menunjukkan contoh pemasangan plugin di template DataLife Engine.

Sekarang kita perlu menghubungkan file-file ini agar dapat berfungsi di template kita.
Buka file main.tpl dan sebelum baris tersebut masukkan baris berikut:
Ubah folder css ke folder yang memiliki gaya css!
Kemudian pada bagian paling bawah sebelum baris tersebut kita masukkan baris berikut:
Itu dia! Kami selesai dengan instalasi.

Sekarang kita perlu memasukkan dan mengkonfigurasi slider itu sendiri.
Saya akan menunjukkannya kepada Anda dengan sebuah contoh berita utama itu Saya akan menampilkan berita populer melalui carousel burung hantu kami.

Halaman dokumentasi menjelaskan semua opsi, demo, dan cara menggunakan plugin Owl Carousel kami.
Ikuti tautannya dan pilih penggeser mana pun yang Anda suka.
Untuk kami berita utama Saya memilih yang pertama dengan namanya Gambar. Di tab javascript, salin baris berikut:
$(document).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, item: 4, itemsDesktop: , itemsDesktopSmall: )); ));

dan masukkan ke dalam file main.tpl sebelum baris
Kemudian di tab CSS kita salin baris: #owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) dan sambungkan ke mana saja css
file baik di file main.tpl sebelum baris tetapi setelah baris! Sekarang kita akan mengurai kode HTML kita dan menghubungkannya berita utama.
Di file main.tpl, kita masukkan tag (topnews) ke tempat yang diperlukan, yang selanjutnya menampilkan daftar berita populer, yang tampilannya dapat disesuaikan di file topnews.tpl, lebih lanjut di bawah ini.
Kode tag kita akan terlihat seperti ini:
(topnews) Nah, sekarang kita tinggal menyiapkan beritanya sendiri.
Buka file t opnews.tpl dan masukkan di awal:

di bagian paling akhir kita menutup atributnya
Jika Anda menggunakan salah satu template saya dengan Bootstrap, maka sebagai opsi Anda dapat menggunakan baris berikut di file topnews.tpl:

(batas judul = "55")

Baca Berita akan ditampilkan seperti ini

Plugin ini dapat digunakan hampir di mana saja, juga menggunakan tag (kategori khusus)
Itu juga dapat menggantikan galeri DLE standar, saya akan menerbitkan artikel terpisah tentang ini. Nikmati untuk kesehatan Anda ;)

Hormat kami, admin. unduh Perhatian: Batas unduhan telah tercapai. Datanglah besok =)