Korsel Burung Hantu - plugin jQuery dengan dukungan sentuh, yang memungkinkan Anda membuat slider (korsel) responsif (adaptif).
Sangat nyaman, sederhana dan plugin 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.

Setelah kami mengunduh arsip, buka dan distribusikan file sebagai berikut:
Mengajukan owl.carousel.css dan owl.transitions.css masukkan ke dalam folder gaya jadi atau css.
Mengajukan owl.carousel.js taruh di folder js

Sekarang kita perlu menghubungkan file-file ini agar bisa bekerja di template kita.
Membuka file main.tpl a sebelum garis memasuki baris berikut:
map css ubah ke tempat Anda berada css gaya!
Kemudian di bagian paling bawah sebelum garis masukkan baris ini:
Itu dia! Kami selesai dengan instalasi.

Sekarang kita perlu memasukkan dan mengkonfigurasi slider itu sendiri.
Saya akan menunjukkan dengan sebuah contoh berita utama itu tampilkan berita populer melalui korsel burung hantu kami.

Halaman dokumentasi menjelaskan semua opsi, demo, dan cara menggunakan plugin Owl Carousel kami.
Ikuti tautan dan pilih penggeser yang Anda suka.
untuk kita berita utama Saya memilih yang pertama dengan nama gambar-gambar. Di tab javascript, salin baris ini:
$(document).ready(function() ( $("#owl-demo").owlCarousel(( autoPlay: 3000, item: 4, itemDesktop: , itemDesktopSmall: )); )); dan rekatkan ke dalam file main.tpl sebelum garis

Kemudian di tab CSS, salin baris:
#owl-demo .item( margin: 3px; ) #owl-demo .item img( display: block; width: 100%; height: auto; ) dan sertakan di mana saja css file atau ke file main.tpl sebelum garis tapi setelah garis !
Sekarang kita akan mengurai kode HTML kita dan terhubung ke berita utama. dalam file main.tpl masukkan tag di tempat yang tepat (berita utama) yang pada gilirannya menampilkan daftar berita populer, penampilan yang dapat dikonfigurasi dalam file topenews.tpl, lebih lanjut tentang itu di bawah ini .
Kode tag kami akan terlihat seperti ini:

Nah, sekarang kita tinggal menyiapkan beritanya sendiri.
Membuka file topnews.tpl dan di awal kita masuk:

Jika Anda menggunakan salah satu template Bootstrap saya, maka Anda dapat menggunakan baris berikut dalam file sebagai opsi: topnews.tpl:

Berita akan ditampilkan dalam formulir ini

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

Salam admin. unduh Perhatian: Batas unduhan telah tercapai. Datang besok =)

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

Terkadang penggeser perlu mengambil sepertiga halaman situs. Di sini penggeser korsel digunakan dengan efek transisi dan dengan tata letak responsif. Situs e-niaga menggunakan penggeser korsel untuk menampilkan banyak foto di pos atau halaman terpisah. Kode slider bebas digunakan dan diubah sesuai kebutuhan Anda.

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

Slick - plugin slider carousel modern

Slick adalah plugin jQuery gratis yang pengembangnya mengklaim bahwa solusi mereka akan memenuhi semua persyaratan slider Anda. Penggeser responsif - korsel dapat bekerja dalam mode "ubin" untuk perangkat seluler, dan dalam mode "seret dan lepas" untuk versi desktop.

Ini berisi efek transisi pudar, fitur "mode di tengah" yang menarik, pemuatan gambar yang lambat dengan pengguliran otomatis. Fungsionalitas yang diperbarui termasuk menambahkan slide dan filter slide. Semuanya bagi Anda untuk menyesuaikan plugin sesuai dengan kebutuhan Anda.

Modus demo | Unduh

Owl Carousel 2.0 - plugin jQuery untuk perangkat sentuh

Plugin ini memiliki banyak fitur, cocok untuk pemula dan pengembang berpengalaman. Ini versi terbaru penggeser - korsel. Pendahulunya memiliki nama yang sama.

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

Seret dukungan dan jatuhkan 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 Jalur Perak jQuery

Plugin jquery yang agak kecil tapi kaya yang memungkinkan Anda menempatkan penggeser korsel pada halaman, 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

AnoSlide - Slider jQuery responsif yang sangat ringkas

Sangat kompak penggeser jQuery- korsel, yang fungsinya jauh lebih banyak daripada penggeser konvensional. Ini termasuk pratinjau gambar tunggal, menampilkan banyak gambar dalam korsel dan penggeser berdasarkan judul.

Contoh | Unduh

Owl Carousel - slider jquery - carousel

Korsel burung hantu - penggeser dengan dukungan Layar sentuh dan teknologi tarik dan drop , dengan mudah disematkan dalam kode HTML. Plugin ini adalah salah satu penggeser terbaik yang memungkinkan Anda membuat komidi putar yang indah tanpa markup yang disiapkan secara khusus.

Contoh | Unduh

Galeri 3D - korsel

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

Contoh | Unduh

Korsel 3D menggunakan TweenMax.js dan jQuery

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

Contoh | Unduh

Korsel menggunakan bootstrap

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

Contoh | Unduh

Slider berbasis bootstrap - Carousel Kotak Bergerak

Paling dicari di situs web portofolio dan bisnis. Jenis penggeser yang serupa - korsel sering ditemukan di situs jenis apa pun.

Contoh | Unduh

Penggeser Lingkaran Kecil

Slider ukuran kecil ini siap bekerja pada perangkat dengan resolusi layar apa pun. Slider dapat bekerja baik dalam mode melingkar dan korsel. Lingkaran kecil disajikan sebagai alternatif untuk slider lain dari jenis ini. Memiliki dukungan bawaan sistem operasi IOS dan Android.

Dalam mode melingkar, slider terlihat cukup menarik. Dukungan untuk metode seret dan lepas dan sistem pengguliran slide otomatis diimplementasikan dengan baik.

Contoh | Unduh

Penggeser konten thumbnail

Slider tipe carousel yang kuat, adaptif, sangat cocok untuk situs modern. Bekerja dengan benar di perangkat apa pun. Memiliki mode horizontal dan vertikal. Ukurannya diperkecil menjadi hanya 1 KB. Plug-in ultra ringkas memiliki transisi mulus yang sangat baik.

Contoh | Unduh

wow slider korsel

Berisi lebih dari 50 efek yang dapat membantu Anda membuat bilah geser asli untuk situs Anda.

Contoh | Unduh

Slider konten jQuery responsif bxSlider

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

Contoh | Unduh

jCarousel

jCarousel adalah plugin jQuery yang akan membantu mengatur tampilan gambar Anda. Anda akan dapat dengan mudah membuat korsel gambar khusus dari kerangka kerja yang ditunjukkan dalam contoh. Penggeser responsif dan dioptimalkan untuk platform seluler.

Contoh | Unduh

ScrollBox - Plugin jQuery

Scrollbox adalah plugin ringkas untuk membuat bilah geser - korsel atau baris teks berjalan. Fitur utama termasuk efek pengguliran vertikal dan horizontal dengan jeda pada kursor mouse.

Contoh | Unduh

dbpasCarousel

Slider korsel sederhana. Jika Anda membutuhkan plugin yang cepat, yang ini 100% cocok. Hadir hanya dengan fitur dasar yang diperlukan untuk membuat penggeser berfungsi.

Contoh | Unduh

Flexisel: Plugin JQuery Carousel Slider Responsif

Pembuat Flexisel mengambil inspirasi dari plugin jCarousel jadul, membuat salinannya yang berfokus pada pengoperasian slider yang benar pada perangkat seluler dan tablet.

Tata letak responsif Flexisel, saat dijalankan di perangkat seluler, berbeda dari tata letak berorientasi ukuran jendela browser. Flexisel disesuaikan dengan sempurna untuk bekerja di layar, baik resolusi rendah maupun tinggi.

Contoh | Unduh

Elastislide - Penggeser Korsel Responsif

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

Contoh | Unduh

Penggeser Fleksibel 2

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

Contoh | Unduh

Korsel luar biasa

Korsel Luar Biasa - penggeser adaptif gambar jQuery. Mendukung banyak sistem manajemen konten seperti WordPress, Drupal dan Joomla. Ini juga mendukung Android dan iOS dan versi desktop sistem operasi tanpa masalah kompatibilitas. Templat korsel luar biasa bawaan memungkinkan Anda menggunakan penggeser dalam mode vertikal, horizontal, dan melingkar.

Contoh | Unduh

/* Di sinilah carousel kita dimulai. The.carousel-wrapper diposisikan secara relatif, the.carousel-item adalah mutlak. . */ .carousel-wrapper( position:relative; /* Kotak yang diposisikan sepenuhnya mendapatkan tinggi dan lebarnya dari induknya. Kami membuatnya transparan secara default, dan kemudian mereka akan memudar saat mengklik .arrow-prev dan.arrow-next link. * / .carousel-item( position:absolute; top:0; bottom:0; left:0; right:0; padding:25px50px; opacity:0; transisi:all0.5sease-in-out; /* Notice padding di kiri dan 50px di kanan? Dengan cara ini kita dapat memposisikan link kita! Masing-masing akan memiliki lebar 50px. Saya juga menggunakan link kosong dengan pola latar belakang sehingga tautannya terlihat seperti panah. Periksa apakah Anda telah berubah Tautkan URL dengan URL asli sehingga tautan Anda tidak hanya persegi panjang transparan. */ .arrow( position:absolute; top:0; display:block; width:50px; tinggi:100%; -webkit-tap-highlight-color:rgba(0,0,0,0); background:url( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; /* Mari kita kembalikan panah kiri kita. */ &.arrow-prev( left:0; ) /* Dan yang kedua ke kanan . Karena saya menggunakan gambar yang sama untuk panah, saya memutarnya 180 derajat */ &.arrow-next( right:0; -webkit-transform:rotate(180deg); transform:rotate(180deg); ) ) / * Saya sangat menyukai tampilan slide carousel latar belakang gelap, dan jika blok .carousel-item memiliki kelas "light", kita akan mengubah teksnya menjadi putih dan menggunakan panah putih, bukan abu-abu. Periksa kembali apakah path ke gambar panah sudah benar */ &.light( color:white; .arrow( background:url("/carousel-arrow-light.png")50%50%/20pxno-repeat; ) ) /* Tulis kueri media untuk mengubah ukuran panah pada perangkat dengan ukuran layar yang lebih kecil.*/ @media(max-width:480px)( .arrow,&.light.arrow( background-size:10px; background-position:10px50 % ; ) ) ) /* Setel target tautan untuk ditampilkan: tidak ada; Dengan demikian, kami menyingkirkan lompatan browser yang konstan ke bagian paling atas korsel dengan setiap klik pada panah. Properti ini berlaku untuk setiap elemen yang ID-nya dimulai dengan "target-item". */ ( display:none; ) /* Di atas, kami membuat semua slide carousel kami transparan, yang berarti bahwa ketika carousel dimuat, kami akan mendapatkan kotak kosong besar sebagai gantinya. Mari kita ubah nilai transparansi untuk slide pertama menjadi 1 untuk tampilan. Kami juga mengatur z-index ke 2, memposisikannya di atas slide lainnya. */ .item-1( z-index:2; opacity:1; ) /* Tapi kita tidak ingin slide pertama selalu memiliki opacity: 1; jika tidak, kita harus melewati slide ini sementara yang lain berputar. */ *:target~.item-1( opacity:0; ) /* ..tetapi jika #target-item-1 dalam fokus dan kami ingin menampilkan slide pertama, pilih dengan ikon ~ dan atur opacity kembali ke 1:-) */ #target-item-1:target~.item-1( opacity:1; ) /* Jika target-item-# lain dalam fokus, pilih mereka menggunakan pemilih ~, fade mereka di, dan letakkan di atas dengan z-index: 3. Di sini Anda dapat menambahkan bentang tambahan dengan id item target jika Anda memiliki lebih dari tiga. Dapat menambahkan 10 item sekaligus.. */ #target-item-2:target~.item-2,#target-item-3:target~.item-3( z-index:3; opacity:1; ) )

Ya, topiknya cukup usang. Tapi tetap saja, menemukan apa yang benar-benar Anda butuhkan seringkali sulit. Semua menawarkan skrip yang sangat canggih, dengan banyak fungsi tambahan. Dan biasanya ini adalah plugin yang sudah dikompresi.

Jadi saya akan menawarkan saya Opsi alternatif Korsel jQuery yang sangat sederhana.

Ini dapat digunakan sebagai carousel gambar, carousel berita atau carousel konten lainnya =)

Satu-satunya lonceng dan peluit kecil yang saya izinkan adalah bayangan di blok korsel.

UPD: 07/06/2014

Ini akan terlihat seperti ini:
Unduh DEMO

Strukturnya akan terlihat seperti ini:

Mari kita jelaskan gayanya:

Carousel ( max-width: 1080px; /* lebar seluruh blok */ margin: 50px auto; width:100%; ) konten di luar area utama */ position:relative; ) .carousel-items ( width: 10000px; / * atur lebar yang lebih besar untuk set item */ position: relative; /* posisikan kotak relatif terhadap area carousel utama */ ) .carousel -block ( float: left; /* sejajarkan semua elemen carousel */ width: 250px; /* atur lebar tiap elemen */ padding: 10px 10px 10px 0px; /* buat padding agar elemen tidak menyatu */ ) .carousel -block img( display:block; ) /**** ********** TOMBOL ***********/ .carousel-button-left a, .carousel-button-right a( width: 25px; height: 36px; position: relative ; atas: 80px; kursor: penunjuk; dekorasi teks: tidak ada; ) .carousel-button-left a( float: left; background: url(../images/carousel-left.png); ) .carousel-button- kanan a (mengambang: Baik; latar belakang: url(../images/carousel-right.png); ) /*************** SHADOW ***********/ .shadow( bayangan kotak: 0px 0px 10px rgba(0, 0, 0, 0.6) ; )

Dan akhirnya, cara kerjanya:

//Menangani panah kanan klik $(document).on("click", ".carousel-button-right",function()( var carusel = $(this).parents(".carousel"); right_carusel(carusel ); kembali salah; )); //Menangani panah kiri klik $(document).on("click",".carousel-button-left",function()( var carusel = $(this).parents(".carousel"); left_carusel(carusel ) ; kembali salah; )); function left_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find(".carousel-items .carousel-block").eq(- 1).clone().prependTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items").css(("kiri":"-" +block_width+"px")); $(carusel).find(".carousel-items .carousel-block").eq(-1).remove(); $(carusel).find(".carousel-items" ).animate((kiri: "0px"), 200); ) function right_carusel(carusel)( var block_width = $(carusel).find(".carousel-block").outerWidth(); $(carusel).find ("".carousel-items").animate((kiri: "-"+ block_width +"px"), 200, function()( $(carusel).find(".carousel-items .carousel-block") . eq(0).clone().appendTo($(carusel).find(".carousel-items")); $(carusel).find(".carousel-items .carousel-block").eq(0 ) .remove(); $(carusel).find(".carousel-items").css(("left":"0px")); )); ) $(function() ( //Batalkan komentar pada baris di bawah ini untuk mengaktifkan carousel auto scroll auto_right(".carousel:first"); )) // Auto fungsi pengguliran dinamis auto_right(carusel)( setInterval(function()( if (!$(carusel).is(".hover")) right_carusel(carusel); ), 3000) ) // Melayang di atas carousel $(document).on("mouseenter", ".carousel", function()($(this).addClass("hover"))) // Menghapus kursor dari carousel $(document).on("mouseleave", ".carousel", function()($(this).removeClass("hover")))

Dengan demikian, bayangan dapat dihilangkan. Dan untuk menggunakannya, Anda hanya perlu mengganti ukuran blok utama dan blok "scrolling" bersarang di css. Juga sangat mudah untuk mengulang proses ini sehingga menggulir secara otomatis (dalam kasus ini, cukup batalkan komentar pada panggilan fungsi auto_right). Artinya, Anda dapat membuat semua yang Anda butuhkan dari galeri sederhana ini dalam kerangka tugas!

Perlu juga dicatat bahwa contoh ini adaptif, yaitu ukuran korsel menyesuaikan dengan ukuran layar dan akan ditampilkan dengan benar baik di layar komputer atau laptop, dan di layar tablet dan smartphone.

1. korsel jQuery "clickCarousel"

Blokir dengan menggulir pengumuman berita. Panah kiri/kanan digunakan untuk menggulir blok. Ada korsel di arsip dalam dua gaya: terang dan gelap.

1. korsel jQuery, plugin carouFredSel

Korsel gambar jQuery yang rapi dan segar.

4. Plugin jQuery: Elastislide Carousel

5. Plugin "TinyCarousel"

Slider konten hebat dalam bentuk carousel gambar menggunakan jQuery. Halaman demo menjelaskan cara mengikat korsel ini ke situs Anda.

Plugin "Slider Kit", korsel ringan dengan cara yang berbeda menggulir.

7. korsel javascript

8. plugin jQuery "Efek Navigasi Grid"

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

9. Korsel mudah

10. Korsel blok Paginate yang mudah

plugin jQuery "Paginasi Mudah". Setiap blok persegi panjang adalah item daftar li biasa, dan jika ada lebih dari tiga item, maka untuk melihat semuanya, Anda perlu menggunakan navigasi seperti penggeser (menggunakan panah maju dan mundur dan menggunakan tombol navigasi di bagian bawah).

11. Rotator vertikal "Ticker Vertikal"

rotator vertikal jQuery: pengguliran otomatis konten pada halaman. Tombol navigasi disediakan, serta kemampuan untuk menghentikan rotasi dan memulainya lagi. Saat Anda menggerakkan kursor mouse, gerakan berhenti. Pada tingkat markup HTML, kotak yang dapat digulir diwakili oleh item daftar li biasa.

12. area yang dapat digulir javascript css

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

13. Plugin jQuery Smooth Div Scroll

Plugin untuk mengimplementasikan pengguliran horizontal konten di area tertentu. Saat Anda menggerakkan kursor mouse ke tepi kiri atau kanan area, pengguliran dimulai.

Navigasi antara slide dengan konten dapat dilakukan dengan menggunakan panah atau dengan mengklik thumbnail. Di bawah ini ada tombol "Tampilkan" yang memungkinkan Anda untuk menyembunyikan / menampilkan thumbnail atau Deskripsi lengkap menggeser.

15. Rotator konten "Korsel Konten Melingkar"

17. Penggulung

Blok dengan scroller yang muncul saat Anda mengarahkan kursor ke kursor. Anda dapat menggulir konten menggunakan bilah gulir dan roda mouse.

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

19. Penggeser yang luar biasa

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

20. Blokir rotasi menggunakan jQuery

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

Plugin pengguliran konten, misalnya, dapat digunakan untuk menampilkan berita terbaru atau menampilkan selebaran Twitter di situs.

22. Blok dinamis "Ulasan pelanggan"

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

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

26. korsel javascript "ImageFlow"

Gambar mudah digulir dengan roda mouse.

27. Menggulir konten

Blok kompak dengan pengumuman materi terbaru di situs atau berita. Kolom kiri menampilkan daftar paginasi dari pengumuman singkat dari berita terbaru. Saat Anda memilih salah satunya, kolom kanan menampilkan lebih dari Detil Deskripsi dan tautan untuk membaca teks lengkap publikasi. Diimplementasikan dengan jQuery.

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

33. Menggulir konten, plugin Mootools "Scrollbar"

Pengguliran dilakukan menggunakan bilah gulir dan roda mouse.