Slider vertikal Jquery dengan panah dan navigasi. Pilihan slider responsif

> >

Gaya penggeser

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

Container.slider-box menentukan ukuran slider. Properti overflow:hidden menyembunyikan semua elemen yang tidak berada dalam cakupan di dalam elemen.

Container.slider diatur ke lebar yang besar. Ini diperlukan untuk memasukkan semua slide ke dalamnya.

Slide disejajarkan menggunakan properti float:left.

Tata letak skema blok slider ditunjukkan di bawah ini.

Naskah

Pergerakan slide akan dilakukan dengan mengubah properti margin-left dari container.slider dengan lancar.

$(fungsi () ( var lebar= $(".slider-box" ) .width() ; // Lebar penggeser. selang = 4000 ; // Interval untuk mengubah slide.$(".slider img:last" ) .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 dengan lebar satu slide. setInterval("animasi()", interval); // Menjalankan fungsi animation() untuk melakukan transisi slide.) ) ; fungsi animasi() ( var margin = parseInt($(".slider" ) .css ("marginLeft" ) ); // blok saat ini offset.slider lebar= $(".slider-box" ).width() , // Lebar penggeser. sliderAmount= $(".slider" ) .children () .length ; // Jumlah slide di slider. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Jika slide saat ini bukan yang terakhir,( margin= lebar margin; // maka nilai margin dikurangi dengan lebar slide.) kalau tidak ( // Jika slide terakhir ditampilkan,$(".slider" ) .css("margin-left" , -lebar) ; // lalu block.slider kembali ke posisi awal, margin=- lebar* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ); // Block.slider bergerak ke kiri sebanyak 1 slide. } ;

Hasilnya adalah penggeser sederhana dengan pengguliran otomatis tanpa batas.

Pada artikel ini, kami akan menganalisis betapa mudahnya membuat slider adaptif untuk situs menggunakan CSS Flexbox dan transformasi CSS.

Kode sumber dan demo penggeser

Proyek slider yang disebut chiefSlider di-host di GitHub. Anda dapat pergi ke sana melalui tautan ini.

Slider dengan satu slide aktif (tanpa pengulangan):

Slider dengan tiga slide aktif (tanpa pengulangan):

Contoh yang menunjukkan bagaimana Anda dapat menggunakan penggeser untuk memutar artikel:

Manfaat chiefSlider

Kami mencantumkan keuntungan utama dari penggeser ini:

• pertama dia tidak membuat klon elemen (item) untuk mengatur perulangan, seperti yang diterapkan, misalnya, di plugin Burung HantuKorsel dan licin;
• kedua, itu tidak tergantung pada perpustakaan jQuery; ini tidak hanya menghilangkan persyaratan tambahan, tetapi juga membuatnya lebih mudah;
• ketiga, praktis tidak membuat perubahan apa pun pada DOM dokumen; satu-satunya hal yang dilakukannya adalah menambah atau mengubah nilai transformasi CSS dari elemen slider;
• Keempat, hanya berisi kumpulan fitur minimal; fungsionalitas tambahan dapat ditambahkan tergantung pada tugas;
• kelima, adaptif, yaitu itu dapat digunakan di situs mana pun; kemampuan beradaptasi slider dikonfigurasi menggunakan CSS;
• keenam, jumlah elemen aktif dikonfigurasi menggunakan CSS; ini berarti dapat digunakan untuk membuat korsel dengan satu slide aktif atau sejumlah slide aktif.

Memasang chiefSlider

Memasang slider dilakukan dalam 3 langkah:

• tambahkan CSS dari chiefSlider ke halaman atau ke file CSS yang terhubung ke halaman;
• letakkan kode HTML penggeser di tempat yang diperlukan pada halaman;
• masukkan kode JavaScript ke halaman atau ke file js yang terhubung ke halaman.

Diinginkan untuk meminimalkan kode CSS dan JavaScript, tindakan ini akan memberikan pemuatan halaman yang lebih cepat.

Cara mendesain slider situs web sederhana (tanpa perulangan)

Membuat penggeser kepalaSlider akan terdiri dari pembuatan kode HTML, CSS dan JavaScript (tanpa jQuery).

Kode HTML Penggeser kepalaSlider:

Seperti yang Anda lihat, slider memiliki arsitektur HTML yang sangat sederhana. Itu dimulai dengan blok utama, yang memiliki kelas slider. Blok ini terdiri dari 3 elemen.

Elemen pertama adalah .slider__wrapper . Ini bertindak sebagai pembungkus untuk elemen .slider__item (slide).

Dua elemen lainnya (.slider__control) secara visual mewakili tombol. Mereka akan digunakan untuk menavigasi slide, mis. pindah ke elemen sebelumnya dan berikutnya.

kode css untuk chiefSlider:

/* GAYA DASAR */ .slider ( posisi: relatif; luapan: tersembunyi; ) .slider__wrapper ( tampilan: fleksibel; transisi: transformasi 0,6 detik dengan mudah; /* 0,6 durasi transisi slide dalam hitungan detik */ ) .slider__item ( fleksibel: 0 0 50%; /* mendefinisikan jumlah slide aktif (dalam hal ini 2 */ max-width: 50%; /* mendefinisikan jumlah slide aktif (dalam hal ini 2 */ ) /* GAYA UNTUK TOMBOL BACK AND FORWARD * / .slider__control ( position: absolute; display: none; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; text-align: center; width: 40px; / * lebar tombol */ tinggi: 50px; /* tinggi tombol */ opacity: .5; /* transparansi */ background: #000; /* warna latar */ ) .slider__control_show ( display: flex; ) .slider__control:hover, slider__control:focus ( text-decoration: none; outline: 0; opacity: .9; /* transparent */ ) .slider__control_left ( left: 0; ) .slider__control_right ( kanan: 0; ) .slider__control::before ( content: " "; tampilkan lay: inline-block lebar: 20px /* ikon (panah) lebar */ tinggi: 20px; /* ikon (panah) tinggi */ latar belakang: pusat tengah tanpa pengulangan transparan; ukuran latar belakang: 100% 100% ) .slider__control_left::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Seperti yang Anda lihat, kode CSS slider juga tidak terlalu rumit. Definisi utama yang dapat Anda gunakan untuk menyesuaikan tampilan bilah geser disediakan dengan komentar .

Kode CSS yang mendefinisikan jumlah elemen aktif:

/* mendefinisikan jumlah slide aktif (2 dalam kasus ini) */ flex: 0 0 50%; lebar maksimum: 50%

Kode ini menetapkan jumlah elemen aktif untuk penggeser menjadi 2.

Agar penggeser, misalnya, memiliki satu elemen aktif, definisi ini perlu diubah menjadi berikut:

/* mendefinisikan jumlah slide aktif (dalam hal ini 1) */ flex: 0 0 100%; lebar maksimum: 100%

Penciptaan penggeser adaptif dilakukan melalui media query.

Misalnya, penggeser, yang pada perangkat dengan layar kecil harus memiliki satu slide aktif, dan pada perangkat besar - empat:

Slider__item ( flex: 0 0 100%; max-width: 100%; ) @media (min-width: 980px) ( .slider__item ( flex: 0 0 25%; max-width: 25%; ) )

Kode JavaScript untuk chiefSlider :

"gunakan ketat"; var multiItemSlider = (function () ( mengembalikan fungsi (selector) ( var _mainElement = document.querySelector(selector), // memblokir elemen utama _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // pembungkus untuk .slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elemen (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // kontrol _sliderControlLeft = _mainElement.querySelector(".slider__control"), // kontrol _sliderControlLeft = _mainElement.querySelector(".slider_control") "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // tombol "KANAN" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // lebar pembungkus _itemWidth = parseFloat(getComputedStyle(getComputed) / lebar satu elemen _positionLeftItem = 0, // posisi elemen aktif kiri _transform = 0, // nilai transformasi slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // ukuran langkah (untuk transformasi) _items = ; // array item // mengisi array _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var position = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= posisi .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") &Item +_control_show") _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (arah === "kiri") ( if (_positionLeftItem<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());

Tindakan utama dalam kode JavaScript dilakukan oleh fungsi _transformItem. Fungsi ini, bergantung pada arah yang diteruskan ke sana, mengubah element.slider__wrapper .

Inisialisasi penggeser dilakukan sebagai berikut:

Var slider = multiItemSlider(".slider") Demo penggeser

Bagaimana cara membuat slider perulangan?

Slide dapat diulang dengan mengubah elemen .slider__item.

Untuk melakukan ini, perlu untuk mengikat nilai posisi saat ini dan transformasi ke setiap elemen.slider__item.

Paling optimal, tindakan ini dapat dilakukan menggunakan array _items:

var_item = ; // mengisi array dengan item.slider__item _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); ));

Tetapi Anda dapat mengikat data ke elemen tidak hanya melalui array, tetapi misalnya, menggunakan atribut data. Tetapi operasi DOM adalah yang paling lambat dan paling intensif sumber daya, mereka tidak disarankan untuk digunakan jika dapat dilakukan dengan cara lain.

Langkah selanjutnya adalah membuat fungsi untuk menghitung elemen .slider__item dengan posisi minimum dan maksimum.

var position = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = indeks; ) )); kembali indeksItem; ), getMin: function () ( return _items.position; ), getMax: function () ( return _items.position; ) )

Langkah dasar terakhir yang harus dilakukan adalah menyempurnakan fungsi _transformItem. Yaitu, tambahkan kode ke dalamnya yang akan mengubah posisi elemen .slider_item dan melakukan transformasinya.

Var _transformItem = fungsi (arah) ( var nextItem; if (arah === "kanan") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > position.getMax()) ( nextItem = position.getItemMin() ; _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (arah === "kiri") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) {
 nextItem = position.getItemMax();
 _items.position = position.getMin() - 1;
 _items.transform -= _items.length * 100;
 _items.item.style.transform = "translateX(" + _items.transform + "%)";
 }
 _transform += _step;
 }
 _sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}

Faktanya, semuanya sederhana di sini.
Misalnya, untuk berpindah ke slide berikutnya, larik item terlebih dahulu mencari elemen dengan posisi lebih besar dari elemen paling kanan saat ini.slider_item .
Jika ada elemen seperti itu dalam array, maka transformasi elemen .slider__wrapper dilakukan (yaitu, tindakan, seperti dalam algoritme tanpa perulangan).
Tapi jika tidak ada elemen seperti itu, kemudian selain transformasi.slider__wrapper , sejumlah tindakan lain dilakukan.  Pertama, array item dicari untuk elemen dengan posisi minimal.  Setelah menerima elemen ini, itu posisi diatur, nilainya akan sama dengan nilai elemen kanan saat ini + 1.  Dan, tentu saja, itu benar transformasinya, dengan persentase sedemikian rupa sehingga berakhir di akhir , yaitu.  setelah elemen terakhir.

Untuk pergi ke slide sebelumnya, langkah yang sama dilakukan, tetapi secara terbalik.

Selain itu, untuk penggeser perulangan, Anda tidak perlu mengalihkan visibilitas tombol Kiri dan Kanan.  Tombol-tombol ini akan selalu ditampilkan dalam versi penggeser ini.
Untuk melakukan ini, Anda perlu:
hapus kelas slider__control_show dari kontrol "Kanan";
 
di CSS untuk pemilih .slider__control, ubah nilai properti tampilan menjadi flex .
 Demo Penggeser 
Bagaimana cara membuat slider dengan looping dan transisi slide otomatis?
Anda dapat memprogram perubahan slide secara otomatis pada interval tertentu menggunakan fungsi setInterval.
Var _cycle = function (direction) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function() ( _transformItem(direction); ), _config.interval); )
Fungsi setInterval dalam contoh ini akan menjalankan fungsi _transformItem secara berkala sama dengan nilai variabel _config.interval.
Selain itu, diinginkan untuk menambahkan perhentian untuk perubahan slide secara otomatis ketika kursor dibawa ke penggeser.
Anda dapat menerapkan fungsi ini sebagai berikut:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction); )); )
Bagaimana cara menghentikan transisi slide otomatis jika elemen tidak terlihat oleh pengguna?
Menonaktifkan perubahan slide otomatis berguna dalam dua kasus:
ketika halaman (tempat penggeser ini berada) tidak aktif;
 
saat penggeser berada di luar cakupan halaman.
Kasus pertama dapat ditangani dengan acara visibilitychange.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Fungsi untuk pengendali acara visibilitychange:
// menangani "Perubahan visibilitas dokumen" acara var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
Visibilitas elemen dapat dihitung menggunakan fungsi _isElementVisible:
Fungsi _isElementVisible(elemen) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y kembalikan document.elementFromPoint(x, y); if (rect.right< 0 || rect.bottom < 0 || rect.left >vLebar ||  rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom)));  )
Anda dapat melakukan panggilan ke _isElementVisible, misalnya, di awal fungsi _transformItem.  Tindakan ini akan membatalkan transisi slide otomatis jika slider saat ini berada di luar viewport.
Var _transformItem = fungsi (arah) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Penggeser yang bereaksi terhadap pengubahan ukuran jendela browser
Versi slider adaptif ini berbeda dari yang sebelumnya karena memungkinkan ubah jumlah elemen aktif (slide) saat mengubah ukuran jendela browser.  Biasanya pengguna tidak mengubah ukuran browser, tetapi itu masih bisa terjadi.
Ini diimplementasikan menggunakan acara pengubahan ukuran dan larik _states.  Array digunakan untuk perhitungan.  Penggunaannya akan memungkinkan untuk tidak menginisialisasi ulang penggeser saat tidak diperlukan.
Satu dari cara yang efektif menarik perhatian pengguna pada halaman situs adalah pembuatan animasi bergerak.  Elemen animasi membantu memberi tahu dan menunjukkan kepada pengguna tentang produk Anda secara lebih visual.  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 slider.  Pada artikel ini, kita akan berbicara tentang membuat slider tipe carousel adaptif dengan efek auto-scrolling yang mulus.
Hingga saat ini, ada ratusan ulasan di web dengan tautan ke solusi yang sudah jadi, tetapi kebanyakan berisi banyak fungsi yang tidak digunakan yang secara signifikan mengurangi kinerja bilah geser, serta memperlambat pemuatan situs secara keseluruhan.  Pengembang web profesional selalu berusaha untuk membuat produk perangkat lunak yang fleksibel dalam penyesuaian, dengan ambang batas yang rendah untuk menambahkan pustaka dan plugin tambahan.  Itulah sebabnya skrip kami menggunakan persyaratan minimum untuk mengatur slider seperti itu.  Fungsionalitas pekerjaan memungkinkan Anda untuk mengatur interval switching, kecepatan, serta pilihan slide tertentu.  Di bawah ini adalah sejumlah variabel yang mengontrol pengoperasian slider itu sendiri.
daftar waktu- kecepatan beralih geser
tampilan waktu- waktu pertunjukan
radiobut- tombol di bawah slide untuk navigasi cepat.  Nilai defaultnya adalah true, jika Anda menggunakan false, maka tombol akan hilang.
Sekarang mari kita mulai!  Buat dan buka file index.htm 
 

 

 

 

 

 

 

 
 

 
Dalam kode yang disajikan, seperti yang kita lihat, tidak ada yang rumit, slider-wrap mendefinisikan posisi umum dan sejajarkan penggeser 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 filenya style.css dan tulis markup yang kita butuhkan di sana:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto");  body ( color: #4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0; ) #slider-wrap( max-width:800px; margin: 0 auto; margin-top: 80px; ) #active-slide ( width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- pilihan pengguna: tidak ada; -o-pengguna-pilih: tidak ada; pilih pengguna: tidak ada; ) #slider( posisi: relatif; lebar: calc(100% * 4); atas: 0; kiri: 0; margin: 0 ; padding: 0; -webkit-transisi: 1s; -o-transisi: 1s; transisi: 1s; -webkit-transisi-waktu-fungsi: kemudahan-keluar; -o-transisi-waktu-fungsi: kemudahan-masuk -out; transisi-waktu-fungsi: ease-in-out; ) .slide( width: calc(100%/4); list-style: none; display: inline; float: left; ) .slide img ( width: 100%; ) .Radio-But( margin-top:10px; text-align:center; ) .Radio-But .ctrl-select ( margin:2px; display:inline-block; width:16px; height:16px; overflow :hidden;text-indent:-9999px;latar belakang:url(radioBg.p  ng) tengah bawah tidak ada pengulangan;  ) .Radio-But .ctrl-select:hover ( cursor:pointer; background-position:center center; ) .Radio-But .ctrl-select.active ( background-position:center top; ) #prewbutton, #nextbutton ( display :block; width:40px; height:100%; position:absolute; top:0; overflow:hidden; text-indent:-999px; background: url("arrowBg.png") kiri tengah tanpa pengulangan; opacity:0.5 ; z-index:3; outline:none !important; ) #prewbutton ( left:10px; ) #nextbutton ( kanan:10px; background:url(arrowBg.png) right center no-repeat; ) #prewbutton:hover, # tombol berikutnya: arahkan kursor ( opacity:1; )
Dalam gaya properti slider-wrap tuliskan lebar- panjang maksimum gambar Anda.
Dalam gaya properti #slider ( lebar: calc(100% * 4); ) dan .slide ( lebar: calc(100%/4); ) tentukan jumlah gambar di penggeser Anda.  Dalam contoh kita, ada 4.
Jika panah maju/mundur mengganggu visibilitas penggeser Anda, panah tersebut dapat dibuat tidak terlihat dan akan muncul saat melayang.  Untuk melakukan ini, dalam parameter sebelum tapi dan berikutnyaTapi, atur properti opacity ke 0.
Sekarang mari kita buat dan buka file kita slider.js, yang akan berisi kode penggeser.  Jangan lupa untuk menyertakan perpustakaan jQuery.
$(document).ready(function() ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "next")( if(slideNum == slideCount) ( slideNum=1; ) else(slideNum++) translateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" + translateWidth + "px, 0)")); ) else if(panah == " prew") ( 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" ).removeClass("active"); $(".ctrl-select").eq(slideNum - 1).addClass("active"); ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function()( animSlide("next"); return false; )) $("#prewbutton").click(fungsi ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + indeks + "";
 });
 $("
"+penambahSpan+"
").appendTo("#slider-wrap"); $(".ctrl-select:first").addClass("active"); $(".ctrl-select").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum + 1); )); var pause = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide) ("berikutnya")), TimeView);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); pause = true;), function()(pause = false; rotator() ; )); var mengklik = false; var prevX; $(".slide").mousedown(function(e)( mengklik = true; prevX = e.clientX; )); $(".slide").mouseup( function() ( mengklik = false; )); $(document).mouseup(function()( mengklik = false; )); $(".slide").mousemove(function(e)( if(mengklik == benar ) ( jika (mis.klienX< prevX) { animSlide("next"); clearTimeout(slideTime); }
 if(e.clientX >prevX) ( animSlide("prew"); clearTimeout(slideTime); ) mengklik = false;  ) ));  $(".slide").hover().css("kursor", "penunjuk");  alat pemutar();  ));
Fungsi animSlide menerima tiga jenis nilai: berikutnya, prew, nilai numerik.  Parameter berikutnya mengaktifkan slide berikutnya, prew mengembalikan yang sebelumnya, dan nilai numeriknya adalah slide tertentu yang dipilih melalui tombol radio di bawah slide.
Slider yang disajikan menggunakan gambar dari sumber web https://pixabay.com/.
Ini adalah slider sentuh responsif yang ditulis dalam jQuery.  Mesin plugin ini menggunakan animasi CSS3, tetapi pada saat yang sama, fallback disediakan untuk versi browser yang lebih lama.  Glide.js sederhana dan ringan.
Penggunaan
1. Sertakan jQuery
Satu-satunya ketergantungan plugin adalah jQuery, yang harus kita sertakan terlebih dahulu:
 
2. Sertakan Glide.js
 
3. Tambahkan html
Mari kita hubungkan gaya dasar.
 
Mari kita gulung struktur html dari slider.
 

 

4. Inisialisasi
Meluncurkan penggeser dengan pengaturan default...
 
... atau sesuaikan sendiri
 
Pengaturan
Daftar opsi yang tersedia:
Parameter
Nilai default
Jenis
Keterangan
putar otomatis
4000

int/bool
Gulir otomatis (salah untuk menonaktifkan)
jeda sebentar
BENAR
bool
Jeda gulir otomatis saat mouse melayang di atas penggeser
animasiWaktu
500

ke dalam
!!!  Opsi ini berfungsi jika browser TIDAK mendukung css3.  Jika css3 didukung oleh browser, maka parameter ini harus diubah di file .css!!!
panah
BENAR
bool/string
Tampilkan/sembunyikan/lampirkan panah.  Benar untuk menampilkan panah di wadah penggeser.  Salah untuk disembunyikan.  Anda juga dapat menentukan nama kelas (contoh: ".class-name") untuk melampirkan kode html khusus
panahWrapperClass
slider-panah
rangkaian
Kelas yang akan ditugaskan ke wadah dengan panah
panahKelas Utama
panah geser
rangkaian
Kelas utama untuk semua panah
panahKananKelas
slider-panah-kanan
rangkaian
Kelas untuk panah kanan
panahKiriKelas
slider-panah-kiri
rangkaian
Kelas untuk panah kiri
panahKananTeks
Berikutnya
rangkaian
Teks untuk panah kanan
panahKiriTeks
sebelumnya
rangkaian
Teks untuk panah kiri
navigasi
BENAR
bool/string
Tampilkan/sembunyikan/lampirkan navigasi slide.  Benar untuk ditampilkan.  Salah untuk disembunyikan
pusat navigasi
BENAR
bool
Navigasi Pusat
kelas navigasi
slider-nav
rangkaian
Kelas untuk wadah navigasi
navItemClass
slider-nav_item
rangkaian
Kelas untuk elemen navigasi
navCurrentItemClass
slider-nav__item--saat ini
rangkaian
Kelas untuk elemen navigasi saat ini
papan ketik
BENAR
bool
Gulir slide dengan menekan tombol kiri/kanan
jarak sentuh
60

int/bool
Dukungan sentuh (sentuh).  Salah untuk menonaktifkan fitur ini.
sebelumInit
fungsi()()
fungsi
Panggilan balik yang akan berjalan sebelum inisialisasi plugin
setelahInit
fungsi()()
fungsi
Panggilan balik yang akan berjalan setelah inisialisasi plugin
sebelum Transisi
fungsi()()
fungsi
Panggilan balik yang akan berjalan sebelum menggulir slider
setelah Transisi
fungsi()()
fungsi
Panggilan balik yang akan berjalan setelah penggeser digulir
API
Untuk menggunakan API, tulis glide ke variabel.
var meluncur = $(".slider").glide().data("api_glide");
Metode API sekarang tersedia untuk Anda.
Glide.jump(3, console.log("Wooo!"));
.current() - Kembalikan nomor sisi saat ini
.play() - Mulai pengguliran otomatis
.pause() - Hentikan pengguliran otomatis
.next(callback) - Gulir penggeser ke depan
.prev(callback) - Gulir slider ke belakang
.jump(jarak, panggilan balik) - Lompat ke slide tertentu
.nav(target) - Melampirkan navigasi ke elemen tertentu (mis: "body", ".class", "#id")
.arrows(target) - Melampirkan panah ke elemen tertentu (misalnya: "body", ".class", "#id")

1. Plugin jQuery Fresco
Galeri jquery responsif (mengubah ukuran saat resolusi layar berubah) ditampilkan dalam sembulan dengan gambar mini dan keterangan gambar.  galeri fresco jquery berfungsi dengan benar di sebagian besar browser termasuk: IE6+, Firefox 3+, Chrome 5+, Opera 9+.  Versi gratis dari plugin ini hanya dapat digunakan pada proyek non-komersial.
2. Penggeser "Adaptor"


Slider dengan berbagai efek transisi (7 efek berbeda, termasuk 3D).  Proyek di Github.
3. Plugin slider dengan efek berbeda "jQ-Tiles"


Plugin dengan berbagai efek transisi, dengan kecepatan geser yang dapat disesuaikan, dengan fungsi gulir otomatis.
4. plugin jQuery "Sly"


Plugin untuk mengimplementasikan scroller vertikal dan horizontal.  Proyek di Github.
5. Menu Makisu CSS3 Animasi


6. Tampilan slide sederhana


7. Penggeser jQuery fungsional "iView Slider v2.0"


Slider konten / slideshow (slide tidak hanya dapat berupa gambar, tetapi juga klip video dan konten HTML lainnya).  Untuk navigasi, Anda dapat menggunakan: thumbnail, tombol Kiri / Kanan dan menggunakan keyboard.  Proyek di Github.com.
8. Satu set plugin jQuery "Vanity"


Ada 7 plugin dalam set: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder dan jCollapse.  Serangkaian solusi ini akan membantu Anda menerapkan bilah geser, tip alat, tab, sembulan gambar, dan banyak lagi.
9. Arahkan Efek CSS3


10. Menu Dropdown CSS3


11.iOSlider


Penggeser yang dirancang untuk berfungsi di perangkat seluler.
12. Indikator pemuatan CSS3


13. Efek hover CSS3


14. Plugin jQuery "Pewarna Produk"


Plugin adalah solusi ringan untuk melihat produk dalam berbagai warna (relevan, misalnya, untuk toko pakaian online, untuk membiarkan pengunjung memilih skema warna produk dari beberapa pilihan).  Plugin hanya membutuhkan dua gambar untuk setiap produk (semua warna akan ditumpangkan sebagai topeng).  Plugin ini bekerja di semua browser utama termasuk IE7+ (akan bekerja di IE6 juga jika Anda memperbaiki tampilan transparansi PNG).  Proyek di GitHub.
15. Grafik Animasi CSS3


16. Membuat efek overlay saat mengklik gambar


Saat Anda mengklik gambar, itu menjadi gelap, pergi ke latar belakang, dan paragraf dengan teks muncul.  Dengan demikian, Anda dapat memberikan deskripsi singkat tentang elemen yang terletak pada gambar.
17. Navigasi halaman dalam bentuk menu drop-down


Solusi untuk menerapkan navigasi dokumen yang nyaman dalam bentuk menu drop-down.  Konten dipasang di bagian atas layar dan selalu tetap berada di bidang pandang pengunjung.  Saat Anda memilih bagian dalam menu, halaman akan menggulir dengan mulus ke bagian dokumen yang dipilih.
18. Galeri CSS3 dengan efek hover


Saat Anda mengarahkan kursor ke gambar, perubahan foto terjadi dengan cepat.  Galeri diimplementasikan dalam dua versi: dengan deskripsi gambar yang muncul setelah pengunjung memindahkan kursor dari galeri dan tanpa deskripsi.
19. jQuery Parallax Slider


20. Animasi hover CSS3 di blok


21. Panel popup jQuery CSS3
Klik panah di bagian bawah layar pada halaman demo untuk melihat ikon pop-up.
22. Galeri gambar HTML5 gratis "Juicebox Lite"


Galeri gambar baru yang sangat fungsional untuk situs ini.  Galeri bisa dengan atau tanpa thumbnail, dengan atau tanpa deskripsi gambar, dapat diperluas ke layar penuh atau ditampilkan pada halaman dengan ukuran tetap.  Di halaman demo, Anda dapat memilih jenis galeri yang Anda suka.  Versi gratis dari galeri tersedia untuk diunduh.  Untuk fungsionalitas lebih lanjut dan untuk menghapus logo pengembang, Anda harus membayar.
23. Plugin "JQVMap"


24. Slider Paralaks CSS3


25. galeri foto jQuery dengan thumbnail


Galeri responsif, ukuran gambar dan thumbnail berubah dengan ukuran jendela browser.
26. Plugin penggeser konten jQuery "Horinaja"


Plugin ini mudah dipasang, dapat disesuaikan, lintas-browser.  Konten HTML apa pun dapat bertindak sebagai slide, bukan hanya gambar.  Anda dapat menggulir slide menggunakan roda mouse saat kursor berada di area slide.
27. jQuery Pikapilih plugin slider


Dalam tiga variasi: implementasi perubahan sederhana gambar tanpa deskripsi dan thumbnail;  slider dengan keterangan gambar dan thumbnail;  slider dengan thumbnail dan menambahkan membuka gambar yang lebih besar di jendela popup dengan efek FancyBox.  Versi terbaru selalu dapat ditemukan di Github.
28. Beberapa Gaya CSS Kustom untuk Dropdown


Lima gaya tarik-turun yang berbeda menggunakan teknik CSS yang berbeda.
29. Menu restoran dengan efek animasi 3D


Penyajian informasi jQuery CSS yang menarik di halaman.  Dengan mengklik tautan, menu buklet terbuka dan pengunjung dapat membaca lebih lanjut tentang hidangan yang disediakan di jendela pop-up.  Animasi tidak ditampilkan dengan benar di IE.
30. Plugin elastislide


Implementasi karet korsel adaptif(korsel gambar vertikal dan horizontal) dan galeri gambar.  Ketika jendela browser dikurangi, jumlah gambar dikurangi ke nilai minimum tertentu dan kemudian ukuran gambar yang tersisa diskalakan.  Proyek di Github.
31. Slider Celah jQuery CSS3 segar


Plugin slider responsif (lebar dapat diatur sebagai persentase dan secara otomatis akan diskalakan) dalam dua gaya dengan efek animasi yang menarik saat mengubah slide (slide dipotong menjadi dua dan dipindahkan ke arah yang berbeda, dan yang baru menggantikannya).  Navigasi keyboard dimungkinkan.  Versi terbaru selalu ada di Github.
32. Versi baru penggeser gambar 3D "Slicebox"


Versi baru dengan perubahan yang dibuat dan penambahan fitur baru: sekarang penggeser 3D telah dapat diskalakan, Anda dapat melihatnya saat memperkecil jendela peramban;  Menambahkan dukungan untuk Firefox;  dalam deskripsi slide, Anda sudah dapat menggunakan konten HTML (sebelumnya, deskripsi ditarik dari atribut tautan tanpa kemampuan untuk menggunakan tag HTML di dalamnya).  Di halaman demo, Anda dapat melihat 4 opsi untuk menggunakan plugin. versi terbaru tinggal di Github.com.
Efeknya sangat mirip dengan galeri Flash CU3ER 3D (demo , unduh), hanya slider 3D ini dibuat bukan dengan bantuan teknologi flash, tetapi dengan bantuan javascript.
33.jQuery Plugin "Pfold"


Solusi eksperimental.  Plugin menerapkan efek 3D dengan meniru catatan yang sedang berlangsung. Berbagai pilihan eksekusi: dengan tiga putaran, dengan dua putaran dan satu putaran dengan pemusatan berikutnya dari nada yang diperluas.
34.jQuery Plugin "Angin"


Plugin untuk menavigasi konten, seperti gambar.  Saat menggulir foto, mereka menyebar ke arah yang berbeda (efeknya agak mengingatkan pada distribusi kartu di permainan kartu poker).  Untuk navigasi, Anda dapat menggunakan tombol kiri / kanan atau penggeser (lihat halaman demo untuk opsi yang berbeda).  Proyek aktif