baykuş atlıkarınca - jQuery eklentisi Duyarlı (duyarlı) bir kaydırıcı (atlıkarınca) oluşturmanıza olanak tanıyan dokunma desteği ile.
Çok uygun, basit ve duyarlı eklenti kaydırıcılar, atlıkarıncalar vb. oluşturmak için
Bu yazıda size nasıl çalıştığını açıklamaya ve göstermeye çalışacağım.

Owl Carousel Eklentisini Yükleme
İlk olarak, eklenti ile arşivi indirmemiz gerekiyor

Aşağıda DataLife Engine şablonuna bir eklenti yükleme örneği göstereceğim.

Arşivi indirdikten sonra açın ve dosyaları aşağıdaki gibi dağıtın:
Dosya baykuş.carousel.css ve baykuş.geçişler.css klasöre koy stilöyle ya css.
Dosya baykuş.carousel.js js klasörüne atın

Şimdi bu dosyaları şablonumuzda çalışabilmeleri için bağlamamız gerekiyor.
dosyayı açma ana.tplçizgiden önce giriyoruz aşağıdaki satırlar:
Dosya css sahip olduğunla değiştir css stiller!
Sonra en altta çizgiden önce aşağıdaki satırı giriyoruz:
Hepsi bu kadar! Kurulumu bitirdik.

Şimdi kaydırıcının kendisini eklememiz ve yapılandırmamız gerekiyor.
bir örnekle göstereceğim en iyi haberler onlar baykuş atlıkarıncamız aracılığıyla popüler haberleri gösterecek.

Belgeler sayfası tüm seçenekleri, demoları ve Owl Carousel eklentimizin nasıl kullanılacağını açıklar.
Bağlantıyı takip edin ve istediğiniz kaydırıcıyı seçin.
bizim için en iyi haberler Adı olan ilkini seçtim Görüntüler. Javascript sekmesinde şu satırları kopyalayın:
$ (belge) .ready (işlev () ($ ("# baykuş-demo").owlCarousel ((autoPlay: 3000, öğeler: 4, öğelerMasaüstü:, öğelerDesktopSmall:));)); ve bunları dosyaya ekleyin ana.tplçizgiden önce

Ardından, CSS sekmesinde satırları kopyalayın:
# owl-demo .item (marj: 3px;) # owl-demo .item img (ekran: blok; genişlik: %100; yükseklik: otomatik;) ve bunları herhangi bir css dosya veya dosya ana.tplçizgiden önce ama satırdan sonra !
Şimdi HTML kodumuzu ayrıştıracağız ve ona bağlayacağız. en iyi haberler. Dosyada ana.tpl etiketi doğru yere yerleştirin (en iyi haberler) bu da popüler haberlerin bir listesini görüntüler, dış görünüş hangi dosyada yapılandırılabilir topenews.tpl, aşağıda bu konuda daha fazlası .
Etiketli kodumuz şöyle görünmelidir:

Şimdi haberin kendisini yapılandırmak bize kaldı.
dosyayı açma Topnews.tpl ve en başta giriyoruz:

Şablonlarımdan birini Bootstrap ile kullanıyorsanız, seçenek olarak dosyada aşağıdaki satırları kullanabilirsiniz. topnews.tpl:

Haberler aşağıdaki gibi görüntülenecektir

Bu eklenti, etiketi kullanmanın yanı sıra hemen hemen her yerde kullanılabilir. (özel kategori)
Ayrıca standart DLE galerisinin yerini alabilir, bununla ilgili ayrı bir makale yayınlayacağım. Sağlık için kullanın ;)

Saygılarımla, admin. indirmek Dikkat: İndirme sınırına ulaşıldı. yarın gel =)

Şu anda, bir kaydırıcı - bir atlıkarınca - bir işletme, bir web sitesi - bir portföy veya başka herhangi bir kaynak için bir web sitesinde sahip olmanız gereken işlevsellik. Tam ekran görüntü kaydırıcılarının yanı sıra, yatay dönen kaydırıcılar herhangi bir web tasarımına iyi uyum sağlar.

Bazen kaydırıcı site sayfasının üçte birini kaplamalıdır. Burada atlıkarınca kaydırıcısı, geçiş efektleri ve duyarlı düzenlerle birlikte kullanılır. E-ticaret siteleri, tek tek gönderilerde veya sayfalarda birden fazla fotoğrafı sergilemek için bir dönen kaydırıcı 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 kaydırıcı eklentisi - carousel

Slick, geliştiricilerinin çözümlerinin tüm kaydırıcı gereksinimlerinizi karşılayacağını iddia ettiği ücretsiz bir jquery eklentisidir. Duyarlı atlıkarınca kaydırıcısı, 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 "merkezde mod", otomatik kaydırma ile görüntülerin tembel yüklenmesini içerir. Güncellenen işlevsellik, slayt eklemeyi ve bir slayt filtresini içerir. Eklentiyi gereksinimlerinize göre özelleştirebilmeniz için her şey.

Demo Modu | İndirmek

Owl Carousel 2.0 - jQuery - dokunma dostu eklenti

Bu eklenti, cephaneliğinde hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun olan çok çeşitli işlevlere sahiptir. o Güncellenmiş versiyon kaydırıcı - atlıkarınca. Selefi tam olarak aynı adlandırıldı.

Kaydırıcı, genel işlevselliği geliştirmek için bazı yerleşik eklentiler içerir. Animasyon, video oynatma, kaydırıcı otomatik oynatma, tembel yükleme, otomatik düzeltme yükseklikler - Owl Carousel 2.0'ın temel özellikleri.

Sürükleme desteği ve bırak eklentinin daha rahat kullanımı için dahil mobil cihazlar.
Eklenti, mobil cihazların küçük ekranlarında bile büyük görüntüleri görüntülemek için mükemmeldir.

Örnekler | İndirmek

jQuery Silver Track Eklentisi

Sayfaya bir kaydırıcı yerleştirmenize izin veren oldukça küçük, ancak işlevsellik açısından zengin jquery eklentisi - küçük bir çekirdeğe sahip 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 görüntü kümeleri oluşturmak için kullanılabilir.

Örnekler | İndirmek

AnoSlide - Ultra kompakt duyarlı jQuery kaydırıcısı

Aşırı yoğun jQuery kaydırıcısı- işlevselliği normal bir kaydırıcıdan çok daha fazla olan atlıkarınca. İçerirler Ön izleme tek görüntü, bir atlıkarınca ve başlık tabanlı kaydırıcıda birden çok görüntü görüntüleyin.

Örnekler | İndirmek

Baykuş Atlıkarınca - Jquery Kaydırıcısı - Atlıkarınca

Baykuş atlıkarınca - destekli kaydırıcı dokunmatik ekranlar ve sürükle teknolojisi ve bırakın, kolayca HTML koduna gömülebilir. 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 | İndirmek

3D galeri - atlıkarınca

CSS stillerine ve bazı Javascript kodlarına dayalı 3B geçişler kullanır.

Örnekler | İndirmek

TweenMax.js ve jQuery kullanarak 3B atlıkarınca

Harika 3D atlıkarınca. Görünüşe göre bu hala bir beta sürümü, çünkü şu anda onunla ilgili 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 | İndirmek

Ö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ı.

Örnekler | İndirmek

Bootstrap - Hareketli Kutu carousel kaydırıcı çerçevesine dayalı

En çok portföy ve iş sitelerinde talep edilir. Bu tür atlıkarınca kaydırıcısı genellikle her tür sitede bulunur.

Örnekler | İndirmek

Minik Daire Kaydırıcı

Bu küçük kaydırıcı, herhangi bir ekran çözünürlüğüne sahip cihazlarda çalışmaya hazır. Kaydırıcı hem dairesel hem de atlıkarınca modlarında çalışabilir. Minik daire, diğer benzer türdeki kaydırıcılara alternatif olarak sunulur. Yerleşik destek var işletim sistemleri IOS ve Android.

Kaydırıcı dairesel modda oldukça ilginç görünüyor. Sürükle ve bırak desteği ve otomatik slayt kaydırma sistemi mükemmel bir şekilde uygulanmaktadır.

Örnekler | İndirmek

Thumbelina İçerik Kaydırıcısı

Güçlü, duyarlı, dönen kaydırıcı, modern bir web sitesi için mükemmeldir. Herhangi bir cihazda düzgün çalışır. Yatay ve dikey modları vardır. Boyutu sadece 1 KB'a küçültülmüş. Ultra kompakt eklenti ayrıca mükemmel yumuşak geçişlere sahiptir.

Örnekler | İndirmek

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 | İndirmek

Duyarlı jQuery içerik kaydırıcısı bxSlider

Kaydırıcının nasıl uyum sağladığını görmek için tarayıcı pencerenizi yeniden boyutlandırın. Bxslider, 50'den fazla özelleştirme seçeneğiyle birlikte gelir ve özelliklerini çeşitli geçiş efektleriyle gösterir.

Örnekler | İndirmek

jAtlıkarınca

jCarousel, görüntü önizlemenizi düzenlemenize yardımcı olacak bir jQuery eklentisidir. Örnekte gösterilen çerçeveden kolayca özel carousel görüntüleri oluşturabilirsiniz. Kaydırıcı duyarlıdır ve mobil platformlarda çalışmak üzere optimize edilmiştir.

Örnekler | İndirmek

Scrollbox - jQuery eklentisi

Scrollbox, bir kaydırıcı - atlıkarınca veya metin kaydırma satırı oluşturmak için kompakt bir eklentidir. Temel özellikler, fareyle üzerine gelindiğinde duraklama ile dikey ve yatay kaydırmayı içerir.

Örnekler | İndirmek

dbpasCarousel

Basit kaydırıcı - atlıkarınca. Hızlı bir eklentiye ihtiyacınız varsa, bu %100 yapacaktır. Yalnızca kaydırıcının çalışması için gereken temel işlevlerle birlikte gelir.

Örnekler | İndirmek

Flexisel: Duyarlı JQuery Slider Eklentisi - Carousel

Flexisel'in yaratıcıları, eski okul jCarousel eklentisinden ilham aldı ve bir kopyasını mobil ve tablet cihazlarda kaydırıcının doğru çalışmasına odaklandı.

Mobil cihazlarda çalışırken Flexisel'in duyarlı düzeni, tarayıcı penceresinin boyutuna yönelik düzenden farklıdır. Flexisel, hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmak için mükemmel bir şekilde uyarlanmıştır.

Örnekler | İndirmek

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 efektiyle birlikte sabit bir sarmalayıcı kullanarak bir resim galerisi atlıkarınca kaydırıcısı olarak iyi çalışır.

Örnek | İndirmek

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 faydalı olacaktır.

Örnek | İndirmek

inanılmaz atlıkarınca

İnanılmaz Atlıkarınca - duyarlı kaydırıcı jQuery ile görüntüler. WordPress, Drupal ve Joomla gibi birçok site yönetim sistemini destekler. Ayrıca, herhangi bir uyumluluk sorunu olmadan işletim sistemlerinin Android ve IOS ve masaüstü sürümlerini destekler. Yerleşik şaşırtıcı atlıkarınca şablonları, kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.

Örnekler | İndirmek

/ * Atlıkarıncamızın başladığı yer burası. .carousel-wrapper bloğu göreceli olarak konumlandırılmıştır, .carousel-itemi kesinlikle konumlandırılmıştır. ... * / .carousel-wrapper (konum: göreceli; / * Kesinlikle konumlandırılmış kutular, yüksekliklerini ve genişliklerini üst öğeden alırlar. Onları varsayılan olarak şeffaf yaptık ve ardından .arrow-prev ve.arrow- bağlantılarına tıklandığında kaybolacaklar. sonraki. * / .carousel öğesi (konum: mutlak; üst: 0; alt: 0; sol: 0; sağ: 0; dolgu: 25px50px; opaklık: 0; geçiş: all0.5sease-in-out; / * Notice soldaki ve sağdaki padding 50px ile mi?Bu şekilde bağlantılarımızı konumlandırabiliriz!Her biri 50px genişliğinde olacak.Ayrıca, boş linkler kullanıyorum. arka plan deseni bağlantılar ok gibi görünecek şekilde. değiştirip değiştirmediğinizi kontrol edin bağlantı adresi orijinal url ile bağlantılarınız yalnızca şeffaf dikdörtgenler değildir. * / .arrow (konum: mutlak; üst: 0; ekran: blok; genişlik: 50 piksel; yükseklik: %100; -webkit-tap-vurgulama-renk: rgba (0,0,0,0); arka plan: url ( "/carousel-arrow-dark.png")50%50%/20pxno-repeat; / * Okumuzu tekrar sola hareket ettirelim. * / & .arrow-prev (sol: 0;) / * Ve ikincisi ok için aynı resmi kullandığım için onu 180 derece döndürüyorum. * / & .arrow-next (sağ: 0; -webkit-transform: döndürme (180deg); dönüştürme: döndürme (180deg);) ) / * Atlıkarınca slaytlarının görünüşünü çok beğeniyorum koyu arka plan ve .carousel-item bloğu "hafif" sınıfındaysa, metnini beyaza değiştireceğiz ve gri oklar yerine beyaz okları kullanacağız. Ok görüntüsünün yolunun doğru olup olmadığını tekrar kontrol edin * / & .light (renk: beyaz; .arrow (background: url ("/ carousel-arrow-light.png") %50 %50 / 20pxno-repeat;)) / * Daha küçük cihazlarda okları yeniden boyutlandırmak için bir medya sorgusu yazın * / @media (max-width: 480px) (.arrow, &. Light.arrow (background-size: 10px; background-position: 10px50% ;))) / * Görüntülenecek bağlantıların hedefini belirleyin: yok; Böylece, oklara her tıklamayla tarayıcının sürekli olarak atlıkarıncanın en üstüne atlamasından kurtuluruz. Bu özellik, tanımlayıcısı "hedef öğe" ile başlayan tüm öğeler için geçerlidir. * / (display: none;) / * Yukarıda, tüm carousel slaytlarımızı şeffaf hale getirdik, bu da carousel yüklendiğinde bunun yerine büyük bir boş alan alacağımız anlamına geliyor. İlk slaytın saydamlık değerini görüntüleme için 1 olarak değiştirin. Ayrıca, z-endeksini diğer slaytların üzerine konumlandırarak 2'ye ayarlayın. * / .item-1 (z-index: 2; opaklık: 1;) / * Ama ilk slaydın her zaman opaklığa sahip olmasını istemiyoruz: 1; aksi takdirde diğerleri dönerken bu slaytta yolumuza devam etmek zorundayız. * / *: target ~ .item-1 (opaklık: 0;) / * .. ancak # target-item-1 odağı varsa ve ilk slaydı göstermek istiyorsak, ~ simgesiyle seçin ve opaklığı ayarlayın 1'e geri dön :-) * / # hedef-öğe-1: hedef ~ .item-1 (opaklık: 1;) / * Odakta başka hedef-öğe- # varsa, bunları ~ seçiciyi kullanarak seçin, düzgün bir şekilde gösterin ve bunları z-endeksini kullanarak en üste yerleştirin: 3. Üçten fazla öğeniz varsa, burada hedef öğe kimliğine sahip ek aralıklar ekleyebilirsiniz. Aynı anda 10 öğe ekleyebilir .. * / # hedef öğe-2: hedef ~ .item-2, # hedef öğe-3: hedef ~ .item-3 (z-endeksi: 3; opaklık: 1;))

Evet konu oldukça yıpranmış. Ancak yine de, gerçekten ihtiyacınız olanı bulmak çoğu zaman zordur. Hepsi, birçok gereksiz işlevselliğe sahip son derece karmaşık komut dosyaları sunar. Ve genellikle bunlar zaten sıkıştırılmış eklentilerdir.

bu yüzden benimkini sunacağım Alternatif seçenekçok basit bir jQuery atlıkarınca.

Bir resim atlıkarıncası, bir haber atlıkarıncası veya başka herhangi bir içerik olarak kullanılabilir =)

Kendime izin verdiğim tek küçük çan ve ıslık, atlıkarınca bloğundaki gölgeydi.

GÜNCELLEME: 07/06/2014

Bunun gibi bir şey görünecek:
DEMO İndirme

Yapı aşağıdaki formu alacaktır:

Stilleri tanımlayalım:

Döngü (maksimum genişlik: 1080 piksel; / * tüm bloğun genişliği * / kenar boşluğu: 50 piksel otomatik; genişlik: %100;) Dönen sarmalayıcı (kenar boşluğu: 10 piksel 30 piksel; / * oklar için dolgu * / taşma: gizli; / * içeriği ana alanın dışında gizle * / konum: göreli;) dönen öğeler (genişlik: 10000 piksel; / * öğe kümesi için daha büyük bir genişlik ayarla * / konum: göreli; / * kutuyu ana atlıkarıncaya göre konumlandır alan * /). carousel -block (float: sol; / * tüm carousel öğelerini arka arkaya düzenleyin * / genişlik: 250 piksel; / * her öğenin genişliğini ayarlayın * / padding: 10px 10px 10px 0px; / * boşluk bırakın elemanların birleşmemesi * /) .carousel -block img (ekran: blok;) / *********** DÜĞMELER *********** / .carousel-button -left a, .carousel-button-right a ( genişlik: 25px; yükseklik: 36px; konum: göreli; üst: 80px; imleç: işaretçi; metin-dekorasyon: yok;) .carousel-button-sol a (kayan nokta: sol ; arka plan: url (../ resimler / carousel- left.png);) .carousel-button-right a (float: sağ; arka plan: url (../ resimler / carousel-right.png); ) / *********** GÖLGE *********** / .shadow (kutu-gölge: 0px 0px 10px rgba (0, 0, 0, 0.6);)

Ve son olarak, nasıl çalışması gerektiği:

// Sağ oka $ (belge) .on ("click", ".carousel-button-right", function () (var carusel = $ (bu) .parents (". Carousel"); right_carusel üzerinde bir tıklama yapın (atlıkarınca ); false döndür;)); // Sol okla tıklayın $ (belge) .on ("tıklayın", ". Carousel-button-left", function () (var carusel = $ (bu) .parents (". Carousel"); left_carusel (atlıkarınca ) ; false döndür;)); function left_carusel (carusel) (var blok_genişliği = $ (carusel) .find (". carousel-block"). externalWidth (); $ (carusel) .find (". carousel-items .carousel-block").eq (- 1) .clone ().PrependTo ($ (döngü) .find (". Dönen öğeler")); $ (dönen öğeler) .find (". Dönen öğeler"). Css (("sol": "-" + blok_genişliği + "px")); $ (atlıkarınca) .find (". atlıkarınca-öğeleri .karusel-blok").eq (-1) .remove (); $ (atlıkarınca) .find (". dönen öğeler " ) .animate ((sol: "0px"), 200);) function right_carusel (carusel) (var blok_width = $ (carusel) .find (". carousel-block"). externalWidth (); $ (carusel) . find (".carousel-items").animate ((sol: "-" + blok_width + "px"), 200, function () ($ (carusel) .find (". carousel-items .carousel-block") .eq (0) .klon ().addTo ($ (döner) .find (". dönen öğeler")); $ (dönen öğeler") .find (". dönen öğeler .döner-blok"). ) .remove (); $ (carusel) .find (". carousel-items").css (("sol": "0px"));));) $ (function () (// Aşağıdaki satırın açıklamasını kaldırın carousel'in otomatik olarak kaydırılmasını etkinleştirmek için auto_right (". carousel: first");)) // Automa kaydırma işlevi auto_right (döngü) (setInterval (işlev () (if (! $ (dönüş) .is (". hover")) right_carusel (döngü); ), 3000)) // İmleci carousel üzerinde hareket ettirin $ (belge) .on ("mouseenter", ".carousel", function () ($ (bu) .addClass ("hover"))) // Kaldır dönen imleç $ (belge) .on ("mouseleave", ".carousel", function () ($ (bu) .removeClass ("hover")))

Buna göre, gölge çıkarılabilir. Ve kullanım için, ana bloğun boyutunu ve iç içe "kaydırma" bloklarını css'de değiştirmeniz yeterlidir. Otomatik olarak kaydırması için bu işlemi döngüye almak da çok kolaydır ( bu durumda, sadece auto_right işlevine yapılan çağrıyı kaldırın). Yani görev çerçevesinde ihtiyaç duyulan her şeyi bu basit galeriden yapabilirsiniz!

Ayrıca, verilen örnek uyarlanabilir olduğunda, yani atlıkarınca boyutunun ekranın boyutuna göre uyarlandığı ve hem bir bilgisayar veya dizüstü bilgisayarın ekranında hem de bilgisayar ekranında doğru şekilde görüntüleneceğini de belirtmek gerekir. tabletlerin ve akıllı telefonların ekranları.

1.jQuery tıklamaKarusel

Kayan haber duyurularının olduğu bir blok. Bloklar arasında gezinmek için sol / sağ oklar kullanılır. Arşiv, iki tarzda bir atlıkarınca içerir: açık ve koyu.

1.jQuery carousel eklentisi "carouFredSel"

Temiz, taze bir jQuery görüntü karuseli.

4. jQuery Eklentisi: Elastislide Carousel

5. "TinyCarousel" Eklentisi

jQuery kullanarak bir resim karusel biçiminde harika içerik kaydırıcıları. Demo sayfası, bu karuselin sitenize nasıl ekleneceğini açıklar.

Slider Kit eklentisi, hafif atlıkarınca Farklı yollar kaydırma.

7.javascript atlıkarınca

8. jQuery eklentisi "Izgara Gezinme Etkileri"

Resimlerin küçük resimleri arasında orijinal gezinme. Efekti demo sayfasının sağ tarafında görmek için Yukarı ve Aşağı düğmelerini tıklayın. Bu jQuery çözümü, küçük resim üzerinde gezinme ve fare tekerleği kaydırma üzerinde de bir etki sağlar.

9. Hafif atlıkarınca

10. Easy Paginate bloklarından Carousel

jQuery eklentisi "Kolay Sayfalandırma". Her dikdörtgen blok, normal bir liste öğesi li'yi temsil eder ve üçten fazla öğe varsa, hepsini görüntülemek için kaydırıcı benzeri bir gezinme kullanmanız gerekir ("ileri", "geri" oklarını kullanarak ve gezinme düğmelerini kullanarak) alt).

11. Dikey döndürücü "Dikey Ticker"

JQuery dikey döndürücü: bir sayfadaki içeriğin otomatik olarak kaydırılması. Gezinme düğmelerinin yanı sıra döndürmeyi durdurma ve yeniden başlatma yeteneği sağlanır. Farenin üzerine geldiğinizde hareket durur. HTML işaretleme düzeyinde, kaydırma blokları normal li liste öğeleriyle temsil edilir.

12.javascript css kaydırılabilir alan

DIV kapsayıcısına sarılmış kaydırılabilir bir alan oluşturmak için javascript "TinyScroller" çözümü.

13. jQuery eklentisi "Smooth Div Scroll"

Belirli bir alanda içeriğin yatay olarak kaydırılması için eklenti. Fare imlecini alanın sol veya sağ kenarının üzerine getirdiğinizde kaydırma başlar.

İçerik slaytları arasında gezinme, oklar kullanılarak veya bir küçük resme tıklanarak yapılabilir. Altta, küçük resimleri gizlemenize/göstermenize izin veren bir "Göster" düğmesi vardır veya Tam tanım kaymak.

15. İçerik Döndürücü "Dairesel İçerik Karuseli"

17. Kaydırıcı

Fareyle üzerine gelindiğinde görünen kaydırma çubuğuna sahip bir blok. Kaydırma çubuğunu veya fare tekerleğini kullanarak içeriği kaydırabilirsiniz.

Bu jQuery çözümü, Apple'ın web sitesindeki benzer bir etkiden esinlenmiştir. Bu şirketin geliştiricileri her zaman dünyanın her yerinden web yöneticilerine ilham veren ilginç çözümler bulmuşlardır. Eklentiyi göstermek için listeden herhangi bir kategoriden seçim yapın.

19. Harika kaydırıcı

Kaydırıcı otomatik olarak oluşturulur. Ürün adı, açıklama, bağlantı ve resim adresini içeren veriler slider.db.txt dosyasından alınır. Kullanılan teknolojiler: CSS, PHP, jQuery.

20. jQuery kullanarak blokları döndürme

Blok döndürmenin etkisini görmek için demo sayfasındaki küçük dikdörtgenlerden birine tıklayın.

Örneğin bir içerik kaydırma eklentisi, en son haberleri göstermek veya bir sitede Twitter el ilanlarını göstermek için kullanılabilir.

22. Dinamik blok "Müşteri incelemeleri"

Blok içeriğinin otomatik döndürülmesi. Kullanılan teknolojiler: PHP, XML, CSS, jQuery.

Bu eklenti, liste öğelerini (ul li) jQuery öğeleri atlıkarınca.

26. javascript ImageFlow atlıkarınca

Fare tekerleği ile resimleri kaydırmak kolaydır.

27. Kaydırılan içerik

Sitedeki veya haberlerdeki en son materyallerin duyurusunu içeren kompakt bir blok. Sol sütun, en son haberlerin kısa duyurularının sayfalandırılmış bir listesini görüntüler. Bunlardan birini seçtiğinizde, birden fazla Detaylı Açıklama ve yayının tam metnini okumak için bir bağlantı. jQuery ile uygulandı.

Bağlantılı resimler kaydırılır, fareyi üzerine getirdiğinizde kaydırma durur ve gezinme çubuğu görünür. Fareyi resmin üzerine getirdiğinizde, adı da kontrol düğmeleri arasında görüntülenir. sayfada çok güzel görünüyor

33. Kaydırılan içerik, Mootools eklentisi "Kaydırma çubuğu"

Kaydırma, hem kaydırma çubuğu hem de fare tekerleği ile gerçekleştirilir.