ücretsiz koleksiyon HTML ve CSS kaydırıcısı kod örnekleri: kart, karşılaştırma, tam ekran, duyarlı, basit, vb. Haziran 2018 koleksiyonlarının güncellemesi. 7 yeni element.

İçindekiler

İlgili Makaleler

kod hakkında

HTML/CSS/JS'de bir dizi alıştırma ekranı. PNG simgeleri, CSS3 geçişleri ve flexbox katmanlama ile kişisel deney.

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

Masaüstü ve mobil tarayıcılarda çalışan fotoğraf kaydırıcısı.
Taron tarafından yapılmıştır
29 Eylül 2014

Karşılaştırma (Önce/Sonra) Kaydırıcıları

kod hakkında

Güçlü ve Temiz Görüntü karşılaştırma kaydırıcısı, tamamen duyarlı ve CSS ve jQuery ile dokunmaya hazır.

kod hakkında

Yalnızca html ve css içeren bir öncesi ve sonrası kaydırıcısı.

kod hakkında

Bir kerede yeni bir düşünceyle, galip gelen iki mektubumu / işaretinin görüntüsünü karşılayın. Minimum düzeyde tutmak. Vanilya tutmak. faydalı olduysa beğen :)

Vanilla JS, minimal, görünümden önce garnitür.
Huw tarafından yapılmıştır
3 Tem 2017

kod hakkında

JavaScript içeren bir "bölünmüş ekran" kaydırıcı öğesi.

Tamamı bir SVG içinde kaydırıcıdan önce ve sonra eksen kısa deneyi. Maskeleme oldukça basit hale getirir. Hepsi SVG olduğundan, resimler ve başlıklar birlikte güzel bir şekilde ölçeklenir. GreenSock'un Sürüklenebilir ve ThrowProps eklentileri, denetleyici için bir seçimdir.
Craig Roblewsky tarafından yapılmıştır.
17 Nisan 2017

Kaydırıcı için zafer mutfak başlatma girişi.
Dudley Storey tarafından yapılmıştır
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ılmıştır.
3 Ağustos 2016

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

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

Tam Ekran Kaydırıcılar

kod hakkında

Radyo girişlerine dayalı basit kaydırıcı. %100 saf HTML + CSS. Yön tuşlarıyla da çalışır.

Duyarlı: evet

Bağımlılıklar:-

kod hakkında

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

kod hakkında

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

kod hakkında

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

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

Animasyonu geliştirmek için Hız ve Hız efektlerini (UI Paketi) kullanan yavaş etkileşim olayı. Animasyon, ok tuşları, gezinme tıklaması veya kaydırma jakı ile tetiklenir. Bu sürüm, etkileşimler içerir.
Stephen Scaff tarafından yapılmıştır.
11 Mayıs 2017

Görüntüleri göstermek için minimal tarzda basit kaydırıcı. Her slaytta görüntünün bir kısmı çıkar.
Nathan Taylor tarafından yapılmıştır
22 Ocak 2017

Şey oldukça kolay özelleştirilebilir. Yazı tipini, yazı tipi boyutunu değiştirmeyi kabul edebilirsiniz, yazı rengi, animasyon hızı. JS'deki dizideki yeni dize için ilk yay bir gece slaydında görünecektir. Yeni bir slayt oluşturmak (veya silmek) kolaydır: 1. JS'deki diziye yeni şehir ekleyin. 2. İşaret sayısı değişkenini değiştirin ve aw görüntüsünü CSS'de scss listesine yerleştirin.
Ruslan Pivovarov tarafından yapılmıştır.
8 Ekim 2016

1. Görüntü maskeleme dikdörtgen kenarlığı için klip yolu (yalnızca webkit).
2. Bu maske için karışım modu.
3. Akıllı renk sistemi, sadece renk adınızı ve değerinizi sass haritasına koyun ve ardından bu renk adıyla özellik sınıfını öğelere ekleyin ve her şey işe yarayacaktır!
4. Harika krediler yan menüsü (demonun ortasındaki küçük düğmeyi tıklayın).
5. Vanilya js ile sadece< 200 lines of code (basically it’s just adds/removes classes).

Saf JS ve CSS'de (kütüphaneler olmadan) bükümlü spirallere sahip herhangi bir squash saç tokası.
Victor Belozyorov tarafından yapılmıştır.
3 Eylül 2016

Pokemon tasarımı ile kaydırıcı animasyonu.
Pham Mikun tarafından yapılmıştır.
18 Ağustos 2016

Karmaşık animasyon ve yarı renkli açılı metin içeren HTML, CSS ve Javascript kaydırıcısı.
Ruslan Pivovarov tarafından yapılmıştır.
13 Temmuz 2016

HTML, CSS ve JavaScript ile kaydırıcı paralaks efekti.
Manuel Madeira tarafından yapılmıştır.
28 Haziran 2016

HTML, CSS ve JavaScript, dalgalanma etkisi ile öne çıkıyor.
Pedro Castro'nun yaptığı
21 Mayıs 2016

HTML, CSS ve JavaScript ile kaydırıcıyı gösteren Clip-Path.
Nikolay Talanov tarafından yapılmıştır.
16 Mayıs 2016

GSAP+ kaygan kaydırıcıönceki/sonraki slaytların önizlemesi ile.
Karlo Videk tarafından yapılmıştır.
27 Nisan 2016

HTML, CSS ve JavaScript tam sayfa kaydırıcısı.
Joseph Martucci tarafından yapılmıştır.
28 Şubat 2016

HTML, CSS ve JavaScript ile tam kaydırıcı prototipi.
Gluber Sampaio tarafından yapılmıştır.
6 Ocak 2016

Greensocks TweenLite/Tweenmax ile canlandırılan tam ekran, sıralamaya duyarlı, slayt gösterisi.
Arden tarafından yapılmıştır
12 Aralık 2015

HTML, CSS ve JavaScript ile Tam Ekran kaydırıcı (GSAP Zaman Çizelgesi) #1.
Diaco M.Lotfullahi tarafından yapılmıştır.
23 Kasım 2015

Özel efektlerle HTML ve CSS kaydırıcısı.
Nikolay Talanov tarafından yapılmıştır.
12 Kasım 2015

HTML, CSS ve JavaScript ile paralakslı tam ekran sürükle-kaydırıcı.
Nikolay Talanov tarafından yapılmıştır.
12 Kasım 2015

Dönen kaydırıcı kavramının kanıtı. Klip yolu ve bir sürü matematik yardımı için.
Tyler Johnson tarafından yapılmıştır.
16 Nisan 2015

TranslateX ve translate3d düzgünlüğünü kullanan basit bir tam ekran CSS ve jQuery kaydırıcısı!
Yusuf tarafından yapılmıştır
19 Ağustos 2014

Duyarlı Kaydırıcılar

kod hakkında

Görüntü Opaklığı Kaydırıcısı

HTML ve CSS'de görüntülerin opaklık kaydırıcısı.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar:-

kod hakkında

Yığılmış Esnek Slayt Düzeni

Bu stok, slaytları oluşturan, diğerlerinde kırpılmış olanları (özellikle içeri / dışarı çekim yapmak için sıkışmış olanları) açıklamaktadır. Tse "nashtuvannya їх derinlikleri ve agresif konumu olmadan zafer: mutlak; bir koku gibi є povnim esnek ve normal sayfa akışında tutması kolay.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar:-

kod hakkında

Duyarlı Kaydırıcı

HTML, CSS ve JavaScript'te animasyonlu duyarlı kaydırıcı.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar: animate.css

kod hakkında

Maskeli Metinli Kaydırıcı

CSS, daha çok maskelenmiş metin içeren bir kaydırıcı gibidir.

Uyumlu tarayıcılar: Chrome, Edge (kısmi), Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar:-

kod hakkında

Paralaks efektli görüntü ve içerik.

kod hakkında

CSS sadece slayt galerisi.

Uyumlu tarayıcılar: Chrome, Edge, Firefox, Opera, Safari

Duyarlı: evet

Bağımlılıklar:-

kod hakkında

Saf HTML/CSS Kaydırıcısı

Dairesel SVG ilerleme çubuğuna sahip saf HTML/CSS kaydırıcısı.

Uyumlu tarayıcılar: Chrome, Edge (kısmi), Firefox (kısmi), Opera, Safari

Duyarlı: evet

Bağımlılıklar: font-awesome.css

kod hakkında

Yalnızca CSS kullanan ve görüntülerin en boy oranını koruyan küçük resimlerle tamamen duyarlı bir dikey kaydırıcı oluşturma denemesinde.

kod hakkında

Vanilya JavaScript ile yapılmış basit bir Flexbox görüntü kaydırıcısı/atlıkarınca.

kod hakkında

Slayt her değiştirildiğinde hareket bulanıklığı efektini simüle eden bu deney. Neden SVG Gauss Bulanıklığı filtresi ve CSS ana kare animasyonunun nasıl çalıştığı. Daha fazla sonuç, genel olarak çalışmak için herhangi bir Javascript gerektirmez, bu şekilde Javascript yalnızca kaydırıcı işlevi için galip gelir.

kod hakkında

JS ile harika animasyon kaydırıcısı.

kod hakkında

SVG desenlerinin yalnızca CSS görüntü kaydırıcısı için maskeli benzeri görüntüler oluşturmamıza nasıl yardımcı olabileceğine ilişkin deney yapın.

Bazı kaydırıcı geçişlerini keşfetme. Paralaks seçeneği etkinleştirilmiş kaydırıcı kaydırıcı. CSS filtreleriyle oynamak en iyisidir.
Mirko Zoric tarafından yapılmıştır.
12 Haziran 2017

Bazı ince ara animasyonlar içeren basit GSAP kaydırıcısı.
Goran Vrban'ın yaptığı
9 Haziran 2017

HTML, CSS ve JavaScript içeren kaydırıcı kullanıcı arayüzü.
Mergim Ujkani tarafından yapılmıştır.
6 Haziran 2017

Kaydırıcı GSAP 2.
Em An tarafından yapılmıştır
4 Mayıs 2017

Basit bir ekleme sınıfı anlaşması kullanan küçük bir geçiş kaydırıcısı. Savaşın derin bir görünümünü alın ve mobil cihazlar için en kısa cihazlarda (sadece yığınlayın, dokunma olayları ekleyin, görüntüleri tam görünüm alanı yapın, vb.) yeni ev durumunuzda, ki bu da oldukça havalı.
Stephen Scaff tarafından yapılmıştır.
3 Ocak 2017

Daha yumuşak bir animasyon efekti oluşturmak için kaldıraçlı CSS kenarlık görüntüsü ve klip yolu.
Emily Hayman tarafından yapılmıştır
31 Aralık 2016

Flexbox ile oluşturulmuş küçük kaydırıcı. Deyaky, hto vіdpovidaє ve sihirbazın altındaki sabit elemanlar olabilir.
Robert tarafından yapılmıştır
28 Kasım 2016

HTML, CSS tuval kaydırıcısı.
Nvagelis tarafından yapılmıştır
29 Ekim 2016

HTML, CSS ve JavaScript 3D pürüzsüz kaydırıcı.
Eduardo Allegrini tarafından yapılmıştır.
19 Ekim 2016

Sprinkles ile HTML ve CSS cupcake kaydırıcı!
Jamie Coulter tarafından yapılmıştır.
14 Ekim 2016

mario'nun maselli'si tarafından yapılmıştır.
12 Ekim 2016

UI animasyonunu #2 HTML, CSS ve JavaScript ile keşfetme.
mario'nun maselli'si tarafından yapılmıştır.
22 Eylül 2016

HTML, CSS ve JavaScript ile UI animasyonu #3'ü keşfetme.
mario'nun maselli'si tarafından yapılmıştır.
22 Eylül 2016

HTML, CSS ve JavaScript ile E-Ticaret Slider v2.0.
Pedro Castro'nun yaptığı
17 Eylül 2016

Kavisli arka plana sahip HTML, CSS ve JavaScript temiz kaydırıcı.
Ruslan Pivovarov tarafından yapılmıştır.
13 Eylül 2016

UI animasyonunu 1 numaralı HTML, CSS ve JavaScript ile keşfetme.
mario'nun maselli'si tarafından yapılmıştır.
8 Eylül 2016

Power CSS'ye basın: Her orta görüntüde ve ışık kutulu sayfalandırılmış kaydırıcıda yukarı ve aşağı.
Kseso tarafından yapılmıştır
15 Ağustos 2016

Çift pozlama, 2 farklı görüntüyü tek bir görüntüde birleştiren bir fotoğraf tekniğidir.
Misaki Nakano'nun yaptığı
3 Ağustos 2016

CSS3 özellik klibini kullanan kaydırıcı.
Pedro Castro'nun yaptığı
1 Mayıs 2016

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

Bu, doğrudan çevrilemeyecek güzel anlamlara sahip sözcükleri gösteren basit bir kaydırma çubuğu deneyidir. Odak: zarif tipografi ve basit ama çekici geçişler.
Joe Harry tarafından yapılmıştır.
5 Nisan 2016

Animasyon fikri, CSS klip yolunun değerini değiştirmek, böylece bir maskeleme efekti yapmaktır.
Bhakti Al Ekber tarafından yapılmıştır.
31 Mart 2016

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

HTML, CSS ve JavaScript ile prizma efekti kaydırıcısı.
kazanan tarafından yapılmıştır
12 Mart 2016

HTML, CSS ve JavaScript ile kayan arka plan galerisi.
Ron Gierlach tarafından yapılmıştır.
30 Kasım 2015

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

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

Küçük daire özelleştirilmiş kaydırıcı.
Bram de Haan tarafından yapılmıştır.
11 Ağustos 2015

HTML, CSS ve JavaScript ile duyarlı GTA V kaydırıcısı.
Eduard Mayer tarafından yapılmıştır.
24 Ocak 2014

Kaydırıcı gibi ama bilinmeyen nedenlerle küp gibi dönüyor.
Eric Brewer'ın yaptığı
4 Aralık 2013

Hugo Darby Brown tarafından yapılmıştır.
28 Ağustos 2013

Basit Kaydırıcılar

HTML, CSS ve vanilya JavaScript ile görüntü bindirme kaydırıcısı.
Yugam tarafından yapılmıştır
7 Haziran 2017

HTML ve CSS özellikli görüntü kaydırıcı.
Joshua Hibbert tarafından yapılmıştır.
16 Haziran 2016

Çok Eksenli Görüntü Kaydırıcısı

HTML, CSS ve JavaScript ile çok eksenli görüntü kaydırıcısı.
Burak Can'ın yaptığı
22 Temmuz 2013

Küp kaydırıcı, HTML5/CSS3 3d dönüşümleriyle yapılan küçük bir deney gibi.
İlya K tarafından yapılmıştır.
26 Haziran 2013

Bu eğitimde harika bir CSS3 kaydırıcısı var. Vikoristovuvatime etkisi slaytlar arasında soluyor. Dodatkovo, cilt görüntüsünün bir açıklamasını yazmak mümkündür. Bilgi galiplerini organize etmek için sırasız bir liste var. Slaytlar, ek CSS3 animasyonları için otomatik olarak yeniden oluşturulacaktır.

HTML işaretlemesi

HTML işaretlemesi zaten basittir. Popo ve є chotiri slaytında. Bunların dış görünümü, görüntüden (arka plan olarak) ve div öğesindeki metnin açıklamasından oluşur. Sadece ek slaytlar ekleyin.

css

CSS3 animasyonları anim_slides ve anim_titles, kaydırıcı için etiketlenir. İlk zastosovuєtsya okremih slaytlar, arkadaş - envanter metni için. Açıklama için, o şeffaflığın konumu da değiştirilir.

/* Kaydırıcı */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* Animasyon Çerçeveleri # anim_slides */ @-webkit-keyframes anim_slides ( %0 ( opacity:0; ) %6 ( opacity:1; ) %24 ( opacity:1; ) %30 ( opacity:0; ) %100 ( opacity:0; ) ) @-moz-keyframes anim_slides ( %0 ( opacity:0; ) %6 ( opacity:1; ) %24 ( opacity:1; ) %30 ( opacity:0; ) %100 ( opacity:0; ) ) . slaytlar ul li (opaklık:0; konum:mutlak; üst:0; /* css3 animasyonu */ -webkit-animasyon-adı: anim_slides; -webkit-animasyon-süresi: 24.0s; -webkit-animasyon-zamanlama-fonksiyonu: lineer;-webkit-animation-yineleme-sayısı: sonsuz; -webkit-animation-yön: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: koşu; : ileri; -moz-animation- ad: anim_slides; -moz-animasyon-süresi: 24.0s; oran-sayı: sonsuz; -moz-animasyon-yön: normal; -moz-animasyon-gecikmesi: 0; -moz-animasyon-oynatma durumu: koşu; - moz-animation-fill-mode: forwards; ) /* css3 püf noktaları */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0 s;-moz-animation-delay: 6.0 ;.slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay: 18.0s; -moz-animation -delay: 18.0s; ) .slides ul li img ( display:block; ) /* Animasyon Kareleri #anim_titles */ @-webkit-keyframes anim_titles ( %0 ( sol:100%; opacity:0; ) %5 ( sol :%10;opaklık :1; ) %20 ( sol: %10; opaklık:1; ) %25 ( sol: %100; opaklık:0; ) %100 ( sol: %100; opaklık:0; ) ) @-moz-keyframes anim_titles ( %0 ( sol:100 %; opaklık:0; ) %5 ( sol: %10; opaklık:1; ) %20 ( sol: %10; opaklık:1; ) %25 ( sol: %100; opaklık:0; ) %100 ( sol :100%; opaklık:0; ) ) .slides ul li div ( arka plan rengi:#000000; kenarlık yarıçapı:10px 10px 10px 10px; FFF; yazı tipi boyutu:26px; sol: %10; kenar boşluğu :0 otomatik; dolgu:20 piksel; konum: mutlak; üst: %50; genişlik: 200 piksel; /* css3 animasyon */ -webkit-animasyon-adı: anim_titles; -webkit-animasyon-süresi: 24.0s; -webkit-animasyon -zamanlama-fonksiyonu: doğrusal; -webkit-animasyon-yineleme-sayısı: sonsuz; -webkit-animasyon-yön: normal; -webkit-animasyon-gecikmesi: 0; -webkit-animation-play-durumu: çalışıyor; -webkit- animasyon-doldurma-modu: ileri -moz-animasyon-adı: anim_titles -moz-animation-süresi: 24.0s -moz-animation-zamanlama-fonksiyonu: lineer -moz-animation-iteration-count: sonsuz; -moz-animation- yön: normal; -moz-animat iyon gecikmesi: 0; -moz-animasyon-oynatma durumu: koşuyor; -moz-animasyon-doldurma modu: ileri; )

Sitenize bir jQuery resim kaydırıcısı eklemeniz gerekiyorsa, bu makalede gerekli eklentilerin bir açıklamasını bulacaksınız. jQuery'nin JavaScript robotuna tam olarak ne sorduğundan bağımsız olarak, web tasarım sürecini hızlandırmak için hala eklentilere ihtiyacımız var.

Bu eklentilerde değişiklikler yapabilir ve sitemizin gereksinimlerine daha iyi uyacak yeni kaydırıcılar oluşturabiliriz.

Diğer kaydırıcılar için, kaydırıcıdan bir kerede işlendiklerinden, yalnızca başlıklar, resimler ekleyin ve slaytları değiştirmek için efektler seçin. Tüm bu eklentilere raporlama belgeleri eşlik eder, bu nedenle onlara yeni efektler ekleyin veya işlevler büyük pratiklik deposunda değildir. Aynı şekilde saklanması gereken tetikleyicileri de JQuery programlayıcısında görebileceğiniz gibi değiştirebilirsiniz.

Duyarlı tasarım gibi kalan trendler, bir eklenti veya komut dosyası uygulamanızdan bağımsız olarak web projeleri için de önemlidir. Bu öğelerin tümü, daha çok gnuchki gibi, bu eklentilerden cildi parçalıyor. 2014 yılında olan her şey bu listeye dahil edilmiştir.

jQuery görüntü kaydırıcısı

Jssor Duyarlı Kaydırıcı

Kısa bir süre önce bu işlevsel JQuery kaydırıcısını içtim ve işimi daha iyi yapabilmek için kendi gözlerimi değiştirebilirdim. Sınırsız olasılığın intikamıyla, açık kaydırıcı çıktı kodunun boyutu için genişletebilirsiniz:

• Sorumlu tasarım;
• 15'ten fazla parametre ayarlandı;
• Görüntüyü değiştirmek için 15'ten fazla efekt;
• Resim galerisi, atlıkarıncalar, tam ekran genişletme desteği;
• Dikey afiş döndürücü; slayt listesi;
• Pidtrimka videosu.

Demo | yararlanmak

PgwSlider - jQuery/Zepto tabanlı duyarlı kaydırıcı

Bu eklentinin tek görevi slayt görüntülerini göstermektir. Ayrıca kompakttır, çünkü JQuery dosyasının boyutu yalnızca 2,5 KB'dir ve bu da onu verimli bir şekilde genişletmenize olanak tanır.

• Duyarlı düzen;
• SEO optimizasyonu;
• Farklı tarayıcılar tarafından destek;
• Görüntüyü bağışlayın;
• Arşivi 2,5 KB'den daha az genişletin.

Demo | yararlanmak

jQuery Dikey Haber Kaydırıcısı

Gnuchkiy i korisnyjQuery -slider, yayınların sol taraftan kayması ve sağ el görüntüleri ile haber kaynakları için atamalar:

• Sorumlu tasarım;
• Dikey sütun, bir haber hatırasıdır;
• Genişletilmiş başlıklar

Demo | yararlanmak

Wallop Kaydırıcı

Bu kaydırıcının intikamı jQuery tarafından alınmamalı, ancak bunu tanıtmak istiyorum çünkü daha kompakt ve tarafların ilgisinin zamanını değiştirmenize izin veriyor. Hangi şarabın size uygun olduğunu bana bildirin:

• Duyarlı düzen;
• Basit tasarım;
• Slaytları değiştirmek için farklı seçenekler;
• Minimum JavaScript kodu;
• Rozmir toplam 3KB.

Demo | yararlanmak

Düz stil Polaroid galerisi

Esnek yerleşim düzeni ve garnitür tasarımı ile masaya belge yayma tarzında bir galeri sizden zenginlik çekebilir. Tabletler ve harika ekranlar için daha uygun:

• Duyarlı kaydırıcı;
• Düz tasarım;
• Vipadkova slayt değişikliği;
• Çıkış koduna yeni erişim.

Demo | yararlanmak

A-kaydırıcı

Demo | yararlanmak

HiSlider – HTML5, jQuery ve WordPress resim kaydırıcısı

HiSlider, yardımı için harika geçişlerle farklı resim galerileri oluşturabileceğiniz yeni bir jQuery kaydırıcı içermeyen eklenti tanıttı:

• Duyarlı kaydırıcı;
• Programlama bilgisi gerekmez;
• Dekіlka muhteşem şablonlar ve görünümler;
• Garni geçiş efektleri;
• Farklı platformlar için destek;
• Özetle WordPress, Joomla, Drupal;
• İçeriği görüntüleme yeteneği farklı şekiller: görüntü, Youtube videosu o Vimeo videosu;
• Gnuchka melodisi;
• temel ek işlevler;
• Nebmezheniya obsyag vіdobrazhuvanogo içeriği.

Demo |

vay kaydırıcı

WOW Kaydırıcı - tse duyarlı jQuery-kaydırıcı inanılmaz görsel efektlere sahip görüntü ( domino, dönüş, rozmittya, darbe ve uyku, solgunluk, panjur) ve profesyonel şablonlar.

WOW Slider, görüntüyü düzenleme kodunu bulmak zorunda kalmadan bir saniyeden daha kısa sürede harika kaydırıcılar oluşturmanıza olanak tanıyan bir kurulum sihirbazıyla birlikte gelir. Joomla ve WordPress için eklentinin indirme sürümleri için de mevcuttur:

• Tamamen uyarlanabilir;
• Tüm tarayıcılar ve her türlü ek için destek;
• Pidtrimka duyusal müştemilatlar;
• WordPress'te kolay kurulum;
• Gnuchkіst nalashtuvanni'ye sahip;
• SEO optimizasyonları.

Demo |

Nivo Slider - Maliyetsiz jQuery Eklentisi

Nivo Slider, dünyanın en güzel ve en basit görüntü kaydırıcısıdır. Nivo Slider eklentisi ücretsizdir ve MIT lisansı altında lisanslanmıştır:

• Gerekli jQuery 1.7 ve üstü;
• Mükemmel geçiş efektleri;
• Çivilenmiş de basit ve guchky;
• Kompakt ve uyarlanabilir;
• Açık kod;
• Zorlayıcı ve basit;
• Farklı şablonlardan Dekilka;
• Otomatik görüntü kırpma.

Demo |

Teknik belgelerden basit jQuery kaydırıcısı

Fikir Apple'ın kaydırıcılarından ilham aldı, bazı küçük öğelerin farklı animasyon efektleri olabilir. Perakendeciler, farklı kategorilerde "yüzen" bazı öğelerde bir çevrimiçi mağaza için basit bir tasarım oluşturmak için minimum olanakların iyileştirilmesiyle bu konsepti uydurmaya çalıştılar:

• Duyarlı düzen;
• Minimalist tasarım;
• Slaytların farklı efektleri ve değişiklikleri.

Demo |

JQuery Görüntü Kaydırıcısını Yeniden Boyutlandır

Sayfa genişliğinin %100'ünü kaplayan ve mobil cihazların ekran boyutunun altına sığan basit bir kaydırıcı bile. CSS geçişleriyle çalışıyoruz ve görüntüler aynı anda çapalarla "uyuyor". Çapa, ikame veya ikame olabilir, bu nedenle gönderdiğiniz görüntüye bağlantı vermeniz gerekmez.

Kurulduktan sonra kaydırıcı, ekran genişliğinin %100'üne kadar genişler. Ayrıca, slayt görüntüsünün boyutunu otomatik olarak değiştirebilirsiniz:

• Duyarlı jQuery kaydırıcısı
• Povnorozmirny;
• Minimalist tasarım.

Demo |

Elastik İçerik Kaydırıcısı + yardım

Elastik İçerik Kaydırıcısı, baba öğesinin genişlemesinde nadasın genişliğini ve yüksekliğini otomatik olarak ayarlar. Bu basit bir jQuery kaydırıcısıdır. Dağlarda 3 kaydırma bölgesi ve altta gezinme sekmeleri panelleri vardır. Kaydırıcı, Batkiv konteynerinin genişlemesine uyacak şekilde genişliğini ve yüksekliğini ayarlar.

Küçük çapraz ekranlara bakıldığında gezinme sekmeleri küçük simgelere dönüşür:

• Sorumlu tasarım;
• Fare tıklaması kaydırma.

Demo |

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

Görüntüleri 3B'ye çeviren deneysel bir kaydırıcı. İki yığın, görüntü yutulduğunda kaydırıcının ortasında görüntülenecek olan kağıdın maliyetini tahmin eder:

• Sorumlu tasarım;
• Çevirme geçişi;
• 3D efekti.

Demo |

JQuery ve CSS3 + Cursing'e dayalı Tam Ekran Yarık Kaydırıcısı

Meraktan, bir rodzinka'dan nasıl bir kaydırıcı oluşturulacağını biliyorsunuz: fikir, adım adım veya görüntünün önünde gösterirseniz, böyle bir görünümde bir akış slaydını “genişletmek” ve göstermektir. jQuery ve CSS animasyonunu kullanarak benzersiz geçiş efektleri oluşturabiliriz:

• Sorumlu tasarım;
• Bölünmüş geçiş;
• Yukarıdan aşağıya kaydırıcı.

Demo |

Unislider - gerçekten küçük bir jQuery kaydırıcısı

Uygunsuz çan ve ıslıkların hiçbiri ve rozmіtki, 3KB'den daha az rozmіr. Slaytlarınız için herhangi bir HTML kodunu hazırlayın, yogayı genişletin CSS'ye yardım et. Kaydırıcı ile ilgili her şey GitHub'da barındırılmaktadır:

• Farklı tarayıcılar tarafından destek;
• Klavye desteği;
• Yükseklik ayarı;
• Sorumlu tasarım;
• Dokunma girişi.

Demo | yararlanmak

Minimal Duyarlı Slaytlar

Basit ve kompakt eklenti ( toplam boyut 1 Kb) uyarlanabilir bir kaydırıcı oluşturan, kabın ortasındaki zafer öğeleri. ResponsiveSLides.js, IE6 gibi tüm IE sürümleri ve daha fazlası dahil olmak üzere çok sayıda tarayıcıyla çalışır:

• Tamamen uyarlanabilir;
• Rozmir 1 KB;
• JavaScript üzerinden çalıştırabilmek için CSS3 geçişi;
• Özel işaretli bir listeden basit bir işaretleme;
• Geçişlerin etkilerini iyileştirme imkanı ve bir slaydı gözden geçirmenin önemsizliği;
• Bir dizi slayt gösterisinin oluşturulmasını teşvik eder;
• Otomatik ve manuel kaydırma.

Demo |

Kamera - jquery içermeyen jquery kaydırıcı

Kamera, görünür geçiş efektleri olmayan, uyarlanabilir yerleşim düzenine sahip bir eklentidir. Mobil müştemilatlar tarafından desteklenen kurulumu kolay:

• Yeni uyarlanabilir tasarım;
• İmzalar;
• Video ekleme yeteneği;
• 33 farklı renk ikonu.

Demo |

SlidesJS, Duyarlı jQuery Eklentisi

SlidesJS, dokunmatik ekran desteği ve CSS3 geçişleri ile jQuery (1.7.1 ve üstü) için duyarlı bir eklentidir. Onunla deney yapın, bazı hazır uygulamaları deneyin, projenize SlidesJS'yi nasıl ekleyeceğinizi anlamanıza yardımcı olacaklar:

• Sorumlu tasarım;
• CSS3 - git;
• Duyusal müştemilatlar için destek;
• Bağırdığım için beni bağışlayın.

Demo | yararlanmak

BX Jquery Kaydırıcısı

Maliyetsiz Duyarlı jQuery Slider:

• Povnіstyu uyarlanabilir - pіdlashtovuєtsya, özgün olup olmadığına karar verdi;
• Yatay, dikey slayt değişimi;
• Slayt, resimler, videolar veya HTML içeriği içerebilir;
• Duyusal ekler için genişletilmiş destek;
• Slayt animasyonu için CSS geçiş kitaplığı ( donanım daha hızlı);
• geri çağrıların API'si ve daha genel yöntemler;
• Küçük dosya boyutu;
• Uygulaması kolay.

Demo |

Esnek Kaydırıcı 2

En iyi duyarlı kaydırıcı. Yeni sürüm bula, işin hızını, kompaktlığını artırma yöntemiyle desteklendi.

Demo | yararlanmak

Galleria - JavaScript'e dayalı duyarlı fotoğraf galerisi

Galleria, bir resim galerisi oluşturmak için milyonlarca sitede yer alıyor yüksek kalite. Bu çalışma hakkında olumlu yorumların sayısı çok büyük:

• Povnistyu bezkoshtovny;
• Tam ekran inceleme modu;
• %100 duyarlı;
• Dosvіd programlama gerekli değildir;
• iPhone, iPad ve diğer dokunmatik cihazlar için destek;
• Flickr, Vimeo, YouTube ve daha fazlası;
• Dekilka konuları.

Demo | yararlanmak

Blueberry - Basit Duyarlı jQuery Görüntü Kaydırıcısı

Size duyarlı web tasarımı için özel olarak yazılmış bir jQuery resim kaydırıcısı sunuyorum. Blueberry, uyarlanabilir şablonlarla çalışmak için özel olarak yazılmış özel giriş koduna sahip deneysel bir görüntü kaydırma eklentisidir.

Yaprak dökümü 4, 2019 Gönderi güncellendi

Yuri Nimets

kaydırıcı açık saf CSS+ bonus kaydırıcı

CSS Kaydırıcıları, Javascript Kaydırıcılarına göre öncelikli olabilir. Bu pervag tse zavantazhennya'dan biri. Sadece bu değil, kaydırıcıların görüntüleri büyük boyutlarda oynatılır (çünkü farklı ekranlar için optimizasyon yoktur), ayrıca komut dosyalarının yakalanması için bir saat harcanır. Ale at statti V, sadece saf CSS kaydırıcılarını kullanın.

Kaydırıcılar konusunda sitede bildiklerimin ekseni:

1. CSS3 resim kaydırıcısı

CSS kaydırıcısı, slaytlarda gezinmek için kullanılan bir tür radyo düğmesi. Radyo düğmeleri kaydırıcının altında bulunur. Sağdaki ve sağdaki okların yardımının arkasında Kırım navigasyon radyo düğmeleri bulunur. Onu takip etmek için, görüntü aynı anda vіdobrazhati'deymiş gibi, vikoristovuyutsya sözde sınıfları: kontrol edildi.

2. Küçük resimlerle CSS3 görüntü kaydırıcısı

Önceki CSS kaydırıcısının önünde, resim galerisi katlanırken de manuel olarak yapılan tüm resimlerin küçük resimlerinin altındaki radyo düğmesi. Görüntüler kendi etkileriyle değişir: yavaş yavaş daha büyük olanlara dönüşürler.

3. CSS Galerisi

Ve CSS kaydırıcısının ekseni, satan taraflar için bir kılavuzdur. Kural olarak, birçok web perakendecisi, inişleri (satış taraflarını) genişletirken, kaydırıcıyı koçanın üzerine yerleştirin, böylece ilk ekranda (kaydırmadan) çok fazla üzüm göreceksiniz ve yenisi için diğer taraf. Ayrıca, bu kaydırıcı uyarlanabilir, bu da sessizdir.

4. posila olmadan CSS'de kaydırıcı

Size bu kaydırıcının muzaffer olmadığını hatırlatmak istiyorum! Başlığın kreması resminin (slayt) başlığının arkasında 2 slayt daha görebilirsiniz. Koku, ana koku için roztashovani. Slaytların değişimi güzel bir modda gösterilir: arkaya iki slayt çizilir ve merkez, daha sonra ana slayt olacak olan o slayt olur. Sonra slayt büyür ve diğerlerinin önüne yerleştirilir.

5. CSS3 Duyarlı Kaydırıcı

Radyo düğmelerine dayanan başka bir uyarlanabilir kaydırıcı. Bu kaydırıcının nasıl görüneceğine bakmak için diğer müştemilatlar ah - Tarayıcı penceresini bağımsız olarak değiştirebilir veya yanda bir kaydırıcı ve çeşitli eklerin özel simgeleriyle yak'a tıklayarak, kaydırıcıyı bilgisayarda, tabletlerde veya akıllı telefonlarda görebilirsiniz.

*** BONUS KAYDIRICI ***

Yukarıda sunulduğu gibi tüm kaydırıcıların kreması, sizi bir tane daha memnun etmek istiyorum. Bu kaydırıcı, bir resim galerisi oluşturmak için harika bir şekilde uygundur. Neyle savaşabileceğinizi kelimelerle açıklayamazsınız, videodaki her şeye hayret etmek daha iyidir:

Visnovok

Kaydırıcıların yardımı için, resim galerisini güzel bir şekilde tasarlayabilir, daha kompakt bir şekilde yerleştirerek, kaydırıcıyı sattığınız tarafın ilk ekranına (kaydırmadan görebileceğiniz gibi yan kısım) yerleştirebilirsiniz, size göstermek için şaraplar gibi ana asmalar. Sürgüleri durdurmanın birçok yolunu biliyor olabilirsiniz, ancak bir tanesi kesin olarak anlaşıldı - pis koku doğru seçimle kirlenir.

Makale tarafından bakılan noktalar.