Jquery haber kaydırıcısı. Duyarlı kaydırıcılardan oluşan bir seçim. Harika jQuery "Skitter" slayt gösterisi
Zaman durmuyor ve onunla ilerliyor. Bu aynı zamanda İnternet'in genişliğini de etkiledi. Sitelerin görünümünün nasıl değiştiğini ve duyarlı tasarımın özellikle popüler olduğunu zaten görebilirsiniz. Bu bağlamda uyarlanabilir site kaydırıcıları çok popüler ve alakalı hale geldi. Bir çok yenisi var duyarlı jquery kaydırıcıları, galeriler ve atlı karıncalar.
Evrensel kurmak istiyorsanız kaydırıcı veya atlıkarınca web sitene gidebilirsin
Site kaydırıcıları
1. Duyarlı Yatay Gönderiler Kaydırıcısı
Ayrıntılı kurulum talimatları ile uyarlanabilir yatay karusel. Basit bir tarzda yapılmıştır, ancak istediğiniz gibi şekillendirebilirsiniz.
2. Glide.js üzerinde kaydırıcı
Bu kaydırıcı, herhangi bir site için uygundur. Açık kaynaklı Glide.js kullanır. Kaydırıcı renkleri kolaylıkla değiştirilebilir.
Bir içerik sitesi için duyarlı kaydırıcılar. Bu kaydırıcının öne çıkan özelliği, görüntülerin 3 boyutlu efektinin yanı sıra rastgele sırayla farklı görünüm animasyonlarıdır.
4. HTML5 canvas kullanan kaydırıcı
Etkileşimli parçacıklara sahip çok hoş ve etkileyici bir kaydırıcı. HTML5 canvas kullanılarak yürütülür,
5. "Morphing images" kaydırıcısı
Morph efektli kaydırıcı. Bu örnekte kaydırıcı, bir web geliştiricisinin portföyü veya portföy olarak bir web stüdyosu için iyi çalışır.
6. Dairesel kaydırıcı
Çevirme efektli daire şeklinde bir kaydırıcı.
7. Bulanık arka plan kaydırıcısı
Geçişli ve arka plan bulanıklaştırmalı uyarlanabilir kaydırıcı.
8. Uyarlanabilir moda kaydırıcısı
Basit, hafif ve duyarlı web sitesi kaydırıcısı.
9. Slicebox - jQuery 3B görüntü kaydırıcısı (GÜNCELLENMİŞ)
Slicebox'ın güncellenmiş bir sürümü düzeltmeler ve yeni özellikler içeren kaydırıcı.
Farklı animasyonlar ve zamanlamalar kullanarak çekimleri değiştirecek esnek bir görüntü ızgarası oluşturmak için bir jQuery eklentisi.
Site için kaydırıcılar ikinci bölüm.
11. Flexslider
Web siteniz için evrensel ücretsiz eklenti. Bu eklenti, birkaç kaydırıcı ve atlıkarınca seçeneği ile birlikte gelir.
12. Fotoğraf çerçevesi
FotoramaEvrensel bir eklentidir. Çok fazla ayarı var. Her şey hızlı ve kolay bir şekilde çalışır ve ayrıca slaytları tam ekranda görüntüleme seçeneği de vardır. Kaydırıcı, hem sabit boyutta hem de duyarlı, küçük resimli veya küçük resimli, dairesel kaydırma ile veya olmadan ve çok daha fazlasıyla kullanılabilir. Fotoğraf çerçevesine bağlı olarak, site için ilginç uyarlanabilir kaydırıcılar oluşturabilirsiniz.
Not:Kaydırıcıyı birkaç kez koydum ve bence en iyilerden biri
13. Küçük resimler içeren ücretsiz ve duyarlı 3B galeri kaydırıcısı.
Deneysel galeri kaydırıcısı 3DPanelLayout kafes ve ilginç animasyon efektleri ile.
14. css3 üzerinde kaydırıcı
Duyarlı kaydırıcı, sorunsuz içerik akışı ve hafif animasyon ile css3 kullanılarak yapılır.
Harika görseller ve animasyonlar içeren bir resim kaydırıcısıdır.
17. Elastik
Slayt küçük resimlerine sahip tamamen duyarlı elastik kaydırıcı.
18. Yarık
Css3 animasyonunu kullanan tam ekran duyarlı bir kaydırıcıdır. Kaydırıcı iki versiyonda yapılmıştır ve animasyon oldukça sıradışıdır.
19. Uyarlanabilir fotoğraf galerisi artı
Yüklenen resimlerle basit, ücretsiz bir kaydırmalı galeri.
20. WordPress için duyarlı kaydırıcı
WP için duyarlı ve ücretsiz kaydırıcı.
21. Paralaks İçerik Kaydırıcısı
Paralaks efektine sahip kaydırıcı ve CSS3 ile her öğenin kontrolü.
22. Müzik bağlantı kaydırıcısı
Slider ile açık kaynak JPlayer kullanarak. Bu kaydırıcı, müzikli bir sunuma benzer.
Site için kaydırıcılar üçüncü bölüm.
23. jmpress.js içeren kaydırıcı
Duyarlı kaydırıcı, jmpress.js ve bu nedenle bazı harika 3B slayt efektlerine izin verecektir.
24. Hızlı Gezinme Slayt Gösterisi
Hızlı slayt geçişli slayt gösterisi. Slaytlar üzerine gelindiğinde geçiş yapılır.
Css3 kullanarak görüntülerin akordiyonu.
Dokunmatik cihazlar için optimize edilmiş duyarlı bir galeridir.
29. jQuery ile Görüntü Montajı
Görüntüleri ekran genişliğine göre otomatik olarak konumlandırın. Bir portföy sitesi geliştirirken çok faydalı ve ilginç bir şey.
33. Çok düzeyli fotoğraf kartı.
Katmanlı bir haritadır - bir resim galerisi, konumlarıyla ilgili resimleri görüntülemenizi sağlar. Google haritalarına dayanmaktadır. Sağ taraf, üzerine tıklayarak ışıklı kutuda görüntülenebilen bir küçük resim gösterir.
34. Küçük resimli tam ekran galeri
Küçük resim ve slayt açıklamasına sahip duyarlı galeri kaydırıcısı.
Site için kaydırıcılar sürekli olarak güncellenmekte ve sayıları her geçen gün daha da artmaktadır. En sevdiğiniz kaydırıcıya sahipseniz veya belki de aradığınızı bulamadıysanız, yorumları yazın ve size yardımcı olmaya çalışacağım.
Otomatik kaydırmalı basit bir kaydırıcıya ihtiyacımız var. Başlayalım ...
Kaydırıcı işleminin açıklaması.
Slaytlar belirli bir süre sonra sıralanacak ve kaydırılacaktır.
Kırmızı çerçeve, kaydırıcının görünen kısmını gösterir.
Kaydırıcının sonunda, ilk slaydı kopyalamanız gerekir. Üçüncü slayttan birinciye kaydırmayı sağlamak için bu gereklidir. Ayrıca, ilk slayttan üçüncü slayta geriye doğru kaydırabilmek için son slaydı başa eklemeniz gerekir. Aşağıda, kaydırıcının ileri yönde nasıl çalıştığı gösterilmektedir.
Kaydırıcı sona ulaştığında, kaydırıcının başından bir kopya anında son slaydın yerine yerleştirilir. Sonra döngü tekrar eder. Bu, sonsuz bir kaydırıcı yanılsamasını yaratır.
HTML biçimlendirmesi
İlk olarak, otomatik kaydırmalı basit bir kaydırıcı yapalım. Çalışması için iki konteynere ihtiyacı var. Birincisi, kaydırıcının görünür alanının boyutunu ayarlayacaktır ve ikincisi, kaydırıcıları içine yerleştirmek için gereklidir. Kaydırıcı işaretlemesi şöyle görünecektir:
Kaydırıcı stilleri
.slider-box (genişlik: 320px; yükseklik: 210px; taşma: gizli;). kaydırıcı (konum: göreceli; genişlik: 10000px; yükseklik: 210px;). kaydırıcı img (float: sol; z-endeksi: 0;)Slider-box konteyner, kaydırıcının boyutlarını ayarlar. Overflow: hidden özelliği, öğenin içindeki alanda olmayan tüm öğeleri gizler.
Kaydırmalı konteyner geniş bir genişliğe ayarlanmıştır. Bu, tüm slaytların içine sığması için gereklidir.
Slaytlar float: left özelliği kullanılarak hizalanır.
Aşağıda kaydırıcı blokların şematik bir düzeni verilmiştir.
Senaryo
Slaytların hareketi, kabın kaydırıcı marj-sol özelliği sorunsuz bir şekilde değiştirilerek yapılacaktır.
$ (işlev () (var genişlik \u003d $ (". kaydırıcı kutusu") .width (); // Kaydırıcı genişliği. aralık \u003d 4000; // Slayt değiştirme aralığı. $ (". slider img: last") .clone () .prependTo (".slider"); // Son slaydın bir kopyası başa yerleştirilir. $ () .eq (1) .clone () .appendTo (".slider"); // İlk slaydın bir kopyası sona yerleştirilir. // Container.slider, sola bir slayt genişliğine kaydırılır. setInterval ("animation ()", interval); // Slaytları değiştirmek için animation () işlevi çalıştırılır. )); function animation () (var margin \u003d parseInt ($ (". slider") .css ("marginLeft")); // Bloğun mevcut ofseti. Kaydırıcı genişlik \u003d $ (". slider-box") .width (), // Kaydırıcı genişliği. slidersAmount \u003d $ (". slider") .children () .length; // Kaydırıcıdaki slayt sayısı. eğer (margin! \u003d (- width * (slidersAmount- 1))) // Mevcut slayt sonuncu değilse, (kenar boşluğu \u003d kenar boşluğu genişliği; // daha sonra kenar boşluğu değeri slaydın genişliği kadar azaltılır. ) Başka ( // Son slayt gösteriliyorsa, $ (". kaydırıcı") .css ("kenar boşluğu-sol", - genişlik); // daha sonra kaydırma bloğu orijinal konumuna geri döner, margin \u003d - genişlik * 2; ) $ (". kaydırıcı") .animate ((marginLeft: margin), 1000); // Kaydırma bloğu 1 slayt sola kaydırılır. } ;Sonuç, sonsuz otomatik kaydırmalı basit bir kaydırıcıdır.
1. Mükemmel jQuery slayt gösterisi
JQuery teknolojilerini kullanan muhteşem bir slayt gösterisi.
2. jQuery eklentisi "Scale Carousel"
JQuery kullanarak ölçeklenebilir slayt gösterisi. Size en uygun slayt gösterisinin boyutlarını ayarlayabilirsiniz.
3. jQuery eklentisi "slideJS"
Metin açıklamalı resim kaydırıcısı.
4. "JSliderNews" Eklentisi
5. CSS3 jQuery kaydırıcısı
Gezinme oklarının üzerine geldiğinizde, sonraki slaydın dairesel bir küçük resmi görünür.
6. Güzel jQuery Sunum Döngüsü kaydırıcısı
görüntü yükleme göstergeli jQuery kaydırıcısı. Otomatik slayt değişimi var.
7. jQuery Parallax Slider eklentisi
Üç boyutlu arka plan efektine sahip bir kaydırıcı. Bu kaydırıcının öne çıkan özelliği, her biri farklı bir hızda kaydırılan birkaç katmandan oluşan arka plan hareketidir. Sonuç, hacimsel etkinin bir taklididir. Çok güzel görünüyor, kendiniz görebilirsiniz. Efekt, Opera, Google Chrome, IE gibi tarayıcılarda daha sorunsuz görüntülenir.
8. Yeni, hafif jQuery kaydırıcısı "bxSlider 3.0"
Demo sayfasındaki "örnekler" bölümünde, bu eklentinin tüm olası kullanım durumlarına bağlantılar bulabilirsiniz.
9. jQuery resim kaydırıcısı, "slideJS" eklentisi
Şık jQuery kaydırıcısı kesinlikle projenizi süsleyecektir.
10. jQuery eklentisi slayt gösterisi "Kolay Slaytlar" v1.1
Slayt gösterileri oluşturmak için kullanımı kolay jQuery eklentisi.
11. "jQuery Slidy" Eklentisi
Çeşitli tasarımlarda hafif jQuery eklentisi. Otomatik slayt değişikliği var.
12. jQuery CSS galerisi otomatik slayt değiştiricili
Ziyaretçi belirli bir süre içinde "İleri" veya "Geri" oklarına tıklamazsa, galeri otomatik olarak kaydırmaya başlayacaktır.
13. jQuery Nivo Kaydırıcısı
Geçerli koda sahip çok profesyonel, yüksek kaliteli hafif eklenti. Birçok farklı slayt geçiş efekti vardır.
14. jQuery "MobilySlider" kaydırıcısı
Taze kaydırıcı. Çeşitli görüntü değiştirme efektlerine sahip jQuery kaydırıcısı.
15. jQuery Slider² Eklentisi
Otomatik kaydırmalı hafif kaydırıcı.
16. Yeni javascript kaydırıcısı
Otomatik görüntü değiştirmeli kaydırıcı.
Otomatik slayt değişikliği ile slayt gösterisi uygulamak için eklenti. Ekranı küçük resimler kullanarak kontrol etmek mümkündür.
nivoSlider eklentisini kullanan jQuery CSS resim kaydırıcısı.
19. jQuery "jShowOff" kaydırıcısı
İçerik rotasyonu için eklenti. Üç kullanım durumu: gezinme yok (slayt gösterisi biçiminde otomatik değiştirmeli), düğmeler biçiminde gezinme, küçük resim biçiminde gezinme.
20. "Deklanşör Efekti Portföyü" Eklentisi
Fotoğraf portföyleri için taze jQuery eklentisi. Galerinin görüntüleri değiştirmede ilginç bir etkisi var. Fotoğraflar, lens deklanşörünün çalışmasına benzer bir efektle birbirini takip eder.
21. Hafif javascript CSS kaydırıcısı "TinySlider 2"
JavaScript ve CSS kullanarak bir görüntü kaydırıcısının uygulanması.
22. Harika kaydırıcı "Tinycircleslider"
Şık yuvarlak kaydırıcı. Görüntüler arasındaki geçiş, kaydırıcının çevresi boyunca kırmızı bir daire şeklinde sürüklenerek gerçekleştirilir. Tasarımınızda yuvarlak öğeler kullanırsanız sitenize mükemmel bir şekilde uyacaktır.
23. jQuery görüntü kaydırıcısı
Hafif Kaydırıcı Kiti. Kaydırıcı farklı versiyonlarda sunulur: dikey ve yatay. Ayrıca, resimler arasında çeşitli gezinme türleri de uygulanmaktadır: "İleri" ve "Geri" düğmelerini kullanarak, fare tekerleğini kullanarak, slaytta bir fare tıklaması kullanarak.
24. "Slider Kit" minyatürleri içeren galeri
Galeri "Kaydırıcı Kiti". Küçük resim kaydırma hem dikey hem de yatay olarak gerçekleştirilir. Görüntüler arasındaki geçiş şu şekilde gerçekleştirilir: fare tekerleği, fare tıklaması veya bir küçük resmin üzerine gelme.
25. jQuery Slider Kit İçerik Kaydırıcısı
JQuery dikey ve yatay içerik kaydırıcısı.
26. jQuery Kaydırıcı Seti
Otomatik slayt değiştirmeli slayt gösterisi.
27. Hafif profesyonel javascript CSS3 kaydırıcısı
2011'de oluşturulmuş temiz bir jQuery ve CSS3 kaydırıcısı.
küçük resimlerle jQuery slayt gösterisi.
29. Basit bir jQuery slayt gösterisi
Gezinme düğmeleriyle slayt gösterisi.
30. Harika jQuery "Skitter" slayt gösterisi
Çarpıcı slayt gösterileri oluşturmak için jQuery "Skitter" eklentisi. Eklenti, görüntüleri değiştirirken 22 (!) Çeşit farklı animasyon efektini destekler. İki slayt gezinme seçeneğiyle çalışabilir: slayt numaraları ve küçük resimler. Çok kaliteli bir keşif olan demoyu mutlaka izleyin. Kullanılan teknolojiler: CSS, HTML, jQuery, PHP.
31. Slayt Gösterisi "Garip"
İşlevsel slayt gösterisi. Slaytlar şunlar olabilir: basit resimler, altyazılı resimler, araç ipuçları içeren resimler, video klipler. Klavyenizdeki okları, slayt numarası bağlantılarını ve sol / sağ tuşları kullanarak gezinebilirsiniz. Slayt gösterisi birkaç versiyonda yapılmıştır: minyatürlü ve minyatürsüz. Tüm seçenekleri görüntülemek için, demo sayfasının üst kısmında bulunan Demo # 1 - Demo # 6 bağlantılarını izleyin.
Bir fanı anımsatan görüntü kaydırıcının çok özgün tasarımı. Animasyonlu slayt değişikliği. Görüntüler arasında gezinme oklar kullanılarak gerçekleştirilir. Üstte bulunan Oynat / Duraklat düğmesi kullanılarak açılıp kapatılabilen otomatik bir geçiş de vardır.
Hareketli jQuery kaydırıcısı. Tarayıcı penceresi yeniden boyutlandırıldığında arka plan resimleri otomatik olarak ölçeklenir. Her görüntü için açıklamalı bir blok açılır.
34. jQuery ve CSS3'te "Flux Slider" kaydırıcısı
Yeni jQuery kaydırıcısı. Slaytları değiştirirken birkaç harika animasyonlu efekt.
35. jQuery jSwitch eklentisi
Hareketli jQuery galerisi.
Otomatik slayt değiştirme ile jQuery'de kolay slayt gösterisi.
37. "SlideDeck 1.2.2" eklentisinin yeni sürümü
Profesyonel içerik kaydırıcısı. Otomatik slayt değiştirme seçeneklerinin yanı sıra, slaytlar arasında hareket etmek için fare tekerleğini kullanma seçeneği de vardır.
38. jQuery Sudo Kaydırıcısı
JQuery'de hafif resim kaydırıcısı. Pek çok uygulama seçeneği vardır: slayt numarasına referanslı ve referanssız yatay ve dikey görüntü değişimi, resim yazıları olan ve olmayan, çeşitli görüntü değiştirme efektleri. Otomatik slayt değiştirme işlevi vardır. Demo sayfasında tüm uygulama örneklerine bağlantılar bulunabilir.
39 jQuery CSS3 slayt gösterisi
Küçük resim slayt gösterisi, otomatik slayt değiştirme modunu destekler.
40. jQuery Akı Kaydırıcısı
Görüntüleri değiştirmek için birçok efekt içeren kaydırıcı.
41. Basit jQuery kaydırıcısı
Şık jQuery görüntü kaydırıcısı.
İleri ve geri düğmeleri eklememiz gerekiyor.
Bunu yapmak için, önceden yazılmış kodu tamamlamanız gerekir.
Yeni kaydırıcı için HTML kodu
Kaydırıcı yapısının tamamı aynı kalacaktır. İşaretlemeye, düğme görevi görecek iki kap eklenecektir.
Kaydırıcı stilleri
Konteynere göre mutlak konumlandırma nedeniyle düğmeler yerini alacaktır.
Slider-box (konum: göreli; genişlik: 320px; yükseklik: 210px; taşma: gizli;). Kaydırıcı (konum: göreli; genişlik: 10000px; yükseklik: 210px;). Kaydırıcı img (float: sol;) .slider-box .prev, .slider-box .next (konum: mutlak; üst: 100px; görüntü: blok; genişlik: 29px; yükseklik: 29px; imleç: işaretçi;) .slider-box .prev (sol: 10px; arka plan: url ( ../images/slider_controls.png) no-tekrar 0 0;) .slider-box .next (sağ: 10px; arkaplan: url (../images/slider_controls.png) no-tekrar -29px 0;)
Senaryo
Kaydırıcı otomatik olarak kayar. Varsayılan olarak hareket soldan sağa gider, ancak gerekirse rota değişkenini kullanarak hareketinin yönünü değiştirebilirsiniz. Değişkenin değerini 1'den -1'e değiştirirken, kaydırıcının hareket yönü değişecektir.
Kaydırıcıdaki resimler, imleç kaydırıcının içindeyken değişmemelidir. Bu neden yapılır? Basit. Fare imleci kaydırıcının üzerindeyse, site ziyaretçisinin içeriğiyle ilgilendiği anlamına gelir. Şu anda slaytları otomatik olarak değiştirmeyin.
$ (function () (var slider \u003d $ (". slider"), sliderContent \u003d slider.html (), // Kaydırıcının içeriği slideWidth \u003d $ (". slider-box") .outerWidth (), // Kaydırıcı genişliği slideCount \u003d $ (". slider img") .length, // Slayt sayısı prev \u003d $ (". slider-box .prev"), // Geri düğmesi sonraki \u003d $ (". slider-box .next"), // İleri düğmesi sliderInterval \u003d 3300, // Slayt değiştirme aralığı animateTime \u003d 1000, // Slaytları değiştirme zamanı kurs \u003d 1, // Kaydırıcı hareketinin yönü (1 veya -1) margin \u003d - slideWidth; // İlk slayt ofseti $ (". slider img: last") .clone () .prependTo (".slider"); // Son slaydın bir kopyası başa yerleştirilir. $ (". slider img") .eq (1) .clone () .appendTo (".slider"); // İlk slaydın bir kopyası sona yerleştirilir. $ (". slider") .css ("margin-left", - slideWidth); // Container.slider, sola bir slayt genişliğine kaydırılır. function nextSlide () ( // Slaytları değiştirmek için animation () işlevi çalıştırılır. interval \u003d window.setInterval (canlandırma, sliderInterval); ) function animate () (if (margin \u003d\u003d - slideCount * slideWidth- slideWidth) ( // Kaydırıcı sona ulaştıysa slider.css (("marginLeft": - slideWidth)); // daha sonra kaydırma bloğu başlangıç \u200b\u200bkonumuna geri döner margin \u003d - slideWidth * 2; ) else if (margin \u003d\u003d 0 && course \u003d\u003d - 1) ( // Kaydırıcı başlangıçtaysa ve geri düğmesine basılırsa slider.css (("marginLeft": - slideWidth * slideCount)); // daha sonra kaydırma bloğu son konumuna taşınır margin \u003d - slideWidth * slideCount + slideWidth; ) Başka ( // Yukarıdaki koşullar işe yaramadıysa, margin \u003d margin - slideWidth * (kurs); // kenar boşluğu değeri sonraki slaydı gösterecek şekilde ayarlandı ) slider.animate (("marginLeft": margin), animateTime); // Kaydırma bloğu 1 slayt sola kaydırılır. ) fonksiyon sliderStop () ( // Kaydırıcıyı duraklatma işlevi window.clearInterval (aralık); ) önceki. tıklayın (işlev () ( // Geri düğmesine basıldı var kurs2 \u003d kurs; kurs \u003d - 1; animate (); // animate () işlevini çağırın kurs \u003d kurs2; )); next.click (işlev () ( // Geri düğmesine basıldı eğer (slider.is (": animasyonlu")) (false döndür;) // Animasyon oluşmazsa var kurs2 \u003d kurs; // Ders değerini saklamak için geçici değişken kurs \u003d 1; // Kaydırıcının yönünü sağdan sola doğru ayarlar animate (); // animate () işlevini çağırın kurs \u003d kurs2; // Ders değişkeni başlatılır )); slider.add (sonraki) .add (önceki) .hover (fonksiyon () ( // Fare imleci kaydırıcının içindeyse sliderStop (); // kaydırıcıyı askıya almak için sliderStop () işlevi çağrılır ), sonraki slayt); // İmleç kaydırıcıdan ayrıldığında, animasyon devam eder. sonraki slayt (); // nextSlide () işlevini çağırın } ) ;Sonuç, "ileri" ve "geri" düğmelerine sahip bir kaydırıcıdır
Şu anda, kaydırıcı - atlıkarınca - bir işletme, web sitesi - portföy veya başka herhangi bir kaynak için bir web sitesinde ihtiyacınız olan işlevsellik. Tam ekran görüntü kaydırıcılarının yanı sıra, yatay atlıkarınca kaydırıcılar herhangi bir web tasarımına iyi uyum sağlar.
Bazen kaydırıcının site sayfasının üçte birini kaplaması gerekir. Burada, döngü kaydırıcısı, geçiş efektleri ve duyarlı düzenlerle kullanılır. E-ticaret siteleri, tek tek gönderilerde veya sayfalarda birden çok fotoğrafı sergilemek için bir kaydırıcı atlıkarınca kullanır. Kaydırıcı kodu, ihtiyaçlarınıza göre serbestçe kullanılabilir ve değiştirilebilir.
HTML5 ve CSS3 ile birlikte jQuery kullanarak, benzersiz efektler sağlayarak sayfalarınızı daha ilgi çekici hale getirebilir ve ziyaretçilerin dikkatini sitenin belirli bir alanına çekebilirsiniz.
Slick - modern slider eklentisi - carousel
Slick, geliştiricilerinin çözümlerinin tüm kaydırıcı gereksinimlerinizi karşılayacağını iddia ettiği ücretsiz bir jquery eklentisidir. Duyarlı kaydırıcı - atlıkarınca, mobil cihazlar için döşeme modunda ve masaüstü sürümü için sürükle ve bırak modunda çalışabilir.
Bir geçiş efekti "solma", ilginç bir özellik olan "merkezde mod", otomatik kaydırmalı resimlerin tembel yüklenmesi içerir. Güncellenen işlevsellik, slayt ekleme ve bir slayt filtresi içerir. Eklentiyi gereksinimlerinize göre özelleştirebilmeniz için her şey.
Demo Modu | İndir
Owl Carousel 2.0 - jQuery - dokunmatik eklenti
Bu eklentinin cephaneliğinde hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun geniş bir özellik yelpazesi vardır. Bu, atlıkarınca kaydırıcısının güncellenmiş bir sürümüdür. Selefi tamamen aynı şekilde adlandırıldı.
Kaydırıcı, genel işlevselliği iyileştirmek için bazı yerleşik eklentiler içerir. Animasyon, video oynatma, kaydırıcı otomatik oynatma, yavaş yükleme, otomatik yükseklik ayarı Owl Carousel 2.0'ın ana özellikleridir.
Eklentinin mobil cihazlarda daha rahat kullanımı için sürükle ve bırak desteği dahildir.
Eklenti, mobil cihazların küçük ekranlarında bile büyük resimleri görüntülemek için mükemmeldir.
Örnekler | İndir
jQuery Silver Track eklentisi
Oldukça küçük ama işlevsellik açısından zengin jquery eklentisi, sayfaya bir kaydırıcı yerleştirmenize izin verir - küçük bir çekirdeğe sahip olan ve çok fazla site kaynağı tüketmeyen bir atlıkarınca. Eklenti, dikey ve yatay kaydırıcıları, animasyonları görüntülemek ve galeriden resim setleri oluşturmak için kullanılabilir.
Örnekler | İndir
AnoSlide - Ultra kompakt duyarlı jQuery kaydırıcısı
Ultra kompakt bir jQuery kaydırıcısı - normal bir kaydırıcıdan çok daha fazla işlevselliğe sahip bir atlıkarınca. Tek görüntü önizlemesi, çoklu görüntü döngüsü ekranı ve başlık tabanlı kaydırıcı içerir.
Örnekler | İndir
Baykuş Atlıkarınca - Jquery Kaydırıcısı - Atlıkarınca
Owl carousel, HTML koduna kolayca yerleştirilebilen, dokunmatik ekranları destekleyen bir sürükle ve bırak kaydırıcısıdır. Eklenti, özel olarak hazırlanmış herhangi bir işaretleme olmadan güzel atlı karıncalar oluşturmanıza izin veren en iyi kaydırıcılardan biridir.
Örnekler | İndir
3D galeri - atlıkarınca
CSS stillerine ve bazı Javascript kodlarına dayalı 3B geçişler kullanır.
Örnekler | İndir
TweenMax.js ve jQuery kullanarak 3B atlı karınca
Muhteşem 3D atlıkarınca. Hala bir beta sürümü gibi görünüyor, çünkü şu anda onunla birkaç sorun keşfettim. Kendi kaydırıcılarınızı test etmek ve oluşturmakla ilgileniyorsanız, bu atlıkarınca çok yardımcı olacaktır.
Örnekler | İndir
Önyükleme kullanarak atlı karınca
Yeni web siteniz için doğru olan önyükleme teknolojisini kullanan duyarlı atlıkarınca kaydırıcısı.
Örnekler | İndir
Bootstrap - Moving Box carousel kaydırıcı çerçevesine göre
En çok portföy ve iş sitelerinde aranıyor. Bu tür karusel kaydırıcı, genellikle her tür sitede bulunur.
Örnekler | İndir
Tiny Circleslider
Bu küçük kaydırıcı, herhangi bir ekran çözünürlüğüne sahip cihazlarda çalışmaya hazırdır. Kaydırıcı hem dairesel hem de atlı karınca modlarında çalışabilir. Küçük daire, diğer benzer kaydırıcılara alternatif olarak sunulur. IOS ve Android işletim sistemleri için yerleşik destek vardır.
Kaydırıcı dairesel modda oldukça ilginç görünüyor. Sürükle ve bırak yöntemi desteği ve otomatik slayt kaydırma sistemi mükemmel bir şekilde uygulanmıştır.
Örnekler | İndir
Thumbelina İçerik Kaydırıcısı
Güçlü, duyarlı, atlıkarınca kaydırıcı, modern bir web sitesi için mükemmeldir. Herhangi bir cihazda doğru şekilde çalışır. Yatay ve dikey modlara sahiptir. Boyutu sadece 1 KB'a indirildi. Ultra kompakt eklenti ayrıca mükemmel pürüzsüz geçişlere sahiptir.
Örnekler | İndir
Vay - kaydırıcı - atlıkarınca
Web siteniz için orijinal bir kaydırıcı oluşturmanıza yardımcı olabilecek 50'den fazla efekt içerir.
Örnekler | İndir
BxSlider duyarlı jQuery içerik kaydırıcısı
Kaydırıcının nasıl uyum sağladığını görmek için tarayıcı penceresini yeniden boyutlandırın. Bxslider, 50'den fazla özelleştirme seçeneğiyle birlikte gelir ve özelliklerini çeşitli geçiş efektleriyle sergiler.
Örnekler | İndir
jCarousel
jCarousel, resim önizlemenizi düzenlemenize yardımcı olacak bir jQuery eklentisidir. Örnekte gösterilen tabandan kolayca özel resim karuselleri oluşturabilirsiniz. Kaydırıcı duyarlıdır ve mobil platformlarda çalışmak üzere optimize edilmiştir.
Örnekler | İndir
Scrollbox - jQuery eklentisi
Scrollbox, kaydırıcı - atlıkarınca veya metin kaydırma satırı oluşturmak için kompakt bir eklentidir. Anahtar özellikler arasında farenin üzerine gelindiğinde duraklama ile dikey ve yatay kaydırma bulunur.
Örnekler | İndir
dbpasCarousel
Basit kaydırıcı - atlıkarınca. Hızlı bir eklenti istiyorsanız, bu% 100 iyidir. Yalnızca kaydırıcının çalışması için gereken temel işlevlerle birlikte gelir.
Örnekler | İndir
Flexisel: Duyarlı JQuery Slider Eklentisi - Carousel
Flexisel'in yaratıcıları eski tarz jCarousel eklentisinden ilham alarak, kaydırıcının mobil ve tablet cihazlarda doğru çalışmasına odaklanan bir kopyasını çıkardı.
Flexisel'in duyarlı düzeni, mobil cihazlarda çalışırken, tarayıcı penceresinin boyutuna yönelik düzenden farklılık gösterir. Flexisel, hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmak üzere mükemmel bir şekilde uyarlanmıştır.
Örnekler | İndir
Elastislide - duyarlı kaydırıcı - atlıkarınca
Elastislide, cihazın ekran boyutuna mükemmel uyum sağlar. Belirli bir çözünürlükte görüntülenecek minimum görüntü sayısını ayarlayabilirsiniz. Dikey kaydırma efekti ile birlikte sabit bir sarmalayıcı kullanan bir resim galerisi atlı karınca kaydırıcısı olarak iyi çalışır.
Örnek | İndir
FlexSlider 2
Woothemes'ten serbestçe yeniden dağıtılabilir kaydırıcı. En iyi duyarlı kaydırıcılardan biri olarak kabul edilir. Eklenti birkaç şablon içerir ve hem acemi kullanıcılar hem de uzmanlar için yararlı olacaktır.
Örnek | İndir
İnanılmaz atlıkarınca
Amazing Carousel, duyarlı bir jQuery görüntü kaydırıcısıdır. WordPress, Drupal ve Joomla gibi birçok site yönetim sistemini destekler. Ayrıca, herhangi bir uyumluluk sorunu olmadan Android ve IOS ve masaüstü işletim sistemlerini destekler. Yerleşik harika karusel şablonları, kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.
Örnekler | İndir