Responsif, atau, jika Anda suka, desain web responsif sekarang bukan sekadar tren desain lain, ini sudah menjadi semacam standar pengembangan situs web yang memastikan universalitas situs web, persepsi visual yang harmonis di layar berbagai perangkat pengguna. Baru-baru ini, ketika mengembangkan template responsif, saya harus menghadapi berbagai kesulitan dalam mengintegrasikan bilah geser dan galeri gambar tertentu tanpa merusak gaya desain umum. Sekarang semuanya jauh lebih sederhana, ada sejumlah besar solusi siap pakai di jaringan dan yang sangat menyenangkan, kebanyakan dari mereka tersedia secara bebas, open source.

Karena berbagai alat yang ditawarkan, saya telah menyusun ikhtisar kecil tentang perkembangan paling menonjol dalam adaptif penggeser jQuery gambar terbaru dan didistribusikan tanpa batasan apa pun, mis. benar-benar gratis.

Wow slider

Slider gambar jQuery responsif dengan set yang bagus efek visual(belokan, keberangkatan, blur, spiral, tirai, dll ...) dan banyak template yang sudah jadi. Dengan wizard penyisipan halaman bawaan WOW Slider, Anda dapat dengan mudah dan mudah membuat tayangan slide yang menakjubkan dalam hitungan menit. Situs web pengembang berisi semua dokumentasi yang diperlukan untuk menyiapkan dan menggunakan plugin dalam bahasa Rusia, contoh langsung yang sangat baik dari pekerjaan plugin. Juga tersedia untuk diunduh secara terpisah plugin wordpress dan modul untuk Joomla. Saya yakin banyak yang akan menyukai slider yang luar biasa ini, baik pemula maupun webmaster berpengalaman.

HiSlider

HiSlider - HTML5, penggeser Jquery, dan galeri gambar, tentu saja plugin gratis untuk penggunaan pribadi di situs yang menjalankan sistem populer - WordPress, Joomla, Drupal. Dengan bantuan alat sederhana namun cukup fungsional ini, Anda dapat dengan mudah membuat tayangan slide yang menakjubkan dan jelas, presentasi yang efektif, dan pengumuman pesan baru di halaman situs Anda. Beberapa template dan skin yang sudah jadi untuk slider, efek transisi (perubahan) konten yang menakjubkan, output dari berbagai konten multimedia: video dari YouTube dan Vimeo, pengaturan pengguna yang fleksibel, dll.

Penggeser Nivo

Nivo Slider adalah yang lama, terkenal bagi semua orang di subjek, salah satu penggeser gambar yang paling indah dan mudah digunakan. Plugin jQuery Nivo Slider gratis untuk diunduh dan digunakan, didistribusikan di bawah lisensi MIT. Ada juga plugin terpisah untuk WordPress, tetapi sayangnya sudah dibayar dan Anda harus membayar $29 untuk satu lisensi. Lebih baik melakukan sedikit keajaiban dengan file tema WP dan melampirkan versi jQuery gratis dari plugin Nivo Slider ke blog Anda, karena ada cukup informasi tentang cara melakukan ini di internet.
Adapun fungsionalitas, semuanya baik-baik saja dengan itu. Untuk pekerjaan, perpustakaan jQuery v1.7 + digunakan, efek transisi yang indah, pengaturan yang sederhana dan sangat fleksibel, tata letak responsif, pemotongan gambar otomatis, dan banyak lagi.

Ide slider terinspirasi oleh para pengembang yang terkenal dengan gaya presentasi produk Apple, di mana beberapa objek kecil (gambar) berubah dengan mengklik kategori yang dipilih dengan efek animasi sederhana. Codrops memberi Anda tutorial terperinci tentang cara membuat bilah geser ini, tata letak HTML lengkap, seperangkat aturan CSS dan plugin jQuery yang dapat dieksekusi, serta contoh langsung yang luar biasa menggunakan bilah geser.

Penggeser Celah

Slider gambar layar penuh di jQuery dan CSS3 + tutorial terperinci tentang mengintegrasikan plugin ke halaman situs. Idenya adalah untuk membuka slide saat ini dengan konten tertentu saat menavigasi ke konten berikutnya atau sebelumnya. DENGAN menggunakan jQuery dan animasi CSS Anda dapat membuat transisi unik antar slide. Tata letak slider responsif memastikan tampilannya sama bagusnya di layar jenis yang berbeda perangkat pengguna.

Penggeser Konten Elastis

Penggeser konten, yang secara otomatis menyesuaikan lebar dan tinggi tergantung pada ukuran wadah induk di mana ia berada. Cukup sederhana dalam eksekusi dan fleksibel dalam pengaturan slider yang didukung oleh jQuery, dengan navigasi di bagian bawah, ketika ukuran layar diubah ke bawah, navigasi ditampilkan dalam bentuk ikon. Dokumentasi yang sangat rinci (tutorial tentang pembuatan) dan contoh penggunaan langsung.

Penggeser Tumpukan 3D

Slider eksperimental yang menampilkan gambar dengan transisi dari bidang 3D. Gambar dibagi menjadi dua tumpukan horizontal, dengan bantuan panah navigasi, perubahan dan transisi setiap gambar berikutnya ke status tampilan dilakukan. Secara umum, tidak ada yang istimewa, tetapi ide dan teknik eksekusinya sendiri cukup menarik.

Slider gambar jQuery layar penuh, 100% responsif dan sangat sederhana. Slider didasarkan pada transisi CSS (properti transisi) dalam hubungannya dengan keajaiban jQuery. Lebar maksimum diatur ke 100% secara default, sehingga ukuran gambar akan berubah tergantung pada perubahan ukuran layar. Tidak ada efek animasi khusus dan kelezatan dalam desain, semuanya sederhana, dan diasah untuk kelancaran operasi.

Slide minimal

Namanya berbicara untuk dirinya sendiri, ini mungkin salah satu slider gambar jQuery paling ringan dan paling minimalis yang pernah saya temui (plugin 1kb). ResponsiveSlides.js adalah plugin jQuery kecil yang membuat tayangan slide menggunakan elemen di dalam wadah. Bekerja dengan berbagai browser, termasuk semua versi IE, rem kemajuan terkenal, dari IE6 dan lebih tinggi. Pekerjaan menggunakan transisi CSS3 dalam hubungannya dengan javascript, untuk keandalan. Markup sederhana menggunakan daftar tidak berurutan, menyesuaikan transisi dan pengaturan waktu, otomatis dan kontrol manual beralih slide, serta dukungan untuk beberapa tayangan slide sekaligus. Inilah "anak" yang lucu.

Kamera

Kamera - jQuery gratis plugin untuk mengatur tayangan slide di halaman situs, slider ringan dengan banyak efek transisi, dengan tata letak responsif 100%, dan sangat pengaturan sederhana... Sangat pas di layar perangkat pengguna mana pun (monitor PC, tablet, ponsel cerdas, dan Handphone). Kemampuan untuk mendemonstrasikan video yang disematkan. Perubahan otomatis slide dan kontrol manual menggunakan tombol dan blok gambar mini. Galeri gambar yang hampir lengkap dalam desain yang ringkas.

bxSlider jQuery

Slider jQuery responsif lainnya yang cukup sederhana. Konten, video, gambar, teks, dan elemen lainnya dapat ditempatkan di slide. Dukungan diperpanjang Layar sentuh... Menggunakan animasi transisi CSS. Sejumlah besar variasi presentasi tayangan slide dan galeri gambar ringkas. Kontrol otomatis dan manual. Beralih slide menggunakan tombol dan dengan memilih thumbnail. Ukuran kecil dari file sumber, sangat mudah untuk dikonfigurasi dan diimplementasikan.

FlexSlider 2

FlexSlider 2 - Versi terbaru penggeser dengan nama yang sama, dengan respons yang lebih baik, pengecilan skrip, dan meminimalkan tata letak ulang/penggambaran ulang. Plugin ini mencakup slider dasar, kontrol slide dengan thumbnail, panah kiri-kanan bawaan, dan bilah navigasi bawah dalam bentuk tombol. Kemampuan untuk menampilkan video dalam slide (vimeo), pengaturan parameter yang fleksibel (transisi, dekorasi, interval waktu), tata letak yang sepenuhnya responsif.

galeri

Plugin jQuery responsif yang terkenal dan cukup populer untuk membuat galeri dan slider gambar berkualitas tinggi. Antarmuka penggeser, berkat panel kontrolnya yang secara visual menyerupai pemutar video yang sudah dikenal, plugin ini menyertakan beberapa tema berbeda. Dukungan untuk video dan gambar yang disematkan dari layanan populer: Flickr, Vimeo, YouTube, dan lainnya. Dokumentasi terperinci pada pengaturan dan penggunaan.

blueberry

Slider gambar jQuery gratis sederhana, tanpa lonceng dan peluit yang ditulis khusus untuk desain web responsif. Blueberry adalah plugin jQuery open source eksperimental. Desain minimalis, tanpa efek, hanya gambar pop-up mulus yang saling menggantikan setelah jangka waktu tertentu. Semuanya sangat sederhana, atur, colokkan, dan buka ...

jQuery popeye 2.1

Slider gambar jQuery yang sangat ringkas dengan elemen Lightbox. Karena ukurannya yang fleksibel, sangat mudah untuk disematkan ke dalam wadah apa pun, ke dalam satu entri dalam bentuk thumbnail, ketika Anda mengarahkan kursor mouse atau mengkliknya, lightbox dengan gambar dan kontrol yang diperbesar akan diaktifkan. Lebih mudah untuk menempatkan penggeser seperti itu di bilah sisi untuk menyajikan produk atau pengumuman berita. Solusi yang sangat baik untuk situs dengan sejumlah besar informasi.

Urutan

Slider responsif gratis dengan transisi CSS3 tingkat lanjut. Gaya minimalis, 3 tema desain, Setiap bingkai digeser secara horizontal, muncul di tengah, gambar mengarah ke kiri, tanda tangan di kanan, gambar mini digandakan di sudut kanan bawah. Pagination presentasi produk untuk dilihat di setiap frame. Kontrol juga mencakup tombol mundur dan maju. Dukungan oleh semua browser modern.

Geser

Slider gambar yang sangat sederhana baik dari segi fungsi dan pengaturan, dari pengaturan ada perubahan kecepatan mengubah slide, menghubungkan mode manual (tombol kontrol diaktifkan), tayangan slide berkelanjutan. Slider ini memiliki hak untuk menjadi dan itu menarik saya hanya karena faktanya, saya tidak menemukan sesuatu yang sangat menarik dalam perkembangan ini, mungkin saya terlihat buruk)))

Penggeser Gambar Responsif

Penggeser gambar adaptif yang begitu indah dari Vladimir Kudinov dan rekan-rekannya. Alat yang solid dan dikembangkan dengan baik, dilengkapi dengan contoh ilustratif dan instruksi terperinci pada pembuatan, instalasi dan penggunaan. Desain adaptif, tombol dan panah bagus berwarna hijau, semuanya cukup bagus dan tenang, tanpa tekanan.

Pemotongan Pecahan

Plugin slider paralaks jQuery gratis untuk gambar dan slide teks. Animasi slide memiliki beberapa nilai tampilan dengan kontrol penuh di setiap pengaturan waktu dan animasi. Kemampuan untuk menganimasikan beberapa elemen pada slide sekaligus. Anda dapat menginstal metode yang berbeda animasi, slide menghilang, atau transisi dari arah tertentu. Tampilan otomatis dan kontrol manual dengan panah navigasi yang muncul saat Anda mengarahkan kursor ke gambar. 10 macam efek animasi tampilan slide dan masih banyak lagi...

Ulasannya ternyata cukup luas, tetapi tidak cukup informatif karena banyaknya produk yang dipertimbangkan. Semua detail dan deskripsi terperinci Kegunaan dari plugin tertentu, Anda dapat mengetahuinya langsung di halaman pengembang. Saya hanya bisa berharap bahwa seseorang telah mempermudah seseorang untuk menemukan alat yang sangat diperlukan untuk membuat slider gambar berwarna di halaman situs mereka.

Pernah bertanya-tanya apakah akan menyenangkan bisa bekerja dengan template Russified? Hanya berpikir sebentar. Tidak ada waktu yang terbuang untuk bekerja dengan template berbahasa Inggris. Kami segera menyenangkan Anda dengan fakta bahwa Anda sekarang dapat menemukannya di pasar TemplateMonster. Teks untuk masing-masing dari mereka ditulis dengan tangan. Dan, tentu saja, semua solusi yang sudah jadi sangat mudah digunakan.

Dengan segala hormat, Andrew

Beberapa waktu lalu, saya mulai menguasai jQuery. Saya rasa semua orang tahu bahwa ini adalah nama perpustakaan paling populer untuk mengembangkan dan membuat skrip (script) di JavaScript. Dengan bantuannya, sangat mudah untuk membuat elemen situs web yang efektif dan interaktif.

Pada artikel ini, saya ingin memberi tahu Anda cara membuat slider universal sederhana menggunakan jQuery. Bahkan, jaringannya sangat sejumlah besar berbagai slider siap pakai yang terkadang terlihat sangat menggoda, dan cukup fungsional, tetapi kami akan membuatnya dari awal.

Jadi, fitur apa dari slider jQuery kami (yang saya beri nama HWSlider) yang dapat dicatat?

• Kemudahan penggunaan dan desain - Saya ingin membuat skrip sederhana tanpa lonceng dan peluit, oleh karena itu, saya tidak menggunakan animasi di CSS3, dan kodenya ternyata sangat fleksibel dan dapat dimengerti.
• Kemampuan untuk menyisipkan gambar dan kode HTML apa pun ke dalam slide.
• Kemampuan untuk menggulir slide secara berurutan (maju - mundur) dan memilih setiap slide (1,2,3,4 ...)
• Tautan yang dibuat secara otomatis (sebelumnya - berikutnya, dan dengan nomor slide). Anda hanya perlu memasukkan jumlah div yang diperlukan, dan sisanya akan dihitung dengan sendirinya. Nah, dapat dicatat bahwa jumlah slide tidak terbatas.

Script ini kompatibel dengan semua browser modern: IE, Opera, Firefox, Safari, Chrome (karena slider tidak menggunakan CSS3).

Mari kita mulai dengan markup HTML. Ke tempat yang tepat halaman html atau template perlu dimasukkan.

Semuanya sederhana di sini, seperti yang Anda lihat, Anda dapat memasukkan slide sebanyak yang Anda inginkan dengan membuat div baru. Apa pun bisa dimasukkan di dalamnya. kode html, misalnya gambar atau blok teks. Jangan lupa untuk menyertakan perpustakaan jQuery itu sendiri bersama dengan semua skrip js -. Jika Anda tidak tahu caranya, lihat contohnya.

# slider-wrap (/ * Slider dan bungkus tombol * / lebar: 660px;) #slider (/ * Bungkus slider * / lebar: 640px; tinggi: 360px; luapan: tersembunyi; batas: #eee solid 10px; posisi: relatif; ) .slide (/ * Slide * / lebar: 100%; tinggi: 100%;) .sli-links (/ * Tombol slide * / margin-top: 10px; text-align: center;) .sli-links.control -slide (margin: 2px; tampilan: inline-block; lebar: 16px; tinggi: 16px; overflow: hidden; text-indent: -9999px; background: url (radioBg.png) center bottom no-repeat;) .sli - link .control-slide: hover (kursor: pointer; background-position: center center;) .sli-links .control-slide.active (background-position: center top;) #prewbutton, #nextbutton (/ * Link " Next dan Sebelumnya * / tampilan: blok; lebar: 15px; tinggi: 100%; posisi: absolut; atas: 0; luapan: tersembunyi; indentasi teks: -999px; latar belakang: url (arrowBg.png) kiri tengah tanpa pengulangan; opacity: 0.8; indeks-z: 3; garis besar: tidak ada! penting;) #prewbutton (kiri: 10px;) #nextbutton (kanan: 10px; latar belakang : url (arrowBg.png) kanan tengah no-repeat;) #prewbutton: hover, #nextbutton: hover (opacity: 1;)

Mari kita lihat lebih dekat. Pertama, kami memberikan kotak utama dengan id "slider-wrap" lebar yang diinginkan. Karena semua blok lain dimasukkan ke dalamnya, ketinggiannya tidak dapat diatur, itu akan tergantung pada apa yang ada di dalamnya. Maka kita perlu mengatur dimensi wadah tempat slide akan ditempatkan. Ini adalah #slider. Mari kita beri lebar dan tinggi, serta, misalnya, batas 10 piksel. Di sini lebarnya adalah 640px yang lebih kecil dari lebar induknya saat kita menambahkan batas lebar 10px ke kanan dan kiri. Lebar div ini juga mempengaruhi lebar slide itu sendiri (.slide).

Dan satu hal terakhir: kita perlu memastikan untuk mengatur posisi: relatif untuk wadah slide, karena slide di dalamnya dengan posisi absolut. Untuk slide itu sendiri, hanya lebar dan tinggi yang ditentukan dalam CSS. Properti lainnya sudah diatur dalam skrip jQuery.

Pemilih .sli-links adalah blok yang akan berisi tombol untuk menavigasi ke slide yang diperlukan. Tombol-tombol ini adalah elemen sederhana dari formulir kamar, yang akan dimasukkan dalam jumlah yang diperlukan secara otomatis, bersama dengan sli-link induknya. Untuk tombol, kami mengatur pemandangan indah, yaitu, kami membuat setiap tombol persegi, menyelaraskan semuanya ke tengah, dan juga, berkat overflow: hidden dan text-indent: -9999px, hapus teks, hanya menyisakan ikon latar belakang, yang juga berubah saat kursor melayang atas elemen ini. Untuk kenyamanan, saya menggunakan sprite, yang mengurangi jumlah gambar.

Kemudian dibuat tombol aktif... Kami hanya mengubah posisi latar belakang. Kemudian kita akan mendesain ulang link untuk menuju slide berikutnya dan sebelumnya. Anda dapat memberi mereka dekorasi apa pun, seperti kancing. Tautan ini dimasukkan secara otomatis di dalam #slider. Tetapi untuk menunjukkannya, saya memberi mereka posisi absolut dan lapisan atas (indeks-z: 3) sehingga mereka muncul di atas slide. Saya pikir semuanya jelas dan sederhana dengan CSS: Anda dapat mengubah hampir semua properti untuk mendesain slider sesuai kebutuhan.

Sekarang mari kita lihat skenario itu sendiri:

Var hwSlideSpeed ​​​​= 700; var hwTimeOut = 3000; var hwNeedLinks = benar; $ (dokumen) .ready (fungsi (e) ($ (". slide").css (("posisi": "absolut", "atas": "0", "kiri": "0")). () .eq (0) .show(); var slideNum = 0; var slideTime; slideCount = $("# slider .slide").size(); var animSlide = function (panah) (clearTimeout (slideTime); $ (".slide"). eq (slideNum) .fadeOut (hwSlideSpeed); if (panah == "berikutnya") (if (slideNum == (slideCount-1)) (slideNum = 0;) else (slideNum ++) ) else if (panah == "prew") (if (slideNum == 0) (slideNum = slideCount-1;) else (slideNum- = 1)) else (slideNum = panah;) $ (". slide"). eq ( slideNum) .fadeIn (hwSlideSpeed, rotator); $ (". control-slide.active"). removeClass ("active"); $ (". control-slide"). eq (slideNum) .addClass ("aktif ") ;) if (hwNeedLinks) (var $ linkArrow = $ ("") .prependTo ("# slider"); $ ("# tombol berikutnya").klik (fungsi () (animSlide ("berikutnya");)) $( "#prewbutton"). klik (fungsi () (animSlide ("prew");))) var $ adderSpan = ""; $ (". slide"). masing-masing (fungsi (indeks) ($ adderSpan + = " "+ indeks +""; }); $("

Pertama, pengaturan disimpan dalam variabel: hwSlideSpeed ​​​​- kecepatan slide, hwTimeOut - waktu setelah perubahan slide otomatis terjadi, hwNeedLinks - mengontrol tautan "Berikutnya" dan "Sebelumnya" - jika nilainya ini variabel benar, maka tautan ini akan ditampilkan, dan jika false , maka tautan tersebut tidak akan ditampilkan (seperti pada halaman rumah blog saya).

Selanjutnya, kami menginstal yang diperlukan properti CSS untuk slide menggunakan metode .css(). Kami meletakkan blok dengan slide di atas satu sama lain menggunakan pemosisian absolut, lalu menyembunyikan semuanya dengan. sembunyikan (), lalu tampilkan hanya yang pertama. Variabel slideNum adalah jumlah slide aktif, yaitu penghitung.

Logika utama di balik slider jQuery kami adalah fungsi animSlide. Dibutuhkan satu parameter. Jika kita meneruskan string "berikutnya" atau "praw" ke sana, maka operator kondisional akan dipicu dan slide berikutnya atau sebelumnya akan ditampilkan, masing-masing. Jika kita mengirim angka sebagai nilai, maka angka ini akan menjadi slide aktif dan akan ditampilkan.

Jadi fungsi ini menyembunyikan div saat ini, menghitung yang baru dan menunjukkannya.

Perhatikan bahwa metode .fadeIn (), yang membuat slide aktif terlihat, diberikan argumen kedua. Inilah yang disebut fungsi panggilan balik. Ini dijalankan ketika slide ditampilkan sepenuhnya. DI DALAM kasus ini ini untuk menyediakan pengguliran slide secara otomatis. Fungsi rotator, yang didefinisikan di bawah, memanggil lagi fungsi animSlide untuk pindah ke slide berikutnya pada interval yang kita butuhkan: kita mendapatkan penutupan yang menyediakan pengguliran konstan.

Semuanya berfungsi dengan baik, tetapi kita perlu menghentikan eksekusi otomatis jika pengguna memindahkan kursor ke penggeser atau menekan tombol. Variabel jeda telah dibuat untuk ini. Jika nilainya positif - benar, maka beralih otomatis tidak akan. Dengan metode .hover (), kita tentukan: hapus timer jika sedang berjalan - clearTimeout (slideTime), dan atur jeda = true. Dan setelah memindahkan kursor mati, matikan jeda dan mulai penutupan rotator ().

Selain itu, kita perlu membuat elemen baru di halaman dan menempatkannya di tempat yang tepat. Menggunakan setiap loop () untuk setiap slide (div dengan class.slide), buat elemen span di dalamnya akan ada nomor - nomor slide. Angka ini digunakan dalam fungsi animasi untuk melompat ke slide dengan angka tersebut. Mari kita bungkus semuanya dalam div dengan kelas yang diperlukan, dan sebagai hasilnya, kita mendapatkan markup berikut:

Tampaknya, mengapa kita membuat markup di dalam skrip, dan bukan di kode HTML?. Faktanya adalah, misalnya, jika pengguna menonaktifkan skrip, dia tidak akan melihat elemen yang tidak berfungsi, dan ini tidak akan membingungkannya. Ini juga menyederhanakan kode, yang bagus untuk SEO.

Hasilnya, markup penggeser akan terlihat seperti ini (saya menggunakan gambar sebagai slide dan memasang 5 buah):

< >

0 1 2 3

Di bawah ini Anda dapat melihat bagaimana slider jQuery kami bekerja di halaman demo, dan mengunduh semua sumber yang diperlukan.

Akhirnya, beberapa poin tentang mengintegrasikan slider ini dengan Drupal. Anda dapat menambahkan kode ini ke file template, misalnya, page.tpl.php, dan melampirkan skrip di file js terpisah ke tema. Jquery di Drupal diaktifkan secara default, tetapi berfungsi dalam mode quirks (). Ada dua pilihan untuk perbaikan. Atau bungkus seluruh kode js:

(fungsi ($) (// Semua kode Anda ...)) (jQuery);

atau ganti karakter $ di seluruh skrip dengan jQuery. Seperti ini:

JQuery (dokumen) .ready (fungsi (e) (jQuery (". Slide").Css (("posisi": "absolut", "atas": "0", "kiri": "0")). () .eq (0) .show(); var slideNum = 0; var slideTime; slideCount = jQuery ("#slider .slide").size(); var animSlide = function (panah) (// dll. ...

Contoh sudah menerapkan metode pertama.

Terima kasih sudah membaca! Tinggalkan komentar, datang lagi. Anda juga dapat berlangganan RSS untuk menjadi yang pertama menerima pembaruan blog!

Ditambahkan: Itu tidak semua. Baca terus. Di sana kami akan menambahkan fitur baru ke skrip ini.

1. Tampilan slide jQuery yang luar biasa

Sebuah slideshow besar yang efektif menggunakan teknologi jQuery.

2. plugin jQuery "Scale Carousel"

Tampilan slide yang dapat diskalakan menggunakan jQuery. Anda akan dapat mengatur dimensi untuk tayangan slide yang paling sesuai untuk Anda.

3. plugin jQuery "slideJS"

Slider gambar dengan deskripsi teks.

4. Plugin "JSliderNews"

5.Slider jQuery CSS3

Saat Anda mengarahkan kursor ke panah navigasi, gambar mini melingkar dari slide berikutnya akan muncul.

6. Slider "Siklus Presentasi" jQuery yang bagus

slider jQuery dengan indikator pemuatan gambar. Ada perubahan slide secara otomatis.

7. plugin jQuery "Parallax Slider"

Slider dengan efek latar belakang 3D. Sorotan slider ini adalah pada gerakan latar belakang, yang terdiri dari beberapa lapisan, yang masing-masing bergulir dengan kecepatan yang berbeda... Hasilnya adalah tiruan dari efek volumetrik. Kelihatannya sangat bagus, Anda bisa melihatnya sendiri. Efeknya ditampilkan lebih lancar di browser seperti: Opera, Google chrome, IE.

8. Slider jQuery segar dan ringan "bxSlider 3.0"

Pada halaman demo di bagian "contoh" Anda dapat menemukan tautan ke semua opsi yang memungkinkan menggunakan plugin ini.

9.jQuery Image Slider, Plugin "slideJS"

Slider jQuery yang bergaya tentu akan dapat menghiasi proyek Anda.

10. Slideshow plugin jQuery "Easy Slides" v1.1

Plugin jQuery yang mudah digunakan untuk membuat tayangan slide.

11. Plugin "jQuery Slidy"

Plugin jQuery ringan dalam berbagai desain. Ada perubahan slide secara otomatis.

Galeri 12.jQuery CSS dengan pengubah slide otomatis

Jika pengunjung tidak mengklik panah "Maju" atau "Kembali" dalam jangka waktu tertentu, galeri akan mulai bergulir secara otomatis.

13. jQuery Nivo Slider

Plugin ringan berkualitas sangat profesional dengan kode yang valid... Ada banyak efek transisi slide yang berbeda.

14. slider jQuery "MobilySlider""

Slider segar. slider jQuery dengan berbagai efek perubahan gambar.

15. Plugin jQuery Slider²

Slider ringan dengan perubahan slide otomatis.

16. Penggeser javascript segar

Slider dengan perubahan gambar otomatis.

Plugin untuk mengimplementasikan tayangan slide dengan perubahan slide otomatis. Dimungkinkan untuk mengontrol tampilan menggunakan gambar mini.

jQuery CSS penggeser gambar menggunakan plugin NivoSlider.

19. slider jQuery jShowOff

Plugin untuk rotasi konten. Tiga kasus penggunaan: tanpa navigasi (dengan perubahan otomatis dalam format tayangan slide), dengan navigasi dalam bentuk tombol, dengan navigasi dalam bentuk thumbnail.

20. Plugin "Portofolio Efek Rana"

Plugin jQuery segar untuk portofolio fotografi. Galeri memiliki efek menarik untuk mengubah gambar. Foto saling mengikuti dengan efek yang mirip dengan pengoperasian rana lensa.

21. Slider CSS javascript ringan "TinySlider 2"

Menerapkan penggeser gambar dengan menggunakan javascript dan CSS.

22. Penggeser luar biasa "Tinycircleslider"

Slider bulat bergaya. Transisi antar gambar dilakukan dengan menyeret sepanjang keliling slider dalam bentuk lingkaran merah. Akan sangat cocok dengan situs Anda jika Anda menggunakan elemen bulat dalam desain Anda.

23. penggeser gambar jQuery

Kit Penggeser Ringan. Slider disajikan dalam versi yang berbeda: vertikal dan horizontal. Berbagai jenis navigasi antar gambar juga diterapkan: menggunakan tombol "Maju" dan "Kembali", menggunakan roda mouse, menggunakan klik mouse pada slide.

24. Galeri dengan miniatur "Slider Kit"

Galeri "Slider Kit". Pengguliran gambar mini dilakukan secara vertikal dan horizontal. Transisi antar gambar dilakukan dengan menggunakan: roda mouse, klik mouse atau mengarahkan kursor ke thumbnail.

25. Slider Konten jQuery Slider Kit

Slider konten vertikal dan horizontal JQuery.

26. Slideshow jQuery Slider Kit

Slideshow dengan perubahan slide otomatis.

27. Slider CSS3 javascript profesional yang ringan

Slider jQuery dan CSS3 yang rapi dibuat pada tahun 2011.

tayangan slide gambar mini jQuery.

29. Tampilan slide jQuery sederhana

Slideshow dengan tombol navigasi.

30. Tampilan slide jQuery "Skitter" yang mengagumkan

plugin jQuery "Skitter" untuk membuat tayangan slide yang menakjubkan. Plugin ini mendukung 22 (!) Berbagai macam efek animasi saat mengubah gambar. Dapat bekerja dengan dua pilihan navigasi slide: nomor slide dan thumbnail. Pastikan untuk menonton demo, temuan berkualitas sangat tinggi. Teknologi yang digunakan: CSS, HTML, jQuery, PHP.

31. Tampilan slide "Canggung"

Tampilan slide fungsional. Dalam bentuk slide dapat berupa: gambar sederhana, gambar dengan keterangan, gambar dengan tooltips, klip video. Anda dapat menavigasi menggunakan panah, tautan nomor slide, dan tombol kiri / kanan pada keyboard Anda. Tampilan slide dibuat dalam beberapa versi: dengan dan tanpa miniatur. Untuk melihat semua opsi, ikuti tautan Demo # 1 - Demo # 6 yang terletak di bagian atas halaman demo.

Desain penggeser gambar yang sangat orisinal, mengingatkan pada kipas. Perubahan slide animasi. Navigasi antar gambar dilakukan dengan menggunakan panah. Ada juga pergantian otomatis, yang dapat dihidupkan dan dimatikan menggunakan tombol Play / Pause yang terletak di bagian atas.

Slider jQuery animasi. Gambar latar belakang secara otomatis diskalakan saat jendela browser diubah ukurannya. Sebuah blok dengan deskripsi muncul untuk setiap gambar.

34. Penggeser "Flux Slider" di jQuery dan CSS3

Slider jQuery baru. Beberapa efek animasi keren saat mengganti slide.

35. plugin jQuery jSwitch

Galeri jQuery animasi.

Tampilan slide yang mudah di jQuery dengan perubahan slide otomatis.

37. Versi baru plugin "SlideDeck 1.2.2"

Penggeser konten profesional. Ada opsi dengan perubahan slide otomatis, serta opsi menggunakan roda mouse untuk berpindah antar slide.

38. jQuery Sudo Slider

Slider gambar jQuery ringan. Ada banyak opsi implementasi: perubahan gambar horizontal dan vertikal, dengan dan tanpa referensi ke nomor slide, dengan dan tanpa keterangan gambar, berbagai efek perubahan gambar. Ada fungsi perubahan slide otomatis. Tautan ke semua contoh implementasi dapat ditemukan di halaman demo.

39. slideshow jQuery CSS33

Slideshow thumbnail mendukung mode perubahan slide otomatis.

40. jQuery Flux Slider

Slider dengan banyak efek untuk mengubah gambar.

41. Penggeser jQuery sederhana

Slider gambar jQuery yang bergaya.

Kami membutuhkan penggeser sederhana dengan pengguliran otomatis. Mari kita mulai...

Deskripsi pekerjaan slider.

Slide akan berbaris dan digulir setelah jangka waktu tertentu.

Bingkai merah menunjukkan bagian slider yang terlihat.

Di akhir penggeser, Anda perlu menduplikasi slide pertama. Ini diperlukan untuk memastikan pengguliran dari slide ketiga ke slide pertama. Anda juga perlu menambahkan slide terakhir ke awal untuk dapat menggulir ke arah sebaliknya dari slide pertama ke slide ketiga. Ditampilkan di bawah ini adalah cara kerja penggeser dalam arah maju.

Saat penggeser mencapai akhir, salinan dari awal penggeser langsung ditempatkan di tempat slide terakhir. Kemudian siklus berulang lagi. Ini menciptakan ilusi slider tanpa akhir.

markup HTML

Pertama, mari kita buat penggeser gulir otomatis sederhana. Dibutuhkan dua wadah untuk bekerja. Yang pertama akan mengatur ukuran area slider yang terlihat, dan yang kedua diperlukan untuk menempatkan slider di dalamnya. Markup slider akan terlihat seperti ini:

> >

Gaya penggeser

.slider-box (width: 320px; height: 210px; overflow: hidden;) .slider (position: relative; width: 10000px; height: 210px;) .slider img (float: left; z-index: 0;)

Wadah.slider-box mengatur dimensi slider. The overflow: properti tersembunyi menyembunyikan semua elemen yang tidak termasuk dalam area di dalam elemen.

Wadah penggeser diatur ke lebar yang besar. Ini diperlukan agar semua slide masuk ke dalamnya.

Slide disejajarkan menggunakan properti float: left.

Di bawah ini adalah tata letak skema blok slider.

Naskah

Pergerakan slide akan dilakukan dengan menggunakan perubahan mulus properti margin-kiri container.slider.

$ (fungsi () (var lebar = $ (". slider-box") .width (); // Lebar penggeser. interval = 4000; // Interval untuk mengubah slide.$ (". slider img: terakhir") .clone () .prependTo (".slider"); // Salinan slide terakhir ditempatkan di awal.$() .eq (1) .clone() .appendTo (".slider"); // Salinan slide pertama ditempatkan di akhir. // Container.slider digeser ke kiri satu lebar slide. setInterval("animasi ()", interval); // Fungsi animasi () dimulai untuk mengubah slide.)); fungsi animasi () (var margin = parseInt ($ (". slider") .css ("marginLeft")); // Offset saat ini dari penggeser blok lebar = $(". slider-box") .width(), // Lebar penggeser. sliderAmount = $ (". slider") .children () .length; // Jumlah slide di slider. if (margin! = (- lebar * (slidersAmount- 1))) // Jika slide saat ini bukan yang terakhir,(margin = margin- lebar; // maka nilai margin dikurangi dengan lebar slide.) lain ( // Jika slide terakhir ditampilkan,$ (". slider") .css ("margin-kiri", - lebar); // kemudian blok slider kembali ke posisi awal, margin = - lebar * 2; ) $ (". slider") .animate ((marginLeft: margin), 1000); // Blok penggeser digeser ke kiri sebanyak 1 slide. } ;

Hasilnya adalah penggeser sederhana dengan pengguliran otomatis tanpa batas.

Slider sederhana dan ringan (21Kb terkompresi) yang ditulis dalam Javascript murni, tanpa ketergantungan apa pun, mis. bekerja tanpa jQuery.

Diuji di browser berikut:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• yaitu 10
• Opera 16.0

Ada dukungan yang tidak lengkap untuk IE8 / 9 (tidak ada efek).

Keunikan

• Anda dapat menambahkan slider dalam jumlah tak terbatas ke halaman, bahkan menempatkan satu di dalam yang lain.
• Mengubah ukuran berdasarkan konten, tetapi dapat dinonaktifkan.
• Navigasi Keyboard - Saat kursor berada di penggeser, Anda dapat mengaktifkan penggeser panah.
• Dukungan untuk acara sentuh seluler.

Koneksi

Sebelum tag penutup perlu terhubung slider.js atau slider.min.js mengajukan.

markup HTML

slider.js dapat bekerja dengan elemen inline, inline-block, blok apa pun yang memiliki atribut id. Diperbolehkan menggunakan elemen turunan tingkat pertama dengan atribut data-slidr, misalnya:

• apel
• pisang
• kelapa

apel

pisang

kelapa

Javascript

Setelah terhubung slider.js objek slider global akan tersedia. Cara termudah untuk membuat slider adalah:

Slidr.create("slidr-id").Mulai ();

Panggilan dengan semua pengaturan yang ditentukan:

Slidr.create ("slidr-id", (setelah: function (e) (console.log ("in:" + e.in.slidr);), sebelum: function (e) (console.log ("out: "+ e.out.slidr);), remah roti: true, kontrol:" sudut ", arah:" vertikal ", fade: false, keyboard: true, overflow: true, tema:" # 222 ", timing: (" kubus ":" 0.5s ease-in "), sentuh: benar, transisi:" kubus ")). start ();

Pengaturan

Semua pengaturan yang tersedia untuk slider.js ditunjukkan pada tabel di bawah ini.

Parameter	Sebuah tipe	Bawaan	Keterangan
setelah	fungsi		fungsi panggilan balik setelah perubahan slide
sebelum	fungsi		fungsi panggilan balik sebelum perubahan slide
tepung roti	bool	Salah	Tampilkan remah roti untuk kontrol slide. benar atau salah.
kontrol	rangkaian	berbatasan	Susunan panah untuk mengontrol slide. perbatasan, sudut atau tidak sama sekali.
arah	rangkaian	horisontal	Arah default untuk slide baru. horizontal atau h, vertikal atau v.
memudar	bool	benar	Aktifkan efek fade-in / out. benar atau salah.
papan ketik	bool	Salah	Aktifkan mengubah slide menggunakan keyboard. benar atau salah.
meluap	bool	Salah	Aktifkan overflow untuk blok slider. benar atau salah.
berhenti sebentar	bool	Salah	Jangan ubah slide secara otomatis pada mouse hover (Anda perlu menjalankan auto ()). benar atau salah.
tema	rangkaian	#fff	Warna kontrol penggeser (remah roti dan panah). #hexcode atau rgba (nilai).
waktu	obyek	{}	Pengaturan waktu animasi khusus untuk diterapkan. ("transisi": "waktu").
menyentuh	bool	Salah	Aktifkan kontrol sentuh pada perangkat seluler. benar atau salah.
transisi	rangkaian	linier	Efek transisi geser. kubus, linier, pudar, atau tidak sama sekali.

Fungsi panggilan balik setelah dan sebelum menerima data berikut:

(id: "slidr-id", di: (el: # , slidr: "data-slidr-in", trans: "transisi-masuk", dir: "arah-masuk"), keluar: (el: # , slidr: "data-slidr-out", trans: "transisi-keluar", dir: "arah-keluar"))

API global Slider.js

Namespace global slider menyediakan fungsi-fungsi berikut:

/ ** * Versi saat ini * @return (string) major.minor.patch. * / versi fungsi () (); / ** * Efek transisi yang tersedia. * @return (Array) transisi. * / fungsi transisi () (); / ** * Membuat dan mengembalikan Slider. * Memanggil fungsi ini dua kali pada elemen yang sama akan mengembalikan objek Slider yang sudah dibuat. * @param (string) id elemen untuk Slider. * @param (Object =) opt_settings Pengaturan slider. * / fungsi buat (id, opt_settings) ();

Slider API

// Inisialisasi Slidr dengan pengaturan khusus var s = slidr.create ("slidr-api-demo", (breadcrumbs: true, overflow: true)); // Tambahkan slide horizontal dengan efek transisi standar. // duplikat elemen array "satu" di akhir memungkinkan Slidr untuk // menggulir slide tanpa henti s.add ("h", ["satu", "dua", "tiga", "satu"]); // Menambahkan slide vertikal dengan efek transisi kubus. s.add("v", ["lima", "empat", "tiga", "lima"], "kubus"); // Luncurkan penggeser. s.mulai();

Entri singkat

Var s = slidr.create("slidr-api-demo", (breadcrumbs: true, overflow: true)). Tambahkan ("h", ["one", "two", "three", "one"]) .add ("v", ["lima", "empat", "tiga", "lima"], "kubus") .start ();

Daftar lengkap fungsi Slidr.js API disajikan di bawah ini.

/ ** * Mulai Slidernya! * Secara otomatis menemukan slide untuk dibuat jika tidak ada yang ditambahkan sebelum memanggil start (). * @param (string) opt_start `data-slidr` id untuk memulai. * @return (ini) * / fungsi mulai (opt_start) (); / ** * Periksa apakah kita bisa meluncur. * @param (string) di sebelah arah ("atas", "bawah", "kiri", "kanan") atau id `data-slidr`. * @return (boolean) * / fungsi canSlide (berikutnya) (); / ** * Menggeser! * @param (string) di sebelah arah ("atas", "bawah", "kiri", "kanan") atau id `data-slidr`. * @return (ini) * / fungsi slide (berikutnya) (); / ** * Menambahkan satu set slide. * @param (string) arah `horizontal || h` atau `vertikal || v`. * @param (Array) id Daftar `data-slidr` id" untuk ditambahkan ke Slider. Slide harus turunan langsung dari Slider. * @param (string =) opt_transition Transisi untuk diterapkan antar slide, atau menggunakan default. * @param (boolean =) opt_overwrite Apakah akan menimpa pemetaan / transisi slide yang ada jika terjadi konflik. * @return (ini) * / fungsi add (direction, id, opt_transition, opt_overwrite) (); / ** * Secara otomatis maju ke slide berikutnya setelah batas waktu tertentu. Panggilan mulai () jika belum dipanggil. * @param (int =) opt_msec Jumlah mili di antara setiap transisi slide. Defaultnya adalah 5000 (5 detik). * @param (string = ) opt_direction "atas", "bawah", "kiri", atau "kanan". Defaultnya adalah "kanan". * @param (string =) opt_start Id `data-slidr` untuk memulai (hanya berfungsi jika otomatis dipanggil untuk memulai Slidr) * @return (this) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Hentikan transisi otomatis jika diaktifkan. * @return (ini) * / fungsi berhenti () (); / ** * Mengatur waktu animasi kustom. * Transisi @param (string | Objek) Entah nama transisi (yaitu "kubus"), atau objek ("transisi": "waktu"). * @param (string =) opt_timing Waktu animasi baru (yaitu "0,5 detik kemudahan masuk"). Tidak diperlukan jika transisi adalah objek. * @return (ini) * / fungsi waktu (transisi, opt_timing) (); / ** * Beralih remah roti. * @return (ini) * / fungsi remah roti () (); / ** * Beralih kontrol. * @param (string =) opt_scheme Aktifkan/nonaktifkan jika tidak ada, jika tidak ubah tata letak. "border", `corner` atau` none`. * @return (ini) * / kontrol fungsi (opt_scheme) ();

Menggulir halaman sambil mengubah slide

Bug jahat ini muncul di beberapa browser. Untuk memperbaikinya, Anda perlu menambahkan gaya ke badan:

Tubuh (meluap: tersembunyi;)

Mengubah ukuran dinamis

Slider "memahami" apakah perlu mengubah ukuran slider agar sesuai dengan gambar. Jika blok slider memiliki dimensi yang ditentukan, maka Slider tidak akan secara otomatis mengubahnya. Jika properti min-width dan min-height ditentukan, maka slider akan mengubah ukuran agar sesuai dengan konten, dengan mempertimbangkan nilai-nilai ini. Jika tidak, ukuran akan dilakukan secara otomatis.

Mengubah ukuran otomatis

bagus

menawan

sulit dipercaya

Dimensi statis

bagus

menawan

sulit dipercaya

Kontrol slider

Markup untuk kontrol adalah sebagai berikut:

Anda dapat menyesuaikan kontrol penggeser apa pun menggunakan pemilih CSS:

Selain .slidr-control.right (lebar: 50px! Penting; tinggi: 50px! Penting; atas: 50%! Penting; margin-top: -25px! Penting; kanan: -25px! Penting; border-radius: 25px; background : url ("/ static / images / arrow_right.png") 14px 13px no-repeat black; opacity: 0.4;) selain .slidr-control.right: hover (opacity: 1;)

Kontrol panah diimplementasikan dengan: setelah pemilih semu, jadi untuk menyembunyikannya, gunakan kode berikut:

// Sembunyikan satu panah dalam satu pengontrol. side .slidr-control.right: after (border-color: transparent! important;) // Sembunyikan semua panah dalam satu pengontrol. selain .slidr-control: after (border-color: transparent! important;) // Sembunyikan semua panah Slidr. selain .slidr-control: after (warna batas: transparan! penting;)

Slidr remah roti

Breadcrumbs memiliki markup HTML sederhana. Setiap ul mewakili seluruh baris, dan setiap li mewakili remah roti terpisah:

Menata remah roti dengan CSS:

// Sesuaikan posisi, ukuran, warna batas dan warna latar belakang. samping (kanan: 50%! penting; margin-kanan: -41px! penting;) samping .slidr-remah roti li (lebar: 15px! penting; tinggi: 15px! penting; margin: 3px! penting;) samping .slidr-remah roti li.normal (border-color: putih! penting;) selain .slidr-breadcrumbs li.active (warna latar: hitam! penting;)

Lisensi

Perangkat lunak ini gratis untuk digunakan di bawah lisensi MIT.