Görünürlük için minimum ihtiyacı belirleyerek, z-index:

Slider (Konum: Göreceli; Z-Dizin: 0;)

Bu aslında hepsi. Sadece aşağıdaki CSS kodunu kullanarak öğelerimizi ayarlamak için kalır ve sevinirsiniz:

Kaydırıcı (pozisyon: göreceli; Z-index: 0;) .Lider girişi (Ekran: Yok;). Slider etiketi (alt: 10px; ekran: inline-blok; Z-index: 2; genişlik: 26px; yükseklik: 27px; Arka plan: # F4F4F5; Sınır: 1px katı # E6E6E6; Sınır-alt-renk: #bfbfbf; Sınır-yarıçapı: 4px; Kutu-Gölge: Inset 0 1PX 0 #FFFFFFF, 0 1PX 2PX # 000000; Metin Hizası: Merkez; İmleç: Pointer; Yazı Tipi: 14px / 27px Arial, Tahoma; Renk: # 333;) .Slider .Senector_List (Konum: mutlak; alt: 15px; sağ: 15px; z-index: 11;) .Sider .Item (Konum: göreceli; genişlik:% 100;) .Lider .item ~ .item (Konum: mutlak; üst: 0px; sol: 0px;)

İşte CSS3'te JavaScript'siz bir adaptif kaydırıcıdır. Sonunda çıkmalısınız.

CSS sürgüleri, JavaScript'te kaydırıcılar üzerinde bir miktar avantaja sahiptir. Bu avantajlardan biri indirme hızıdır. Yalnızca kaydırıcılar için görüntüler değil, büyük boyutlarda kullanılır (farklı ekranlar için optimizasyon yoksa), bir süre boyunca komut dosyalarını yüklemede de harcanır. Ancak makalede, yalnızca saf CSS'deki kaydırıcıları göreceksiniz.

Sitede kaydırıcılar konusunda bulduğum şey budur:

1. CSS3 Slider Görüntüleri

Radyo düğmesi kullanan CSS'de kaydırıcı gezinmek için slaytlar. Bu radyo havuzları kaydırıcı altında. Ayrıca, radyo havuzlarına ek olarak, sol ve sağdaki atıcı kullanılarak navigasyon yapılır. Hangi görüntünün görüntülendiğini izlemek için - Pseudo-okullar kullanılır: kontrol edildi.

2. Minyatürlerle CSS3 Slider görüntüleri

CSS'deki geçmiş kaydırıcının aksine, burada alttaki radyo havuzları yerine, resim galerisini oluştururken de uygun olan tüm görüntülerin küçük resimleridir. Görüntüler bir tür etki ile değiştirilir: artarken sorunsuz bir şekilde kaybolur.

3. CSS Galeri

Ancak CSS'deki bu kaydırıcı sayfa satmak için mükemmeldir. Kural olarak, borç verme (sayfa satışı) geliştirilmesindeki birçok web geliştiricisi, ilk ekranda (kaydırma olmadan), ziyaretçi bu sayfadaki tüm avantajları hemen gördüklerinde bir kaydırıcı yerleştirin. Ek olarak, bu kaydırıcı da uyarlanabilir.

4. Bağlantısız CSS Slider

Hemen bu kaydırıcının linkleri kullanmadığını fark etmek istiyorum! Varsayılan olarak, ana görüntüye ek olarak (slayt), 2 daha fazla slayt görülebilir. Ana olanın arkasında bulunurlar. Slaytların değişimi güzel modda meydana gelir: önce iki slayt taşınır ve slayt merkez olur, bu daha sonra ana olur. Sonra slayt artar ve geri kalanın önüne yerleştirilir.

5. CSS3'te Adaptif Kaydırıcı

Kontrolü radyokoplara dayanan bir başka adaptif kaydırıcı. Bu kaydırıcının farklı cihazlara nasıl görüneceğini görmek için - tarayıcı penceresini bağımsız olarak değiştirebilir veya kaydırıcı bir sayfada, farklı cihazların özel simgeleri vardır, göreceğiniz bir bilgisayar, tablet veya açık bir kaydırıcı görünecektir. bir akıllı telefon.

*** Bonus Slider ***

Yukarıda sunulduğu tüm sürgülere ek olarak, sizi bir başkasıyla memnun etmek istiyorum. Bu kaydırıcı, görüntü galerisini oluşturmak için mükemmeldir. Kelimeler ne yaptığını açıklamıyor, bu yüzden videodaki her şeyi izlemek daha iyidir:

Çıktı

Kaydırıcıların yardımı ile, görüntü galerilerini daha kompakt olarak yerleştirerek, ilk ekranda bir sürgü ekleyerek (kaydırma yapmadan görünen sayfanın bir parçası), derhal ziyaretçilere ana avantajlara göstermek için bir sayfa satmak için bir sürgü ekleyebilirsiniz. alacak. Kaydırıcıları uygulayabileceğiniz çok fazla yol bulabilirsiniz, ancak bir şey tam olarak net bir şekilde açıktır - uygun kullanımlarla faydalıdır.

Bu derste, görüntülerin sağ solda kaydığı bir atlıkarınca ile dekore edilmiş, başlığa sahip basit bir uyarlanabilir sayfa oluşturacağız. Çözümümüz JavaScript kullanmıyor, slayt gösterisi çoğu modern tarayıcılarda desteklenen CSS3 animasyonlarına dayanıyor: Firefoh 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ ve IE10.

Adım 1 - Hazırlık

4 büyük resme ihtiyacımız olacak (örneğimizde, 1200px x 390px boyutu kullanılır). Yatay bir kaydırıcı için, Photoshop'ta 4800px x 390px resmini hazırlayacağız, tüm görüntülerimiz yatay olarak birbiri ardına yerleştirir ve sonucu web alanı için uygun biçimde kaydeder (" slider-horizontal.jpg.”).

Adım 2 - HTML

Aslında, başlığımız için arka plan konum özelliğini ayarlayacağız. Başlığın kendisi çok basit bir işaretleme var:

L "iLe de batz

Sayfa kodu böyle görünüyor:

L "iLe de batz

Adım 3. Mobil cihazlar için CSS

Mobil cihazlar için stilleri tanımlamaya başlayacağız. Tasarımın temelini ayarlayalım ve daha sonra büyük ekranlar için şablon uzantılarını ekleyin. Ders metninde, yalnızca temel özellikler verilir, tam kod kaynak kodunda görüntülenebilir:

Gövde (Genişlik:% 90; Min-Genişlik: 300px; Maksimum Genişlik: 1200px; Marj: 0 Otomatik; Dolgu-Top: 1EM; Renk: # 504331) Başlık (Metin Hizası: Merkez; Konum: Göreceli;) H1 ( Yazı tipi boyutu: 2.75EM; arka plan: beyaz; ekran: satır içi blok; dolgu: 0 10px; marj-alt: .25em;) H1: Sonra (içerik: "", yükseklik: 2px; ekran: blok; Konum: mutlak ; Sol: 0; Sağ: 0; Üst: .5EM; Z-Dizin: -1; Bordür üstü: 1px Katı # 504331; Sınır-Alt: 1px Katı # 504331;) .Links (arka plan: URL (../) Görüntüleri / map.png) Alt orta tekrarlama; Dolgu-alt: 177px;)

Adım 4. Büyük ekranlar için stiller

Büyük ekran bölümlerinde .ana. ve .ekran farklı şekilde gösterilmelidir. Bölüm .link 300 piksel genişliğe sahip olacak ve sağ taraf panel olarak konumlandırılmış ve bölüm .ana. solda kalacak. Ayrıca bölünmüş bölümlere bir çift çizgi ekleyin. Ekranın genişliğini belirlemek için 1024PX'den daha fazla olan @media isteğini kullanacak:

@Media sadece ekran ve (min-genişlik: 1024px) (.Content (pozisyon: göreceli;) .main (Marj-sağ: 320px; dolgu: .5EM 20px .5EM 0; / * Bir çift çizgi ekleyin * / Sınır-sağ : 1px katı # 504331; kutu-gölge: 2px 0 beyaz, 3px 0 # 504331;) .Links (Konum: Mutlak; Sağ: 0; Üst: 0; Genişlik: 300px; Metin Hizası: Sağ;)))

Adım 5. Başlıktaki uyarlanabilir görüntüler

Dersimizin ana kısmı üzerinde çalışmaya başlayalım: Başlıktaki CSS'de adaptif bir kaydırıcı. İlk olarak, arka plan görüntüsünün uyarlanabilirliğini sağlayacağız.

Başlık (Arka Plan: URL (.. Görüntüler / Slider-Horizontal.jpg) 0 Alt Tekrarı-X; Arka Plan Boyutu:% 400; Dolgu-Alt:% 32.5;)

Yüzde ifade edilen iki değerin yardımı ile (mülk için% 400) arka plan boyutu. ve alt emeklilik için% 32.5) Başlık arka planı, ekranın boyutundan bağımsız olarak doğru bir şekilde çıkacaktır.

Neden% 400? 4 slaytımız var, bu nedenle başlıktaki arka plan görüntüsünden 1/4 gösterilecektir. Yani, arka planın büyüklüğü başlıktan 4 kat daha geniş olmalıdır.

Neden% 32.5? Arka planımızı başlığın altına yerleştiriyoruz. Arka plan görüntüsünün yüksekliği 390px, bireysel slayt 1200px, 390/1200 \u003d 0.325'in genişliği, yani yükseklik% 32,5 genişliktir.

Adım 6. Animasyon

Mülkü canlandıracağız arka plan pozisyonu. İkinci görüntü özelliğini görüntülemek için arka plan pozisyonu önemli olmalı % 33.33333% AltÜçüncü - 66.66667% altve dördüncü - % 100 alt. Özellik geçerli olduğunda ilk görüntü görüntülenir. arka plan pozisyonu eşit 0 alt veya 133.33333% Alt (Tekrarlanma değerini belirledik tekrar-x.).

Her görüntü "şan" zamanın% 25'ine sahiptir. Birincisi,% 0 ila 25, ikincisi -% 25 ila% 50, üçüncü -% 50 ila% 75, son -% 75 ila% 100 arasında. Geçişleri, çıkış zamanının% 25'inden önce bir miktar daha önce kaymaya başlar (% 5'lik bir değer kullanıyoruz) sürdürülecektir. Bu gibi görünüyor @Keyframes.:

@Keyframes h_slide (% 0 (arka plan pozisyonu: 0% alt;)% 20 (arka plan-pozisyon:% 0 alt;)% 25 (arka plan-pozisyon: 33.33333% alt;)% 45 (arka plan-pozisyon: 33.3333% alt ;)% 50 (arka plan pozisyonu: 66.66667%;)% 70 (arka plan pozisyonu: 66.66667%;)% 75 (arka plan pozisyonu:% 100 alt;)% 95 (arka plan pozisyonu:% 100 alt;) % 100 (arka plan pozisyonu: 133.33%;)))

Lütfen tarayıcı önekleri eklemeniz gerektiğini unutmayın: @ -Webkit-KeyFrames (Chrome, Safari, IOS Safari, Android) ve @ -MOZ-KeyFrames (Firefox 15 için).

Aşağıda tam bir başlık kodudur. Animasyonumuz "h_slide", her 24 C'de (her slayt için 6 C) sonsuz bir döngüye tekrarlanır. Zaman işlevi önemlidir kolaylaşın.Böylece her slayt geçişin sonunda yavaşlar.

Başlık (Metin Hizası: Merkez; Konum: Göreceli; Arka Plan: URL (../ Resimler / Slider-Horizontal.jpg) 0 Alt Tekrarı-X; Arka Plan Boyutu:% 400; Dolgu-Alt:% 32,5; -Webkit- Animasyon: H_slide 24s Alışveriş Sonsuz; -Moz-Animasyon: H_slide 24S Alışveriş Sonsuz; Animasyon: H_slide 24S Alışveriş Sonsuz;)

C ücretsiz yapımı HTML ve CSS kaydırıcısı Kod örnekleri: kart, Karşılaştırma, Tam Ekran, Duyarlı, Basit, vb. Mart 2018 koleksiyonunun güncellenmesi. 2 yeni öğe.

İçindekiler.

Kod hakkında.

HTML / CSS / JS'de bir dizi dizi ekran. PNG simgeleri, CSS3 geçişleri ve FlexBox'ı katmanlarıyla kişisel bir deney.

HTML, CSS ve JavaScript bilgi kartı kaydırıcısı.
Andy Tran tarafından yapılan
23 Kasım 2015

Masaüstü ve mobil tarayıcılar üzerinde çalışan fotoğraf kaydırıcı.
Taron tarafından yapıldı.
29 Eylül 2014

Karşılaştırma (Önce / Sonra) Sürgü

Kod hakkında.

Basit ve temiz bir görüntü karşılaştırma kaydırıcısı, tamamen duyarlı ve CSS ve JQuery ile hazırlanmış hazır.

Kod hakkında.

Sadece HTML ve CSS ile bir önce ve sonra kaydırıcı.

Kod hakkında.

Görüntü kaydırıcısından önce / sonra iki katmanımı kullanarak yeni bir fikirle oynayın. Minimum tutmak. Vanilya tutmak. Eğer yararlı olsaydı :)

Vanilya JS, minimal, bakmak güzel.
Huw tarafından yapılmış.
3 Temmuz 2017

Kod hakkında.

Javascript ile "bölünmüş ekran" kaydırıcı elemanı.

Bir SVG içindeki bir önce ve sonradan bir süre için küçük bir deney. Maskeleme oldukça basit hale getirir. Hepsi SVG, görüntüler ve başlıklar birlikte güzelce ölçeklendirir. Slider kontrolü için GreenSock'un sürüklenmesi ve rötuş eklentileri kullanılmıştır.
Craig Roblewsky tarafından yapılan
17 Nisan 2017

Sürgü için özelleştirilmiş aralık girişi kullanın.
Dudley Storey tarafından yapılan
14 Ekim 2016

HTML, CSS ve JavaScript ile duyarlı görüntü karşılaştırma kaydırıcısı.
Ege Görgülü tarafından yapılan
3 Ağustos 2016

HTML5, CSS3 ve JavaScript Video Karşılaştırma kaydırıcısı öncesi.
Dudley Storey tarafından yapılan
24 Nisan 2016

CSS3 ve JQuery tarafından desteklenmekte olan 2 görüntüyü hızlı bir şekilde karşılaştırmak için kullanışlı bir sürüklenebilir kaydırıcı.
Codyhouse tarafından yapılmıştır.
15 Eylül 2014

Tam ekran sürgüleri.

Kod hakkında.

Tam ekran kaydırıcısı için güzel geçiş etkisi.

Kod hakkında.

Swiper.js ile yatay paralaks sürgülü kaydırıcı.

Kod hakkında.

Fare hareketinde duyarlı pürüzsüz 3D perspektif kaydırıcı.

HTML, CSS ve JavaScript ile tam ekran kahraman görüntü kaydırıcı (kaydırma panelleri teması).
Tobias bogliolo tarafından yapılmış
25 Haziran 2017

Animasyonu geliştirmek için hız ve hız etkileri (UI paketi) kullanarak kaydırıcı bir etkileşim şey. Animasyon, ok tuşları, nav tıklama veya kaydırma jakı ile tetiklenir. Bu sürüm, etkileşimin bir parçası olarak sınırları içerir.
Stephen Scaff tarafından yapılan
11 Mayıs 2017

Görüntüleri göstermek için minimum bir tarzda basit kaydırıcı. Görüntünün bir kısmı her slaytta çıkar.
Nathan Taylor tarafından yapılan
Jannuary 22, 2017

Şey, oldukça kolay özelleştirilebilir. Yazı tipini, yazı tipi boyutunu, yazı tipi rengini, animasyon hızını güvenle değiştirebilirsiniz. JS'deki dizideki yeni bir dizgenin ilk harfi yeni bir slaytta görünecektir. Yeni bir slayt oluşturmak (veya silmek) kolaydır (veya silmek): 1. JS'deki dizide yeni bir şehir ekleyin. 2. Slayt değişkeni sayısını değiştirin ve CSS'de SCSS listesine yeni bir görüntü koyun.
Ruslan Pivovarov tarafından yapılan
8 Ekim 2016

1. Resim maskeleme dikdörtgen kenarlığı için klipsin (yalnızca WebKit).
2. Bu maske için karışım modu.
3. Akıllı Renk Sistemi, sadece renk adınızı ve değerini SASS haritasına yerleştirin ve ardından bu renk adıyla öğeleri için uygun bir sınıf ekleyin ve her şey işe yarayacak!
4. Cool Credits Yan menüsü (demo ortasındaki küçük düğmeye tıklayın).
5. Vanilya js zekâ sadece< 200 lines of code (basically it’s just adds/removes classes).

Nikolay Talanov tarafından yapılan
7 Ekim 2016

Saf JS ve CSS'ye (kütüphaneler olmadan) dayanan kaydırma ile bu çarpık kaydırıcı.
Victor Belozyorov tarafından yapılan
3 Eylül 2016

Pokemon tasarımı ile kaydırıcı bir animasyon.
Pham Mikun tarafından yapılan
18 Ağustos 2016

HTML, CSS ve JavaScritp Slider karmaşık animasyon ve yarı çarptı açılı metin ile.
Ruslan Pivovarov tarafından yapılan
13 Temmuz 2016

HTML, CSS ve JavaScript ile kaydırıcı paralaks etkisi.
Manuel Madeira tarafından yapılan
28 Haziran 2016

Dalgalanma efektli HTML, CSS ve JavaScript kaydırıcısı.
Pedro Castro tarafından yapılan
21 Mayıs 2016

HTML, CSS ve JavaScrip ile kaydırıcıyı açığa çıkaran klipsin.
Nikolay Talanov tarafından yapılan
16 Mayıs 2016

Önceki / sonraki slaytların önizlemeli GSAP + kaydırıcı kaydırıcı.
Karlo Videk tarafından yapılan
27 Nisan 2016

HTML, CSS ve JavaScript tam sayfa kaydırıcısı.
Joseph Martucci tarafından yapılan
Kebreşal 28, 2016

HTML, CSS ve JavaScript ile tam kaydırıcı prototip.
GREBER Sampaio tarafından yapılan
6 Ocak 2016

Greensocks Tweenlite / Tweenmax ile canlandırılmış bir tam ekran, bir çeşit duyarlı, slayt gösterisi.
Arden tarafından yapılır.
12 Aralık 2015

Arden tarafından yapılır.
5 Aralık 2015

HTML, CSS ve JavaScript ile tam ekran kaydırıcı (GSAP zaman çizelgesi) # 1.
Diaco m.lotfollahi tarafından yapılan
23 Kasım 2015

Özel efektli HTML ve CSS kaydırıcısı.
Nikolay Talanov tarafından yapılan
12 Kasım 2015

HTML, CSS ve JavaScript ile paralaks ile tam ekran sürgü kaydırıcı.
Nikolay Talanov tarafından yapılan
12 Kasım 2015

Kavram döndürme kaydırıcısı. Klip-yolu ve çok sayıda matematik kullanır.
Tyler Johnson tarafından yapılan
16 Nisan 2015

Translatex ve Translate3D pürüzsüzlüğü kullanarak basit bir tam ekran CSS ve JQuery kaydırıcısı!
Joseph tarafından yapılmıştır.
19 Ağustos 2014

Duyarlı sürgü.

Kod hakkında.

Resim ve içerik paralaks etkisi ile.

Kod hakkında.

Yalnızca CSS kullanarak küçük resimleri olan ve görüntünün en boy oranını koruyarak tamamen duyarlı bir dikey kaydırıcı oluşturmayı bir deney.

Kod hakkında.

Vanilya Javascript ile yapılan basit bir FlexBox görüntü kaydırıcısı / atlıkarınca.

Kod hakkında.

Bu, bir slaydın her açıldığında simulas bir hareket bulanıklığı etkisi olan bir deneydir. SVG Gaussian Bulanıklık Filtrenin ve bazı CSS anahtar kareleri animasyonundan yararlanır. Etkisi, herhangi bir javascript'in uygun şekilde çalışmasını gerektirmese de, bu örnekte JavaScript yalnızca kaydırıcı işlevselliği için kullanılır.

Kod hakkında.

Cool, JS ile kaydırıcıyı canlandırır.

Kod hakkında.

Bu, SVG kalıplarının, yalnızca bir CSS-Yalnızca görüntü kaydırıcısı için maskeli benzeri görüntüler oluşturmamıza nasıl yardımcı olabilecek bir deneydir.

Bazı kaydırıcı geçişlerini keşfetmek. Paralaks seçeneğiyle kaydırıcıyı kaydırın. CSS filtreleri ile çoğunlukla burada oynamak.
Mirko Zorić tarafından yapılan
12 Haziran 2017

Bazı ince tween animasyonları ile basit GSap kaydırıcı.
Goran Vrban tarafından yapılan
9 Haziran 2017

HTML, CSS ve JavaScript ile kaydırıcı UI.
Mergim Ujkani tarafından yapılan
6 Haziran 2017

Kaydırıcı gsap virsion 2.
Em tarafından yapılmış
4 Mayıs 2017

Basit bir sınıf anlaşma kullanarak küçük bir Slicej geçiş kaydırıcısı. Zamanlamaları biraz pürüzlendirmek ve mobil için en iyi yaklaşıma karar vermelidir (sadece yığın, dokunma olayları ekleyin, görüntüleri tam görünümde bulundurun, vb. Görüntüleri Filview'i animasyon dışı durumlarında yapmak için, bu da iyidir.
Stephen Scaff tarafından yapılan
3 Ocak 2017

Kaydırıcı bir animasyon efekti oluşturmak için CSS sınır görüntüsü ve klipsin yolunu kaldırdı.
Emily Hayman tarafından yapılan
31 Aralık 2016

FlexBox ile inşa edilen küçük kaydırıcı. Biraz duyarlı ve kaydırıcı alanın yanında sabit elemanları olabilir.
Robert tarafından yapılır.
28 Kasım 2016

HTML, CSS Canvas Slider.
Nvagelis tarafından yapılmış
29 Ekim 2016

HTML, CSS ve JavaScript 3D Pürüzsüz Kaydırıcı.
Eduardo Allegrini tarafından yapılan
19 Ekim 2016

HTML ve CSS Cupcake Slider Sprinkles ile!
Jamie Coulter tarafından yapılan
14 Ekim 2016

Mario S Maselli tarafından yapılan
12 Ekim 2016

HTML, CSS ve Javascript ile UI Animasyonu # 2'yi keşfetme.
Mario S Maselli tarafından yapılan
22 Eylül 2016

HTML, CSS ve JavaScript ile UI Animasyon # 3'ü keşfedin.
Mario S Maselli tarafından yapılan
22 Eylül 2016

HTML, CSS ve JavaScript ile E-Ticaret Kaydırıcı V2.0.
Pedro Castro tarafından yapılan
17 Eylül 2016

HTML, CSS ve JavaScript Kıvrımlı arka plan ile temiz kaydırıcı.
Ruslan Pivovarov tarafından yapılan
13 Eylül 2016

HTML, CSS ve JavaScript ile UI Animasyonu # 1'i keşfedin.
Mario S Maselli tarafından yapılan
8 Eylül 2016

CSS'nin gücünün keyfini çıkarın: her bir orta görüntüyü yukarı ve aşağı LightBox ile Slider.
KESSO tarafından yapılır.
15 Ağustos 2016

Çift pozlama, 2 farklı görüntüyü tek bir görüntüye birleştiren fotoğraf ürün tekniğidir.
Misaki Nakano tarafından yapılan
3 Ağustos 2016

CSS3 özellik klibini kullanarak kaydırıcı.
Pedro Castro tarafından yapılan
1 Mayıs 2016

Duyarlı CSS kaydırıcısı.
Geekwen tarafından yapılmıştır.
19 Nisan 2016

Bu, doğrudan çevrilemeyen güzel anlamları olan kelimeleri görüntüleyen basit bir kaydırıcı deneydir. Odaklanma: Zarif tipografi ve basit ama tamamen çekici geçişler.
Joe Harry tarafından yapılan
5 Nisan 2016

Animasyon fikri, CSS klip yolunun değerini değiştirmektir, böylece maskeleme etkisi oluşturur.
Bhakti Al Akbar tarafından yapılan
31 Mart 2016

HTML, CSS ve JavaScript ile nokta kaydırıcı.
Derek Nguyen tarafından yapılan
16 Mart 2016

Prizma, HTML, CSS ve JavaScript ile kaydırıcı.
Victor tarafından yapılan
12 Mart 2016

HTML, CSS ve Javascript ile Arka Plan Galerisi.
Ron Gierlach tarafından yapılan
30 Kasım 2015

HTML, CSS ve JavaScript kaydırıcı çözümü.
Jürgen Genser tarafından yapılan
30 Eylül 2015

Sequence.js tarafından desteklenen bir ürün kaydırıcısı. Sequence.js - Eşsiz sürgü, sunumlar, afişler ve diğer adım tabanlı uygulamalar oluşturmak için duyarlı CSS animasyon çerçevesi.
Ian Lunn tarafından yapılan
15 Eylül 2015

Tiny daire özelleştirilmiş kaydırıcı.
Bram de Haan tarafından yapılan
11 Ağustos 2015

HTML, CSS ve JavaScript ile Duyarlı GTA V Slider.
Eduard Mayer tarafından yapılan
24 Ocak 2014

Bir kaydırıcı gibidir, ancak bilinmeyen sebeplerden dolayı küpleri döndürür.
Eric Brewer tarafından yapılan
4 Aralık 2013

Hugo Darbybrown tarafından yapılan
28 Ağustos 2013

Basit kaydırıcılar.

Görüntü kaplaması kaydırıcısı HTML, CSS ve Vanilla Javascript ile.
Yugam tarafından yapılan
7 Haziran 2017

HTML ve CSS özellik kaydırıcısını seçti.
Joshua Hibbert tarafından yapılan
16 Haziran 2016

Kod hakkında.

Basit saf ile yapılmış

HTML, CSS ve JavaScript ile Slider özelliği.
Andy Lorimer tarafından yapılan
23 Ekim 2015

Sadece CSS.
Alberto Hartzet tarafından yapılan
6 Mayıs 2015

Özellikler: - Otomatik Slayt Gösterisi - Hover - Dinamik Slayt Sayacı'nda duraklat - Hover'daki kontrolleri göster / gizleyin.
André Cortellini tarafından yapılan
14 Ağustos 2014

HTML, CSS ve JavaScript ile Çok Eksenli Görüntü Kaydırıcı.
Burak Can tarafından yapılan
22 Temmuz 2013

Küp kaydırıcısı, HTML5 / CSS3 3D dönüşümleri ile küçük bir deney.
Ilya K tarafından yapılan
26 Haziran 2013

Sitenize yüksek kaliteli bir JQuery-Slider eklemeniz gerekirse, bu makalede gerekli eklentilerin bir açıklamasını bulacaksınız. JQuery'nin JavaScript ile önemli ölçüde basitleştirdiği gerçeğine rağmen. Bir web tasarımı oluşturma sürecini hızlandırmak için hala eklentilere ihtiyacımız var.

Bu eklentilerin bazılarında değişiklik yapabilir ve sitemizin görevlerine daha fazla cevap veren yeni sürgüler oluşturabiliriz.

Diğer sürgüler için, sadece başlıklar, görüntüler ekleyin ve kaydırıcıyla birlikte gelen slaytları değiştirmek için efektleri seçin. Tüm bu eklentilerin ayrıntılı belgelerin eşlik ettiği, bu nedenle yeni efektler ekleyin veya onlara fonksiyonlar daha fazla zorluklanmayacaktır. Tecrübeli bir jquery programcısıysanız, olaylara bağlı olarak tetikleyicileri bile değiştirebilirsiniz.

Adaptif tasarım gibi son eğilimler, bir eklenti veya komut dosyası uygulayıp uyguladığınızdan bağımsız olarak web projeleri için çok önemlidir. Tüm bu öğeler bu eklentilerin her birini çok esnek hale getirir. 2014 yılında olan her şey bu listeye dahil edilmiştir.

Jquery-kaydırıcılar görüntüleri

JSSOR Duyarlı kaydırıcı.

Son zamanlarda, bu fonksiyonel jquery -colder rastladım ve ilk önce çalışmasıyla çok iyi başa çıktığından emin olabilirim. Kaydırıcının açık kaynak kodunun pahasına genişletilebilen sınırsız olanakları içerir:

• Uyarlanabilir Tasarım;
• 15'den fazla ayar;
• Görüntü değişiminin 15'ten fazla etkisi;
• Görüntülerin galerisi, atlıkarınca, tam ekran boyutuna destek;
• Dikey rotator afişler, slaytların listesi;
• Video desteği.

Demo | İndirmek

PGWSLIDER - Uyarlanabilir JQuery / Zepto Bazlı Kaydırıcı

Bu eklentinin tek görevi, görüntülerin slaytlarını göstermektir. Çok kompakt, çünkü jQuery dosyalarının büyüklüğü sadece 2,5 KB'dir, bu da gerçekten hızlı bir şekilde yüklemenizi sağlar:

• Adaptif düzeni;
• SEO Optimizasyonu;
• Farklı tarayıcılarla destek;
• Basit görüntü geçişleri;
• Arşiv boyutu sadece 2,5 KB'dir.

Demo | İndirmek

Jquery dikey haber kaydırıcısı

Sol taraftaki yayınların bir listesine sahip haber kaynakları için tasarlanmış esnek ve kullanışlı JQuery-Slider ve sağdaki görüntünün sonuçlandırılması:

• Uyarlanabilir Tasarım;
• Dikey Haber Değiştirme Sütunu;
• Genişletilmiş başlıklar.

Demo | İndirmek

Wallop kaydırıcısı.

Bu kaydırıcı jQuery içermez, ancak çok kompakt olduğu için sunmak isterim ve sayfaları indirme süresini önemli ölçüde azaltmanıza izin verir. İstersen bana haber ver:

• Adaptif düzeni;
• Basit tasarım;
• Slaytları değiştirmek için çeşitli seçenekler;
• Minimum javascript kodu;
• Sadece 3KB'nin boyutu.

Demo | İndirmek

Düz stil polaroid galeri

Masanın üzerinde esnek bir düzen ve güzel bir tasarıma sahip dağınık belgeler tarzındaki galeri, çoğunuzun ilgisini çekmelidir. Tabletler ve büyük ekranlar için daha uygundur:

• Adaptif kaydırıcı;
• Düz tasarım;
• Slaytların rastgele değişimi;
• Kaynak koduna tam erişim.

Demo | İndirmek

A-Slider.

Demo | İndirmek

Hislider - HTML5, JQuery ve WordPress kaydırıcı görüntüsü

Hislider, fantastik geçişlerle çeşitli galeri görüntüleri oluşturabileceğiniz yeni bir ücretsiz jquery kaydırıcı eklentisi tanıttı:

• Adaptif kaydırıcı;
• Programlama bilgisini gerektirmez;
• Birkaç muhteşem şablon ve derileri;
• Güzel geçiş efektleri;
• Farklı platformlar için destek;
• WordPress, Joomla, Drupal ile uyumluluk;
• Farklı türlerin içeriğini gösterme yeteneği: görüntüler, YouTube videoları ve Videa Videa;
• Esnek ayar;
• Faydalı ek fonksiyonlar;
• Sınırsız görüntülenen içeriğin hacmi.

Demo | indir

Vay kaydırıcı.

WOW Slider, şaşırtıcı görsel efektlere sahip görüntülerin adaptif bir jquery-kaydırıcısıdır ( domino, dönüş, bulanıklık, darbe ve flaş, kalkış, güneşlikler) ve profesyonel şablonlar.

WOW Slider, kodu anlamaya ve görüntüleri düzenlemeye gerek kalmadan saniye içinde fantastik sürgü oluşturmanıza olanak tanıyan Kurulum Sihirbazı ile birlikte gelir. Ayrıca Plug-in Joomla ve WordPress'in sürümünü indirmek için de mevcut:

• Tamamen uyarlanabilir;
• Tüm tarayıcılar ve tüm cihaz türleri için destek;
• Duyusal cihazlar için destek;
• WordPress'de Basit Kurulum;
• Kurulumda esneklik;
• SEO-Optimize edilmiş.

Demo | indir

Nivo Slider - Ücretsiz JQuery-Plugin

Nivo Slider, tüm dünyaya en güzel ve kullanımı kolay görüntü kaydırıcısı olarak bilinir. Nivo kaydırıcı eklentisi ücretsizdir ve MIT lisansı altında serbest bırakılır:

• JQuery 1.7 ve üstü;
• Güzel geçiş efektleri;
• Kurulumda basit ve esnek;
• Kompakt ve uyarlanabilir;
• Kodu açın;
• Güçlü ve basit;
• Birkaç farklı şablon;
• Otomatik görüntü süsleme.

Demo | indir

Teknik Dokümantasyonlu Basit JQuery Slider

Fikir, birkaç küçük elemanın farklı animasyon etkileriyle uçabileceği Apple Kaydırıcılarından ilham aldı. Geliştiriciler, bu konsepti, "kalkış" unsurlarının farklı kategorilerdeyken, çevrimiçi mağazanın basit bir tasarımını oluşturma için minimum gerekliliklerle gerçekleştirmeye çalıştılar:

• Adaptif düzeni;
• Minimalist tasarım;
• Slaytların kaybının ve kaymalarının çeşitli etkileri.

Demo | indir

Tam Boy Jquery Image Slider

Sayfanın genişliğinin% 100'ünü kaplayan ve mobil cihazların ekranlarının boyutuna ayarlayan çok basit bir kaydırıcı. CSS geçişleri ile çalışır ve hayvanlarla "formda" görüntüler. Resme bir bağlantıyı bağlamak istemiyorsanız, çapa değiştirilebilir veya silinebilir.

Kurulurken, kaydırıcı% 100 ekran genişliğinde ortaya çıkar. Ayrıca slaytların boyutunu otomatik olarak azaltabilir:

• Adaptif jquery -Slider;
• Tam boyutlu;
• Minimalist tasarım.

Demo | indir

Elastik İçerik Kaydırıcı +

Elastik İçerik Slidener Ebeveyn elemanının boyutuna bağlı olarak genişliği ve yüksekliği otomatik olarak ayarlar. Bu basit bir jquery kaydırıcısı. Yukarıdaki bir slayt bölgesinden oluşur ve navigasyon sekmesi panelleri alttaki. Kaydırıcı, genişliğini ve yüksekliğini ana kabın boyutuna göre ayarlar.

Çapraz olarak küçük ekranları görüntülerken, navigasyon sekmeleri küçük simgelere dönüştürülür:

• Uyarlanabilir Tasarım;
• Bir fare tıklaması ile kaydırın.

Demo | indir

Ücretsiz 3D Yığın Kaydırıcısı

Deneysel kaydırıcı, 3D görüntüleri gezinme. İki yığın, görüntünün kaydırılmasının kaydırıldığı zaman kaydırıcının ortasında görüntülenen kağıt destelerine benziyor:

• Uyarlanabilir Tasarım;
• Flip-transformation;
• 3d efektleri.

Demo | indir

JQuery ve CSS3 + kılavuzuna dayalı fullscreen yarık kaydırıcı

Kılavuzdan, vurgulanan bir kaydırıcıyı nasıl oluşturacağınızı öğreneceksiniz: Fikir, "kesmek" ve aşağıdaki veya önceki görüntüyü açarken bu formdaki geçerli slaytı görüntülemektir. JQuery ve CSS - Animasyon kullanarak, benzersiz geçiş efektleri oluşturabiliriz:

• Uyarlanabilir Tasarım;
• Bölünmüş geçiş;
• Tam ekran kaydırıcı.

Demo | indir

Unislider - Çok Küçük JQuery Slider

Gereksiz körük ve markalama yok, 3kb'den daha az boyut. Slaytlarınız için herhangi bir HTML kodunu kullanın, CSS ile genişletin. Tüm açılı olmayanlarla ilgili olanlar GitHub'da bulunuyor:

• Çeşitli tarayıcılar için destek;
• Klavye desteği;
• Yükseklikte ayarlama;
• Uyarlanabilir Tasarım;
• Duyusal giriş desteği.

Demo | İndirmek

Minimum duyarlı slaytlar.

Basit ve kompakt eklenti ( sadece 1 KB boyutunun boyutu), konteynerin içindeki elemanları kullanarak adaptif bir kaydırıcı oluşturur. SorumlularSlides.js, IE6 ve Yukarıdaki IE'nin tüm sürümleri de dahil olmak üzere çok sayıda tarayıcı ile çalışır:

• Tamamen uyarlanabilir;
• 1 kb boyutu;
• CSS3, JavaScript aracılığıyla başlatılma olasılığı ile geçiş;
• İşaretli bir liste kullanarak basit işaretleme;
• Geçişlerin etkilerini ve bir slaydın görüntüleme süresini yapılandırabilme;
• Birkaç slayt gösterisi oluşturma yeteneğini destekler;
• Otomatik ve el kaydırma.

Demo | indir

Kamera - Ücretsiz JQuery Slider

Kamera, çok sayıda geçiş efekti olan bir eklentidir. Mobil cihazlar tarafından desteklenen kurulumda basit:

• Tamamen uyarlanabilir tasarım;
• İmzalar;
• Video ekleme yeteneği;
• 33 farklı renkler simgeler.

Demo | indir

Slidesjs, adaptif jquery eklentisi

Slidejs, duyusal cihazlar ve CSS3 geçişleri için destekle jquery (1.7.1 ve üzeri) adaptif bir eklentidir. Onunla deneyin, projenize slaytj'ları nasıl ekleyeceğinizi çözmenize yardımcı olacak birden fazla hazır örneği deneyin:

• Uyarlanabilir Tasarım;
• CSS3 -Productions;
• Duyusal cihazlar için destek;
• Kurulumda basit.

Demo | İndirmek

Bx jquery kaydırıcısı.

Bu ücretsiz bir uyarlanabilir jQuery kaydırıcısıdır:

• Tamamen uyarlanabilir - herhangi bir cihaza ayarlar;
• Yatay, dikey slayt değişiklikleri;
• Slaytlar görüntüler, video veya html -Content içerebilir;
• Duyusal cihazlar için genişletilmiş destek;
• Slayt animasyonu için CSS-Dönüşümleri Kullanma ( donanım ivmesi);
• Geri arama API ve tamamen kamu yöntemleri;
• Küçük dosya boyutu;
• Uygulanması kolay.

Demo | indir

FlexSlider 2.

En iyi uyarlanabilir kaydırıcı. Yeni sürüm, iş hızını arttırmak için kesinleşmiştir.

Demo | İndirmek

Galleria - JavaScript'e dayanan Uyarlanabilir Fotoğraf Galerisi

Galleria, yüksek kalitede görüntü galerisi oluşturmak için milyonlarca site üzerinde kullanılır. Çalışmaları hakkında olumlu eleştirilerin sayısı basitçe rulo:

• Tamamen ücretsiz;
• Tam ekran görüntüleme modu;
• % 100 uyarlanabilir;
• Gerekli Programlama Deneyimi;
• İPhone, iPad ve diğer dokunma cihazlarını destekleyin;
• Flickr, Vimeo, YouTube ve çok daha fazlası;
• Birkaç konu.

Demo | İndirmek

Yabanmersini - Basit Uyarlanabilir JQuery Image Slider

Size özel olarak adaptif web tasarımı için yazılmış bir jquery-kaydırıcıyı sunuyorum. Yaban mersini, adaptif şablonlarla çalışmak için özel olarak yazılmış olan açık kaynaklı bir görüntü kaydırıcısının deneysel bir eklentisidir:

• Minimum tasarım;
• Adaptif düzeni;
• Sunumlar.

Demo | İndirmek

JQuery Popeye 2.1.

Programın ilk sürümünün standart elemanları kullanılır: Slider sol tarafta gizlenir ve sağa doğru açılır. Aynı navigasyon ve fare imlecini gezdirirken açılan imzalar:

• Uyarlanabilir Tasarım;
• İmzalar için destek;
• Slayt gösterisi modu.

Demo | İndirmek