En basit kaydırıcı. Basit duyarlı jQuery dokunmatik kaydırıcı

Herhangi bir bağımlılık olmaksızın saf Javascript ile yazılmış basit, hafif (21Kb sıkıştırılmış) kaydırıcı, ör. jQuery olmadan çalışır.

Aşağıdaki tarayıcılarda test edilmiştir:

• krom 26.0
• Firefox 20.0
• Safari 5.1.7
• IE 10
• Opera 16.0

IE8 / 9 için eksik destek var (etki yok).

özellikler

• Sayfaya sınırsız sayıda kaydırıcı ekleyebilir, hatta birini diğerinin içine yerleştirebilirsiniz.
• İçeriğe göre yeniden boyutlandırılır, ancak devre dışı bırakılabilir.
• Klavyede Gezinme - İmleç kaydırıcı üzerindeyken, ok kaydırıcılarını değiştirebilirsiniz.
• Mobil dokunma olayları için destek.

Bağlantı

Kapanış etiketinden önce bağlanmak gerek slidr.js veya slidr.min.js dosya.

HTML işaretlemesi

slidr.js id özniteliğine sahip herhangi bir satır içi, satır içi blok, blok öğeleriyle çalışabilir. data-slidr özniteliği ile herhangi bir birinci seviye alt öğenin kullanılmasına izin verilir, örneğin:

• elma
• muz
• Hindistan cevizi

Javascript

bağlandıktan sonra slidr.js global slider nesnesi kullanılabilir hale gelecektir. Slider oluşturmanın en kolay yolu şudur:

Slidr.create ("slidr-id") Başlat ();

Tüm ayarlarla arayın:

Slidr.create ("slidr-id", (sonra: function (e) (console.log ("in:" + e.in.slidr);), önce: function (e) (console.log ("out: "+ e.out.slidr);), içerik kırıntıları: doğru, kontroller:" köşe ", yön:" dikey ", solma: yanlış, klavye: doğru, taşma: doğru, tema:" # 222 ", zamanlama: (" küp ":" 0,5 sn kolaylık "), dokunma: doğru, geçiş: " küp "))). start ();

Ayarlar

slidr.js için mevcut tüm ayarlar aşağıdaki tabloda gösterilmektedir.

Geri arama sonrası ve öncesi işlevleri aşağıdaki verileri alır:

(id: "slidr-id", içinde: (el: # , slidr: "data-slidr-in", trans: "geçiş", yön: "yön"), çıkış: (el: # , slidr: "veri-slidr-out", çeviri: "geçiş-çıkış", yön: "yön-dışarı"))

Slider.js küresel API'si

Slider global ad alanı aşağıdaki işlevleri sağlar:

/ ** * Mevcut sürüm * @return (string) major.minor.patch. * / işlev sürümü () (); / ** * Mevcut geçiş efektleri. * @return (Dizi) geçişler. * / fonksiyon geçişleri () (); / ** * Slider oluşturur ve döndürür. * Bu işlevi aynı öğe üzerinde iki kez çağırmak, önceden oluşturulmuş Slidr nesnesini döndürür. * Slidr için @param (dize) öğe kimliği. * @param (Object =) opt_settings Kaydırıcı ayarları. * / function create (id, opt_settings) ();

kaydırıcı API'si

Kısa giriş

Var s = slidr.create ("slidr-api-demo", (ekmek kırıntıları: doğru, taşma: doğru)). Ekle ("h", ["bir", "iki", "üç", "bir"]) .add ("v", ["beş", "dört", "üç", "beş"], "küp") .start ();

Slidr.js API işlevlerinin tam listesi aşağıda sunulmuştur.

/ ** * Slider'ı başlatın! * start () çağrısından önce hiçbir şey eklenmemişse oluşturulacak slaytları otomatik olarak bulur. * @param (string) başlangıç ​​için opt_start `data-slidr` kimliği. * @return (bu) * / fonksiyon başlatma (opt_start) (); / ** * Kaydırabiliyor muyuz kontrol edin. * @param (string) yanında bir yön ("yukarı", "aşağı", "sol", "sağ") veya bir "data-slidr" kimliği. * @return (boolean) * / function canSlide (sonraki) (); / ** * Kaymak! * @param (string) yanında bir yön ("yukarı", "aşağı", "sol", "sağ") veya bir "data-slidr" kimliği. * @return (bu) * / fonksiyon slaydı (sonraki) (); / ** * Bir dizi slayt ekler. * @param (string) yön `yatay || h` veya `dikey || v`. * @param (Array) idleri Slidr'a eklenecek `data-slidr` id'lerin listesi. Slaytlar Slidr'in doğrudan çocukları olmalıdır. * @param (string =) opt_transition Slaytlar arasında uygulanacak geçiş veya kullanımlar * @param (boolean =) opt_overwrite Çakışma meydana gelirse mevcut slayt eşlemelerinin / geçişlerin üzerine yazıp yazılmayacağını * @return (bu) * / function add (yön, ids, opt_transition, opt_overwrite) (); / ** * Otomatik olarak belirli bir zaman aşımından sonra sonraki slayda ilerle. Çağrılar çağrılmamışsa başlar () * @param (int =) opt_msec Her slayt geçişi arasındaki milis sayısı. Varsayılan olarak 5000 (5 saniye) * @param (string = ) opt_direction "yukarı", "aşağı", "sol" veya "sağ" Varsayılan olarak "sağ"dır. * @param (string =) opt_start Başlatılacak `data-slidr` kimliği (yalnızca auto çağrıldığında çalışır) * @return (bu) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Açıksa otomatik geçişi durdur. * @return (bu) * / fonksiyon stop() (); / ** * Özel animasyon zamanlamaları ayarlayın. * @param (string | Object) geçişi Bir geçiş adı (yani "küp") veya bir ("geçiş": "zamanlama") nesnesi. * @param (string =) opt_timing Yeni animasyon zamanlaması (yani "0.5s kolay kullanım"). Geçiş bir nesneyse gerekli değildir. * @return (bu) * / işlev zamanlaması (geçiş, opt_timing) (); / ** * Kırıntıları aç/kapat. * @return (bu) * / fonksiyon kırıntıları () (); / ** * Kontrolleri aç/kapat. * @param (string =) opt_scheme Mevcut değilse aç/kapat, yoksa düzeni değiştir. "sınır", "köşe" veya "hiçbiri". * @return (bu) * / fonksiyon kontrolleri (opt_scheme) ();

Slaytları değiştirirken sayfayı kaydırma

Bu kötü hata bazı tarayıcılarda görünür. Düzeltmek için gövdeye stil eklemeniz gerekir:

Gövde (taşma: gizli;)

Dinamik yeniden boyutlandırma

Slidr, kaydırıcının resme sığdırmak için yeniden boyutlandırılması gerekip gerekmediğini "anlar". Kaydırıcı bloğunun belirtilen boyutları varsa, Slider bunları otomatik olarak değiştirmez. Min-width ve min-height özellikleri belirtilirse, kaydırıcı bu değerler dikkate alınarak içeriğe uyacak şekilde yeniden boyutlandırılacaktır. Aksi takdirde, boyutlandırma otomatik olarak gerçekleştirilecektir.

Otomatik yeniden boyutlandırma

Statik boyutlar

Kaydırıcı kontrolleri

Kontroller için işaretleme aşağıdaki gibidir:

CSS seçicilerini kullanarak herhangi bir kaydırıcı kontrolünü özelleştirebilirsiniz:

Kenarda .slidr-control.right (genişlik: 50 piksel! Önemli; yükseklik: 50 piksel! Önemli; üst: %50! Önemli; üst kenar boşluğu: -25 piksel! Önemli; sağ: -25 piksel! Önemli; kenarlık yarıçapı: 25 piksel; arka plan : url ("/ static / images / arrow_right.png") 14px 13px tekrarsız siyah; opaklık: 0.4;) kenara .slidr-control.right: üzerine gelin (opaklık: 1;)

Ok kontrolü: after sözde seçici ile uygulanır, bu yüzden onu gizlemek için aşağıdaki kodu kullanın:

// Tek bir denetleyici içinde tek bir oku gizleyin. kenara .slidr-control.right: after (border-color: şeffaf! önemli;) // Tüm okları tek bir denetleyicide gizleyin. kenara .slidr-kontrol: after (border-color: şeffaf! önemli;) // Tüm Slidr oklarını gizle. kenara .slidr-kontrol: sonra (kenarlık rengi: şeffaf! önemli;)

Slider Ekmek kırıntıları

Ekmek kırıntıları basit HTML işaretlemesine sahiptir. Her ul tüm satırı ve her li ayrı bir kırıntıyı temsil eder:

İçerik kırıntılarını CSS ile şekillendirme:

// Konumu, boyutu, kenarlık rengini ve arka plan rengini özelleştirin. kenara (sağ: %50! önemli; kenar-sağ: -41px! önemli;) kenara .slidr-breadcrumbs li (genişlik: 15 piksel! önemli; yükseklik: 15 piksel! önemli; kenar boşluğu: 3 piksel! önemli;) kenara .slidr-breadcrumbs li.normal (kenarlık-renk: beyaz! önemli;) kenara .slidr-breadcrumbs li.active (arka plan rengi: siyah! önemli;)

Lisans

Bu yazılımın kullanımı MIT lisansı altında ücretsizdir.

Yazardan: Web sayfalarının kaydırma yapılmadan görünen kısmının iddia edilen "ölümü" hakkındaki söylentilere rağmen, iyi bir kaydırıcıya olan ihtiyaç hiçbir yerde kaybolmadı. Dürüst olalım, sadece bir saniyeliğine - kaydırıcılar eğlencelidir. Ayrıca, hareketli içeriğin aksine başka hiçbir şey kullanıcı için bir wow etkisi yaratmaz. Tüm kaydırıcılar, birbirinin yerine geçen birkaç slayttan oluşur ve kaydırıcı kodunun mümkün olduğunca hafif olması son derece önemlidir. Burası jQuery'nin kullanışlı olduğu yer.

Envato Market'teki 20 jQuery kaydırıcısına bir göz atın ve yalnızca bir blok sorunsuz değişen görüntüden daha fazlası olan kaydırıcılar olduğunu göreceksiniz.

1. RoyalSlider - jQuery'de dokunmatik resim galerisi

Aynı zamanda dokunmaya duyarlı, duyarlı bir kaydırıcı, artık eskisinden çok daha fazlasını ifade ediyor. RoyalSlider, hem duyarlılığı hem de dokunmatik ekran işlevselliğini birleştirir. Galeri HTML5 ve CSS3 ile yazıldığı için iyi bir seçim.

Birkaç ilginç özellik:

JavaScript. Hızlı başlangıç

SEO optimizasyonu

Yüksek özelleştirme

10'dan fazla başlangıç ​​şablonu

CSS3 geçişleri için bir geri dönüş var

Bence en havalı özellik, gereksiz şeyleri ana JS dosyasından çıkarmanıza izin veren ve böylece ağırlığı azaltan "modüler komut dosyası mimarisidir". Bir jQuery dokunmatik ekran galerisi olan RoyalSlider, herhangi bir geliştiricinin araç kutusunda bulunması gereken sağlam bir JavaScript kaydırıcısıdır.

2. Slider Revolution duyarlı jQuery eklentisi

Kaydırıcı ile "devrim niteliğinde" bir şey yapmak kolay değil. Kaydırıcılar söz konusu olduğunda ekleyebileceğiniz çok fazla işlev var. Ancak Slider Revolution gerçekten iyi bir deneme. jQuery kaydırıcıları arasında bu örnek olası tüm gereksinimlerinizi karşılar.

Kaydırıcı özelliklerinin listesi çok uzun, bu yüzden sadece en iyilerini listeleyeceğim:

Paralaks efekti ve özel animasyon

Bağlantılı sınırsız katman ve slayt

kullanıma hazır, son derece özelleştirilebilir stiller

ve daha fazlası

Bir resim, yerleşik video oynatıcı ve sosyal medya bağlantıları ekleme yeteneği, Slider Revolution'ı web'deki en esnek ve özelleştirilebilir seçeneklerden biri yapar.

3. LayerSlider duyarlı jQuery kaydırıcı eklentisi

"LayerSlider duyarlı jQuery eklenti kaydırıcısı" adı bu kaydırıcıyı gerçekten takdir edemez.
200'den fazla 2D ve 3D slayt geçişi herkesin başını döndürecek.

Birkaç dikkate değer özellik:

13 görünüm ve 3 çeşit menü

Kaydırıcının üstüne sabit bir görüntü yerleştirme yeteneği

Ve jQuery yedeği

Ve daha fazlası

Önceki kaydırıcıda olduğu gibi, HTML5 yerleşik multimedya içeriği dahil hemen hemen her içeriği ekleyebilirsiniz. LayerSlider, kaydırıcıları hayata geçirir ve çok güzeldir.

4.jQuery Banner Döndürücü / Slayt Gösterisi

jQuery Banner Rotator / Slideshow, temel işlevsellikten ödün vermeyen oldukça basit bir kaydırıcıdır.

Olasılıklar:

Araç ipuçları, metin eklemeleri vb.

Bileşenleri görüntülemek için önizleme ve çeşitli seçenekler

Bir kaydırıcı veya tümü için gecikmeli zamanlayıcı

Tüm slaytlar için çoklu geçişler veya her biri için ayrı geçişler

jQuery Banner Rotator / Slideshow, diğer jQuery kaydırıcılarına kıyasla yalnızca temel özelliklere sahiptir, ancak bunu unutmamalısınız.

5. Hepsi Bir Arada Kaydırıcı - Duyarlı jQuery kaydırıcı eklentisi

Web'de görünen herhangi bir kaydırıcının kendine özgü bir vizyonu vardır ve kendi alanındaki sorunları çözer. Ama bu değil. Hepsi Bir Arada Kaydırıcı her şey dahil olarak adlandırılabilir.

Çoğu web geliştiricisi ve tasarımcısının kanıtlanmış bir çözümü olduğunu düşünüyorum, ancak her zaman yeni bir şeyler arıyorlar. Ve bu "yeni bir şey" şunları içerir:

afiş döndürücü

Önizleme ile banner

Oynatma listesi afişi

İçerik kaydırıcısı

atlıkarınca

Tüm kaydırıcı türleri, jQuery kaydırıcılarının ihtiyaç duyduğu işlevselliğin tümünü olmasa da çoğunu destekler. Hepsi Bir Arada Slider sizin her şey dahiliniz mi olacak?

6. UnoSlider - Uyarlanabilir dokunmatik ekran kaydırıcısı

Kaydırıcınız yanıt vermiyorsa ve dokunmatik ekranları desteklemiyorsa, yanlış kaydırıcıya sahipsiniz. UnoSlider doğru.

Bu kaydırıcı, sadelik ve zengin özellik seti arasında güneşte yerini buldu. Fonksiyonlar:

Temalar için destek

12 hazır tema

40 geçiş

IE6 + desteği

UnoSlider'ı tema ekleme yeteneğine sahip mükemmel bir içerik kaydırıcısı yapan tasarım ve stilde bir önyargıya sahip tüm özellikler.

7.Master Slider - jQuery dokunmatik ekran kaydırıcısı

"Hepsine hükmedecek bir jQuery kaydırıcısı" mı arıyorsunuz? Master Slider'ı deneyin - farklı ekran boyutları için jQuery dokunmatik ekran kaydırıcısı ...

İyi tasarım söz konusu olduğunda, bu en iyilerinden biridir:

25'ten fazla şablon

Donanım hızlandırmalı geçişler

Dokunma ve kaydırma desteği

Ve daha fazlası

Etkileşimli geçişler, hareketli katmanlar ve sıcak noktalar kesinlikle dikkatinizi çekecektir. Master Slider bir sanat eseridir.

8. TouchCarousel - jQuery içerik kaydırıcısı ve kaydırıcısı

TouchCarousel, ücretsiz destek ve güncellemelerle dikkat çekiyor. Ancak bunlar, bu hafif jQuery carousel kaydırıcısının tüm özellikleri değildir.

Ad "dokunma" kelimesini içeriyorsa, kaydırıcının tamamen duyarlı olduğunu ve dokunmayı desteklediğini tahmin edebilirsiniz. Diğer fonksiyonlar:

SEO optimizasyonu

Akıllı otomatik oynatma

Donanım hızlandırmalı CSS3 geçişleri

Özelleştirilebilir kullanıcı arayüzü ve 4 Photoshop dış görünümü

TouchCarousel, benzersiz fiziksel slayt kaydırma özelliği sayesinde mobilde yepyeni bir deneyim düzeyi sunar.

9.Gelişmiş Kaydırıcı - jQuery XML kaydırıcısı

jQuery kaydırıcıları yalnızca web siteleri için değildir. Web uygulamalarında da kullanışlı olabilirler. Gelişmiş Kaydırıcı bunu yapmanızı sağlar.

HTML veya XML işaretlemesi ile bu gelişmiş kaydırıcı kalıcı bir izlenim bırakır:

Animasyonlu katmanlar ve akıllı video

100'den fazla geçiş ve 150'den fazla özel özellik

15 kaydırıcı görünümü, 7 kaydırma çubuğu görünümü ve yerleşik ışık kutusu desteği

Klavyede gezinme, dokunma desteği ve tam özelleştirme

Ve daha fazlası

Bununla birlikte, en iyi özellik, kaydırıcıyı web uygulamanız için ideal kılan jQuery XML Slider API'si olan Advanced Slider'dır.

10.jQuery Slider Yakınlaştır / Uzaklaştır Etkisi Tamamen Duyarlı

Yetenekleri hakkında okumaya başlamadan önce bir demo izlemenizi sağlayacak jQuery kaydırıcılarından biri. Sadece bu "yakınlaştırma/uzaklaştırma etkisinin" ne anlama geldiğini anlamak istiyorsunuz.

Yakınlaştırma efekti oldukça zayıf, ancak kaydırıcının geri kalanı sabitken görüntüye bir kontrol ve gerçek dokunuş hissi katıyor. Kaydırıcının özel özellikleri:

Katmanlar arasında CSS3 geçişleri

Katmanlar için animasyon bitiş seçeneği

Sabit genişlik, tam ekran ve tam genişlik seçenekleri

HTML ve CSS biçimlendirmeli animasyonlu metin

Çoğu kaydırıcı mümkün olduğu kadar çok efekt dahil etmeye çalışır ve jQuery Slider Zoom In / Out Effect Fully Responsive yalnızca Ken Burns etkisine sahiptir, ancak iyi bir şekilde uygulanmıştır.

11.jQuery Carousel Evrimi

Yukarıda bahsedilen Gelişmiş Kaydırıcı - jQuery XML Kaydırıcısı gibi, jQuery Carousel Evolution, işlevselliği geliştirmek veya kaydırıcıyı başka bir projeye entegre etmek için kullanılabilecek kendi API'sine sahiptir.

JavaScript. Hızlı başlangıç

Web uygulaması oluşturmaya yönelik uygulamalı bir örnekle JavaScript'in temellerini öğrenin

Resimler, HTML işaretlemesi, YouTube ve Vimeo videoları ile ayrıca şunları elde edersiniz:

SEO optimizasyonu

9 atlıkarınca stili

Gölge ve yansıma efektleri

Görüntü boyutu hem ön hem de arka olarak ayarlanabilir

jQuery Carousel Evolution, birçok kullanım örneğine sahip basit bir atlıkarıncadır.

12. Seksi Kaydırıcı

Sexy Slider artık eskisi kadar seksi değil. Ancak yaşı nedeniyle bu kaydırıcı güvenilirdir.

İlk bakışta, kaydırıcı çok etkileyici değil, ancak iyi kurulursa tasarımınıza mükemmel şekilde uyacaktır. Olasılıklar:

Slaytları otomatik oynat

Resim başlıkları

Slaytların sürekli oynatılması

6 geçiş efekti

Sexy Slider, tüm gücünü ve potansiyelini ortaya çıkarmanız için sizi bekliyor.

13.jQuery Image & Content Scroller w / Lightbox

Tüm bu mobil tasarımlar ve dokunmatik ekran desteği ile masaüstü deneyimini unutmayan bir jQuery kaydırıcısını görmek güzel.

jQuery Image & Content Scroller w / Lightbox, klavye ve fare tekerleği girişini ve diğer özellikleri destekler:

Yatay ve dikey yönlendirme

Kaydırıcının içindeki veya dışındaki metin başlıkları

Bir seferde görünen belirli sayıda slayt ayarlama yeteneği

Satır içi resimler, Flash, iframe'ler, Ajax ve satır içi içerik

Kaydırıcı ayrıca yerleşik bir ışık kutusuna sahiptir. İstenirse, jQuery Image & Content Scroller w / Lightbox'ta kaydırıcının kendisini başlatamazsınız, ancak lightbox'ı ayrı olarak başlatabilirsiniz.

14. Yarı Saydam - Duyarlı afiş döndürücü / kaydırıcı

Çoğu jQuery kaydırıcısının kendi tasarımları vardır. Kendiniz için özelleştirebilirsiniz, ancak bazen her şeyin kaydırıcının içinde olmasını istersiniz. Saydam olarak dikkatinize sunuyoruz.

Kaydırıcıda çok sayıda ön ayar var. Belki de sadece belirli ayarları yapılandırmanız gerekiyor ve hepsi bu. Olasılıklar:

6 farklı stil

4 geçiş efekti

2 kaydırma geçişi

Özelleştirilebilir düğmeler ve başlıklar

Diğerleri gibi, bu kaydırıcı da dokunmaya duyarlı, duyarlı ve donanım hızlandırmalı. Translucent, içeriğin kendisini ön plana çıkaran minimal tasarıma sahip bir kaydırıcıdır.

15. FSS - Tam Ekran Kayar Web Sitesi Eklentisi

Tam ekran slayt sitesi yapmak ister misiniz? O zaman FSS'ye ihtiyacınız var.

Aslında, bu jQuery kaydırıcısı ile tam ekran bir kaydırıcı sitesi oluşturmak son derece kolaydır. Olasılıklar:

AJAX desteği

Kaydırma çubuğu

Derin bağlantı teknolojisi desteği

2 farklı geçiş efekti

Ayrıca bakmaya değer klavye desteği ve 11 sayfalık bir kılavuz. Ancak, gerçek izlenim, FSS'nin yalnızca 5Kb ağırlığından kaynaklanmaktadır.

16. Zozo Accordion - Uyarlanabilir dokunmatik ekran kaydırıcısı

Oldukça iyi bir iş çıkaran stil odaklı bir jQuery kaydırıcısının başka bir örneği. Zozo Akordeon, stil değiştirme yeteneğine sahip iyi bir kaydırıcı akordeon arayan herkes için bir zorunluluktur.

CSS3 animasyonlu bu güzellik de oldukça geniş bir özellik yelpazesine sahiptir:

Yatay ve dikey akordeon

Semantik HTML5 ve SEO Optimizasyonu

Dokunmatik, klavye ve WAI-ARIA desteği

10'dan fazla görünüm ve 6 düzen

Ve daha fazlası

Zozo Accordion, ücretsiz desteğe ve sürekli güncellemelere ve bir jQuery akordeonunda görmek istediğiniz tüm özelliklere sahiptir.

17.jQuery Duyarlı OneByOne Slider Eklentisi

jQuery Duyarlı OneByOne Slider Plugin, bir kaydırıcıdan çok basit bir animasyon gibidir. Bu örnek, her seferinde bir slayt görüntülemek yerine, sonraki slayta geçmeden önce alanda yer kalmayana kadar ekranı adım adım slaytlarla doldurur.

CSS3 animasyonları Animate.css içinden çalışır, hafiftir, çok katmanlıdır ve mobil uyumludur. Birkaç fonksiyon:

Sürükle ve bırak navigasyon seçeneği de vardır. jQuery Duyarlı OneByOne Slider Plugin, Twitter Bootstrap carousel tarafından desteklenmektedir.

18. Akordeon - jQuery eklentisi

Hiçbir jQuery kaydırıcısı bundan daha kolay değildir. Accordionza'yı şimdiye kadarki en hafif akordeon kaydırıcı yapan, çalışması için yalnızca 3KB'lık bir kaydırıcıya ihtiyaç duyar.

Üç stili beğenmediyseniz, HTML ve CSS'yi kendiniz değiştirebilirsiniz. Olasılıklar:

Klavye gezintisi

Efektleri ve düğmeleri özelleştirmek kolay

Aşamalı geliştirme tekniği - JavaScript olmadan çalışır

Accordionza'nın birçok karışık içerik varyasyonu gösterebildiğini ve bu da onu son derece esnek hale getirdiğini unutmayın.

19.mightySlider - Duyarlı çok amaçlı kaydırıcı

MightySlider gerçekten güçlü bir kaydırıcıdır. Yalnızca basit bir görüntü kaydırıcısı olarak değil, aynı zamanda menü öğeleri arasında gezinme özelliğine sahip tam ekran tek yönlü kaydırıcı olarak da kullanılabilir. Harika bir tek sayfalık web sitesi yapmak için kullanılabilir.

Kaputun altında birçok seçenek bulacaksınız:

Klavye, fare ve dokunma desteği

Donanım hızlandırmalı CSS3 geçişleri

Temiz Geçerli İşaretleme ve SEO Optimizasyonu

Sınırsız sayıda slayt, başlıklar için katmanlar ve bunlar için efektler

API çok güçlüdür ve geliştirici dostudur, bu da onu kullanmanın farklı yollarını açar. MightySlider, temiz ve iyi yorumlanmış koda sahip mükemmel, aşamalı bir jQuery kaydırıcısıdır.

20. Paralaks Kaydırıcısı - Duyarlı jQuery eklentisi

Paralaks Kaydırıcısı, jQuery Duyarlı OneByOne Kaydırıcı Eklentisi gibi çalışır ve tek bir slayt içinde her katmanı ayrı ayrı canlandırmanıza olanak tanır. Paralaks animasyonu ekleyerek tüm slaytları veya hatta yalnızca bir slaytı canlandırabilirsiniz.

Set, tümü paralaks efektli 4 farklı türde kaydırıcı içerir. Diğer jQuery kaydırıcıları gibi, şunlara sahiptir:

Tamamen özelleştirilebilir

Dokunma desteği

Tamamen duyarlı, sınırsız katmanlar

Otomatik oynatma, Döngü, Yükseklik ve Genişlik Ayarı ve Zamanlayıcı

Animasyonlu katmanlar sadece metin veya resimlerden ibaret değildir. Ayrıca YouTube, Vimeo ve HTML5 videoları da ekleyebilirsiniz. Paralaks Kaydırıcısı, Flash efektlerini tüm cihazlarda desteklenen Flash'ın kendisinden bile daha iyi bir şekilde nasıl simüle edebileceğinizin bir başka güzel örneğidir.

Çözüm

jQuery kaydırıcılarının bir görseli diğeriyle değiştiren bir şeyden devasa bir yaratıcı araçlar setine nasıl dönüştüğünü görmek ilginç. Artık 3D, paralaks kaydırıcılar, tam sayfa kaydırıcılar, uyarlanabilir olanlar ve hem masaüstü bilgisayarlarda hem de akıllı telefonlarda görüntülenebilenler var.

Bu listedeki slaytlardan herhangi birini beğenmediyseniz, her zaman Envato'daki jQuery Code Tutorial'ı alabilir ve tamamen yeni ve benzersiz bir şey geliştirebilirsiniz.

Veya çeşitli seçenekler için Envato Market'teki diğer kaydırıcılara göz atın. Favori jQuery kaydırıcınız hangisi ve neden?

Otomatik kaydırmalı basit bir kaydırıcıya ihtiyacımız var. Başlayalım ...

Kaydırıcının çalışmasının 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ı çoğaltmanız gerekir. Üçüncü slayttan birinciye geçişi sağlamak için bu gereklidir. Ayrıca ilk slayttan üçüncüye geri 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 tekrar eder. Bu, sonsuz bir kaydırıcı yanılsaması yaratır.

HTML işaretlemesi

İlk olarak, basit bir otomatik kaydırma kaydırıcısı 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: 320 piksel; yükseklik: 210 piksel; taşma: gizli;) .slider (konum: göreli; genişlik: 10000 piksel; yükseklik: 210 piksel;) .slider img (kayan: sol; z-endeksi: 0;)

.slider kutusu kabı, kaydırıcının boyutlarını ayarlar. overflow: hidden özelliği, öğenin içindeki alana girmeyen tüm öğeleri gizler.

Kaydırıcı kap, 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 yerleşimi bulunmaktadır.

Senaryo

Slaytların hareketi, kapsayıcının kaydırıcısının kenar boşluğu-sol özelliği sorunsuz bir şekilde değiştirilerek yapılacaktır.

$ (işlev () (var genişlik = $ (". kaydırıcı kutusu") .width (); // Kaydırıcı genişliği. aralık = 4000; // Slaytları değiştirme aralığı.$ (". kaydırıcı img: son") .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, bir slayt genişliğinin soluna kaydırılır. setInterval ("animasyon ()", aralık); // Slaytları değiştirmek için animasyon () işlevi çalıştırılır.)); işlev animasyonu () (var kenar boşluğu = ayrıştırma ($ (". kaydırıcı") .css ("marginLeft")); // Bloğun geçerli ofseti. genişlik = $ (". kaydırıcı kutusu") .width (), // Kaydırıcı genişliği. kaydırıcılarAmount = $ (". kaydırıcı") .children () .uzunluk; // Kaydırıcıdaki slayt sayısı. if (kenar boşluğu! = (- genişlik * (kaydırıcılarAmount- 1))) // Geçerli slayt son slayt değilse,(kenar boşluğu = kenar boşluğu genişliği; // 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 ("sol kenar boşluğu", - genişlik); // ardından kaydırıcı bloğu başlangıç ​​konumuna döner, kenar boşluğu = - genişlik * 2; ) $ (". kaydırıcı") .animate ((marginLeft: kenar boşluğu), 1000); // Kaydırıcı bloğu 1 slayt sola kaydırılır. } ;

Sonuç, sonsuz otomatik kaydırmalı basit bir kaydırıcıdır.

Başlangıç ​​olarak, bu makale size web sayfaları için bir resim kaydırma kaydırıcısının nasıl oluşturulacağını anlatmak amacıyla yazılmıştır. Bu makale hiçbir şekilde eğitici nitelikte değildir, yalnızca değerlendirme nesnemizi nasıl uygulayabileceğinizin bir örneği olarak hizmet eder. Bu yazıda verilen kodu bu tür gelişmeler için bir tür şablon olarak kullanabilirsiniz, umarım yazdıklarımın tüm özünü okuyucuya yeterince ayrıntılı ve erişilebilir bir şekilde aktarabilirim.

Ve şimdi konuya gelince, çok uzun zaman önce bir siteye bir kaydırıcı koymam gerekiyordu, ancak İnternette hazır komut dosyaları aradıktan sonra değerli bir şey bulamadım. bazıları ihtiyacım olduğu gibi çalışmadı, bazıları ise konsolda hatasız başlamadı. Kullanmak jQuery - eklentiler kaydırıcı için bana çok ilginç geldi, tk. Bununla sorunu çözecek olsam da, bu mekanizmanın çalışması hakkında bir fikrim olmayacak ve eklentiyi bir kaydırıcı uğruna kullanmak çok uygun değil. Ayrıca çarpık komut dosyalarını gerçekten anlamak istemedim, bu yüzden kaydırıcı için kendi komut dosyamı yazmaya karar verdim, ihtiyacım oldukça işaretleyeceğim.

İlk olarak, kaydırıcının mantığına karar vermeli ve ardından uygulamaya geçmeliyiz, bu aşamada bu mekanizmanın işleyişini net bir şekilde anlamak çok önemlidir, çünkü onsuz kodu yazamayız. tam istediğimiz gibi çalışıyor.

asıl amacımız şu olacak görüş alanı, yani, resimlerimizin nasıl döndüğünü göreceğimiz bir blok, içinde kaydırıcı, bu, tüm görüntüleri içeren, tek bir satırda dizilmiş ve en içindeki konumunu değiştirecek olan bloğumuz olacaktır. görüş alanı.


Ayrıca, iç taraflarda görüş alanı, dikey olarak ortada, geri ve ileri butonları yer alacak, üzerine tıkladığımızda da pozisyonumuzu değiştireceğiz. kaydırıcı Nispeten görüş alanı, böylece resimler arasında kaydırma etkisine neden olur. Ve son olarak, son nesne, altta bulunan gezinme butonlarımız olacaktır. görüş alanı.


Üzerlerine tıkladığımızda bu butonun seri numarasına bakmamız ve yine kaydırma yaparak ihtiyacımız olan slayda geçeceğiz. kaydırıcı(ofset değişiklik yoluyla yapılacaktır css özelliklerini dönüştür, değeri sürekli olarak hesaplanacaktır).

Yukarıda yazdıklarımdan sonra tüm bu olayın mantığının netleşmesi gerektiğini düşünüyorum ama yine de bir yerlerde yanlış anlaşılmalar varsa, o zaman aşağıdaki kodda her şey açıklığa kavuşacaktır, biraz sabretmeniz yeterli.

Şimdi yazalım! Öncelikle sitemizi açacağız. dizin dosyası ve ihtiyacımız olan işaretlemeyi oraya yazın:

• 
• 
• 
• 

Gördüğünüz gibi, karmaşık bir şey yok kaydırıcı için blok kaydırıcımızın yerleştirileceği aynı blok olarak hizmet eder, kendi içinde görüş alanı hangi bizim kaydırıcı, aka iç içe liste, burada li slaytlar ve resim- içlerindeki resimler. Lütfen tüm resimlerin aynı boyutta veya en azından oranlarda olması gerektiğine dikkat edin, aksi takdirde kaydırıcı eğri görünecektir, tk. boyutları doğrudan görüntünün en boy oranına bağlıdır.

Şimdi her şeyi stilize etmemiz gerekiyor, genellikle stiller üzerine pek yorum yapılmaz ama ilerde yanlış anlaşılma olmasın diye buna dikkat çekmeye karar verdim.

gövde (kenar boşluğu: 0; dolgu: 0;) # kaydırıcı için blok (genişlik: 800 piksel; kenar boşluğu: 0 otomatik; kenar boşluğu: 100 piksel;) #görünüm noktası (genişlik: %100; görüntü: tablo; konum: göreli; taşma: gizli; -webkit-kullanıcı-seçimi: yok; -moz-kullanıcı-seçimi: yok; -ms-kullanıcı-seçimi: yok; -o-kullanıcı-seçimi: yok; kullanıcı-seçimi: yok;) #slidewrapper ( konum: göreli; genişlik: hesap (%100 * 4); üst: 0; sol: 0; kenar boşluğu: 0; dolgu: 0; -webkit-geçişi: 1s; -o-geçişi: 1s; geçiş: 1s; -webkit -geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; -o-geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı;) #slidewrapper ul, #slidewrapper li (marj : 0; dolgu: 0;) #slidewrapper li (genişlik: calc (%100 / 4); liste stili: yok; ekran: satır içi; kayan nokta: sol;) .slide-img (genişlik: %100;)

İle başlayalım kaydırıcı için blok, bu, yine, kaydırıcı için ayıracağımız sayfadaki bloğumuzdur, yüksekliği genişliğine ve resmimizin oranlarına bağlı olacaktır, çünkü görüş alanı tüm genişliği kaplar kaydırıcı için blok sonra kendim kaymak aynı genişliğe sahiptir ve buna göre içindeki resim, genişliğe bağlı olarak yüksekliğini değiştirir (oranlar korunur). Bu öğeyi sayfamın ortasına yatay olarak yerleştirdim, üstten 100 piksel doldurarak konumunu bir örnek için daha uygun hale getirdim.

eleman görüş alanı, daha önce de belirtildiği gibi, tüm genişliğimizi kaplar kaydırıcı için blok, özelliği var taşma: gizli, görüntü alanından dışarı çıkacak olan resim beslememizi gizlememize izin verecek.


Takip etme css özelliği - kullanıcı seçimi: yok, düğmelere birden fazla tıklama ile tek tek kaydırıcı öğelerinin mavi seçiminden kurtulmanızı sağlar.

devam etmek kaydırıcı Niye pozisyon: göreceli, Ama değil mutlak? Her şey çok basit, tk. ikinci seçeneği seçersek, o zaman özellik ile görüntü alanı taşması: gizli kesinlikle hiçbir şey bize görünmeyecek, tk. kendim görüş alanı yüksekliğe ayarlanmayacak kaydırıcı, sahip olacağından dolayı yükseklik: 0... Genişlik neden bu kadar önemli ve neden ayarlıyoruz? Gerçek şu ki, slaytlarımız eşit bir genişliğe sahip olacak Görünüm alanının %100'ü, ve onları bir sıraya dizmek için duracakları bir yere ihtiyacımız var, dolayısıyla genişlik kaydırıcı eşit olmalı %100 görüntü alanı genişliği slayt sayısıyla çarpılır (benim durumumda 4). İlişkin geçiş ve geçiş-zamanlama-fonksiyonu sonra burada 1s pozisyonda bir değişiklik anlamına gelir kaydırıcı 1 saniye içinde gerçekleşecek ve bunu gözlemleyeceğiz ve giriş-çıkış kolaylığı- ilk önce yavaş gittiği, ortaya hızlandığı ve sonra tekrar yavaşladığı animasyon türü, burada değerleri zaten kendi takdirinize göre ayarlayabilirsiniz.

Bir sonraki özellik kümeleri bloğu kaydırıcı ve çocukları sıfır dolguya sahiptir, burada yorum gereksizdir.

Ardından, slaytlarımızı şekillendireceğiz, genişlikleri genişliğe eşit olmalıdır. görüş alanı, ama o zamandan beri içerdeler kaydırıcı genişliği, slayt sayısıyla çarpılan görünüm alanının genişliğine eşittir, ardından genişliği elde etmek için görüş alanı yine, genişliğin %100'üne ihtiyacımız var kaydırıcı slayt sayısına bölün (benim durumumda yine 4'e). Daha sonra bunları kullanarak satır içi öğelere dönüştürüyoruz. ekran: satır içi ve özelliği ekleyerek akışı sola ayarlayın yüzer: sol... Hakkında liste stili: yok Varsayılan işaretçiyi kaldırmak için kullandığımı söyleyebilirim. li, çoğu durumda bir tür standarttır.

İle birlikte slayt-img her şey basit, resim tüm genişliği kaplayacak kaymak, kaymak yüksekliğine göre ayarlanır, kaydırıcı yüksekliğe göre ayarlanır kaymak ve yükseklik görüş alanı sırayla yükseklik değerini alacak kaydırıcı, bu nedenle kaydırıcımızın yüksekliği, görüntünün en boy oranına ve yukarıda zaten yazdığım kaydırıcı için sağlanan bloğun boyutuna bağlı olacaktır.

Sanırım stilleri burada bulduk, şimdilik butonsuz basit bir slayt gösterisi yapalım ve düzgün çalıştığından emin olduktan sonra bunları ekleyip stillendirelim.

bizimkini açalım js dosyası kaydırıcı kodunu içerecek, eklemeyi unutmayın jQuery dan beri bu çerçeveyi kullanarak yazacağız. Bu arada, bu yazıyı yazarken sürümü kullanıyorum. jQuery 3.1.0... Komut dosyasının bulunduğu dosya, etiketin en sonuna eklenmelidir. vücut dan beri önce başlatılması gereken DOM öğeleriyle çalışacağız.

Şimdilik, birkaç değişken tanımlamamız gerekiyor, biri zaman içinde belirli bir noktada gördüğümüz slayt numarasını saklayacaktır. görüş alanı, ona isim verdim şimdi slayt, ikincisi ise bu aynı slaytların sayısını depolayacaktır, bu slaytCount.

var slideNow = 1; var slideCount = $ ("# slidewrapper").child().length);

Değişken şimdi slayt başlangıç ​​değeri 1'i ayarlamak gereklidir, çünkü sayfa yüklendiğinde, işaretlememize dayanarak ilk slaydı göreceğiz görüş alanı.

V slaytCountçocuk sayısını koyacağız kaydırıcı, burada her şey mantıklı.
Ardından, slaytları sağdan sola değiştirmekten sorumlu olacak bir işlev oluşturmanız gerekiyor, bunu ilan edeceğiz:

işlev nextSlide () ()

Bunu kodumuzun ana bloğunda arayacağız, buna ulaşacağız, ancak şimdilik fonksiyonumuza ne yapması gerektiğini söyleyeceğiz:

nextSlide () işlevi (if (slideNow == slideCount || slideNow)<= 0 || slideNow >slideCount) ($ ("# slidewrapper").css ("transform", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0" ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

İlk olarak, şimdi feed'imizin son slaytında olup olmadığımızı kontrol ediyoruz? Bunu yapmak için, kullanarak tüm slaytlarımızın sayısını alıyoruz. $ ("# slayt sarmalayıcı").çocuklar().uzunluk ve slaytımızın numarasıyla kontrol edin, eğer eşitlerse, o zaman bu, 1 slayttan şeridi tekrar göstermeye başlamamız gerektiği anlamına gelir, bu, değiştirdiğimiz anlamına gelir. css dönüştürme özelliği NS kaydırıcıüzerinde çevir (0, 0), böylece ilk slaytın görüş alanımızda görünmesi için orijinal konumuna kaydırarak, şunu da unutmayın. –Webkit ve –ms yeterli çapraz tarayıcı görüntüleme için (bkz. css özellikleri referansı). Bundan sonra değişkenin değerini güncellemeyi unutmayalım. şimdi slayt, 1 numaralı slaydın görüş alanında olduğunu ona bildirerek: slaytŞimdi = 1;

Aynı koşul, gördüğümüz slayt sayısının slaytlarımızın sayısı sınırları içinde olup olmadığını kontrol etmeyi içerir, eğer bir şekilde bu sağlanmazsa, 1. slayta döneriz.

İlk koşul karşılanmazsa, o zaman bu, şu anda son slaytta veya var olmayan bir slaytta olmadığımız anlamına gelir, bu da bir sonrakine geçmemiz gerektiği anlamına gelir, kaydırarak yapacağız. kaydırıcı genişliğe eşit bir değerle sola görüş alanı, yer değiştirme yine tanıdık özellik aracılığıyla gerçekleşecek Çevirmek kimin değeri eşit olacak "translate (" + translateWidth + "px, 0)", nerede tercüme Genişliği- uzaklığımız kaydırıcı... Bu arada, bu değişkeni kodumuzun başında bildirelim:

var translateWidth = 0;

Bir sonraki slayda geçtikten sonra, slaytımıza bir sonraki slaydı gördüğümüzü söyleyin: slaytŞimdi ++;

Şu anda bazı okuyucuların bir sorusu olabilir: neden değiştirmedik? $ ("# görünüm alanı"). genişlik () bazı değişkenlere, örneğin slayt Genişliği slaytımızın genişliğini her zaman elinizin altında bulundurmak için? Cevap çok basit, eğer sitemiz duyarlıysa, buna göre, kaydırıcı için ayrılan blok da uyarlanabilir, bundan, sayfayı yeniden yüklemeden pencere genişliğinin boyutunu değiştirirken (örneğin, döndürme) anlaşılabilir. telefon yana doğru), genişlik görüş alanı değişecek ve buna bağlı olarak bir slaydın genişliği de değişecektir. Bu durumda, bizim kaydırıcı orijinal genişlik değeri ile kaydırılacaktır, bu da resimlerin parçalar halinde görüntüleneceği veya hiç görüntülenmeyeceği anlamına gelir. görüş alanı... Fonksiyonumuza yazarak $ ("# görünüm alanı"). genişlik () onun yerine slayt Genişliği slaytları her değiştirdiğimizde genişliği hesaplamasını sağlıyoruz görüş alanı, böylece ekran genişliği aniden değiştiğinde istenen slayda bir kaydırma sağlar.

Ancak fonksiyonu yazdık, şimdi belirli bir zaman aralığından sonra onu çağırmamız gerekiyor, aralığı bir değişkende de saklayabiliriz, böylece değiştirmek istersek kodda sadece bir değeri değiştirin:

var slideInterval = 2000;

Js cinsinden süre milisaniye cinsinden belirtilir.

Şimdi aşağıdaki yapıyı yazalım:

$ (belge) .ready (işlev () (setInterval (nextSlide, slideInterval);));

Her şey hiçbir yerde kolay değil, inşaatın içerisindeyiz $ (belge) .ready (işlev () ()) Belge tamamen yüklendikten sonra aşağıdaki işlemlerin yapılması gerektiğini söylüyoruz. O zaman sadece işlevi çağırırız sonraki slayt eşit bir aralık ile slaytAralık, yerleşik işlevi kullanarak setInterval.

Yukarıda gerçekleştirdiğimiz tüm işlemlerden sonra kaydırıcımız iyi dönmeli, ancak bir şeyler ters gittiyse, sorun sürümde olabilir. jQuery veya herhangi bir dosyanın yanlış bağlantısında. Ayrıca, kodda bir yerde hata yapmış olabileceğinizi hariç tutmanıza gerek yok, bu yüzden size sadece her şeyi iki kez kontrol etmenizi tavsiye edebilirim.


Bu arada, devam edin, kaydırıcımıza vurgulu kaydırmayı durdurma gibi bir işlev ekleyin, bunun için ana kod bloğuna yazmamız gerekiyor ($ (belge) içinde .ready (işlev () ())) Böyle bir şey:

$ ("# görünüm alanı").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nextSlide, slideInterval);));

Bu kodu analiz etmeye başlamak için, ne olduğunu bilmemiz gerekiyor. switchInterval... İlk olarak, nextSlide işlevine yapılan periyodik bir çağrıyı saklayan bir değişkendir, basitçe söylemek gerekirse, bu kod satırını kullanıyoruz: setInterval (sonrakiSlide, slideInterval);, şuna dönüştü: switchInterval = setInterval (nextSlide, slideInterval);... Bu manipülasyonlardan sonra ana kod bloğumuz aşağıdaki formu aldı:

$ (belge) .ready (işlev () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Burada olay kullanıyorum üzerine gelmek"vurgulu" anlamına gelen bu olay, bir nesnenin üzerine geldiğim anı izlememe izin veriyor, bu durumda görüş alanı.

Gezindikten sonra, parantez içinde belirteceğim boşlukları temizliyorum (bu bizim switchInterval), sonra virgülle ayırarak imleci geri hareket ettirdiğimde ne yapacağımı yazarım, bu blokta tekrar switchInterval periyodik fonksiyon çağrısı sonraki slayt.

Şimdi, kontrol edersek, kaydırıcımızın fareyle üzerine gelindiğinde nasıl tepki verdiğini ve slayt geçişini durdurduğunu göreceğiz.

Şimdi kaydırıcımıza butonları eklemenin zamanı geldi, ileri geri butonlarla başlayalım.

Her şeyden önce, onları işaretleyelim:

• 
• 
• 
• 

İlk başta, bu işaretleme anlaşılmayabilir, hemen söyleyeceğim, bu iki düğmeyi bir araya getirdim. div sınıf ile önceki-sonraki-btns sadece rahatınız için, bunu yapmak zorunda değilsiniz, sonuç değişmeyecek, şimdi onlara stiller ekleyeceğiz ve her şey netleşecek:

# önceki-btn, # sonraki-btn (konum: mutlak; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: #fff; sınır yarıçapı: %50; üst: hesap (%50 - 25 piksel);) # önceki- btn: vurgulu, # sonraki-btn: vurgulu (imleç: işaretçi;) # önceki-btn (sol: 20px;) # sonraki-btn (sağ: 20px;)

İlk olarak butonlarımızı konumlandırıyoruz. pozisyon: mutlak, böylece kendi içimizde konumlarını özgürce kontrol edeceğiz. görüş alanı, daha sonra bu düğmelerin boyutlarını belirteceğiz ve sınır yarıçapı köşeleri yuvarlayın, böylece bu düğmeler daireye dönüşür. Renkleri beyaz olacak, yani #fff ve üst kenardan girintileri görüş alanı bunun yüksekliğinin yarısına eşit olacak görüş alanı düğmenin yüksekliğinin yarısı (benim durumumda 25 piksel), böylece onları ortada dikey olarak konumlandırabiliriz. Ardından, üzerlerine geldiğimizde imlecimizin olarak değişeceğini belirteceğiz. Işaretçi ve son olarak düğmelerimize tek tek kenarlarından 20 piksel girinti yapmalarını söyleyin, böylece onları uygun gördüğümüz şekilde görebiliriz.

Yine sayfa öğelerini istediğiniz gibi şekillendirebilirsiniz, sadece kullanmaya karar verdiğim stillerden bir örnek veriyorum.

Şekillendirmeden sonra kaydırıcımız şöyle görünmelidir:


Ardından, bize geri dönün js dosyası düğmelerimizin nasıl çalıştığını açıkladığımız yer. Peki, başka bir fonksiyon ekleyelim, bize bir önceki slaydı gösterecek:

işlev prevSlide () (if (slideNow == 1 || slideNow)<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0) ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px) , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); şimdi slayt--;))

denir prevSlide, sadece üzerine tıkladığınızda çağrılacak önceki btn... İlk önce 1. slaytta olup olmadığımızı kontrol ediyoruz, burada da bizim slaytta olup olmadığımızı kontrol ediyoruz. şimdi slayt slaytlarımızın gerçek aralığının sınırlarının ötesinde ve koşullardan herhangi biri işe yararsa, kaydırarak son slayta geçeceğiz. kaydırıcı ihtiyacımız olan değere. Bu değeri şu formülle hesaplayacağız: (bir slaydın genişliği) * (slayt sayısı - 1), tüm bunları eksi işaretiyle alıyoruz, çünkü sola kaydırıyoruz, ortaya çıkıyor görüş alanışimdi bize son slaydı gösterecek. Bu bloğun sonunda değişkeni de söylememiz gerekiyor. şimdi slayt son slayt artık görüş alanımızda.

İlk slaytta değilsek, 1 geriye gitmemiz gerekiyor, bunun için tekrar özelliği değiştiriyoruz. kaydırıcı için dönüştürme... Formül şu şekildedir: (bir slaydın genişliği) * (geçerli slaydın sayısı - 2), yine tüm bunları eksi işaretiyle alıyoruz. Ama neden -1 değil de -2, sadece 1 slaydı geri kaydırmamız gerekiyor? Gerçek şu ki, 2. slayttaysak, o zaman değişken xözellikler dönüştürmek: çevir (x, 0) bizim kaydırıcı zaten bir slaydın genişliğine eşittir, eğer ona mevcut slaydın sayısından 1 çıkarmamız gerektiğini söylersek, o zaman zaten kaydırıldığı birimi tekrar alırız kaydırıcı, bu yüzden bu genişlikleri 0 ile kaydırmanız gerekecek görüş alanı, yani slaytta - 2.

Şimdi sadece bu satırları ana kod bloğuna eklememiz gerekiyor:

$ ("# next-btn").tıklayın (işlev () (nextSlide ();)); $ ("# önceki-btn").tıklayın (işlev () (öncekiSlide ();));

Burada sadece butonlarımıza bir tıklama yapılıp yapılmadığını takip ediyoruz ve bu durumda ihtiyacımız olan fonksiyonları çağırıyoruz, her şey basit ve mantıklı.

Şimdi kaydırmalı gezinme düğmelerini, işaretlemeye geri ekleyelim:

• 
• 
• 
• 

Görüldüğü gibi içeride görüş alanı iç içe bir liste belirdi, ona bir tanımlayıcı verin nav-btns, içinde li- gezinme butonlarımız, onlara bir sınıf atayacağız slayt-nav-btn, ancak, işaretlemeyi bitirebiliriz, hadi stillere inelim:

# nav-btns (konum: mutlak; genişlik: %100; alt: 20 piksel; dolgu: 0; kenar boşluğu: 0; metin hizalama: merkez;) .slide-nav-btn (konum: göreli; görüntü: satır içi blok; liste stili: yok; genişlik: 20 piksel; yükseklik: 20 piksel; arka plan rengi: #fff; kenarlık yarıçapı: %50; kenar boşluğu: 3 piksel;) .slide-nav-btn: vurgulu (imleç: işaretçi;)

blok nav-btns, butonlarımızın bulunduğu özelliği veriyoruz pozisyon: mutlak uzamasın diye görüş alanı yüksekliğinde, çünkü NS kaydırıcı Emlak pozisyon: göreceli, genişliği %100 olarak ayarladık, böylece metin hizalama: orta orta düğmeler yatay olarak göreli görüş alanı, ardından özelliği kullanarak alt alt kenardan 20 piksel uzaklıkta olması gerektiğini bloğumuza açıkça belirtiyoruz.

Slaytlarda olduğu gibi düğmelerle de aynısını yapıyoruz, ancak şimdi onları ayarlıyoruz ekran: satır içi blok dan beri NS ekran: satır içi tepki vermiyorlar Genişlik ve boy uzunluğu dan beri kesinlikle konumlandırılmış bir blokta. Onları beyaz yapacağız ve zaten bize tanıdık gelenlerin yardımıyla sınır yarıçapı onlara bir daire şekli verelim. Üzerlerine geldiğinizde, normal ekran için imlecimizin görünümünü değiştireceğiz.

şimdi aşağı inelim jQuery - parçalar:
İlk olarak, tıkladığımız butonun indeksini saklayacak olan navBtnId değişkenini bildirelim:

var navBtnId = 0;
$ (". slide-nav-btn"). (fonksiyon () (navBtnId = $ (bu) .index (); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# görünüm penceresi") öğesini tıklayın. genişlik () * (navBtnId); $ ("# slayt sarmalayıcı"). + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Tıkladığımızda buradayız slayt-nav-btnöncelikle değişkene atayan işlevi çağırırız navBtnId tıklanan düğmenin dizini, yani sıra numarası, sayım sıfırdan başladığından, ikinci düğmeye tıklarsak, o zaman navBtnId değer 1 yazılır. Ardından, geri sayım 0'dan değil de 1'den gibi bir sayı elde etmek için düğmenin sıra numarasına bir eklediğimiz bir kontrol yaparız, bu sayı ile bu sayıyı karşılaştırırız. geçerli slaydın numarası, eğer örtüşüyorlarsa, istenen slayt zaten mevcut olduğundan herhangi bir işlem yapmayacağız. görüş alanı.

İhtiyacımız olan slayt gözden uzaksa görüş alanı, sonra kaydırmamız gereken mesafeyi hesaplıyoruz kaydırıcı sola, ardından değeri değiştirin çeviride css dönüştürme özellikleri(piksel cinsinden aynı mesafe, 0). Bunu zaten bir kereden fazla yaptık, bu yüzden soru olmamalı. Sonunda mevcut slaydın değerini tekrar bir değişkene kaydediyoruz. şimdi slayt, bu değer tıklanan butonun indeksine bir tane eklenerek hesaplanabilir.

Hepsi bu, aslında, bir şey net değilse, o zaman malzemede yazılan tüm kodun sağlanacağı jsfiddle'a bir bağlantı bırakıyorum.

Dikkatiniz için teşekkürler!

Etiketler:

• jquery kaydırıcısı
• css
• css3 animasyonu
• html

Etiket ekle

Bu, jQuery ile yazılmış duyarlı bir dokunmatik kaydırıcıdır. Bu eklentinin motoru CSS3 animasyonlarını kullanır, ancak aynı zamanda tarayıcıların eski sürümleri için geri dönüşler vardır. Glide.js basit ve hafiftir.

kullanım

1. jQuery dahil

Eklentinin tek bağımlılığı, ilk etapta eklememiz gereken jQuery'dir:

2. Glide.js'yi bağlayın

3. HTML'yi ekleyin

Temel stilleri dahil edelim.

Html kaydırıcı yapısını toparlayalım.

4. Başlatma

Kaydırıcıyı varsayılan ayarlarla başlatın ...

... veya kendiniz için özelleştirin

Ayarlar

Mevcut parametrelerin listesi:

Parametre	Varsayılan değer	Bir çeşit	Açıklama
otomatik oynatma	4000	int / bool	Otomatik kaydırma (devre dışı bırakmak için yanlış)
hoverpause	NS	bool	Kaydırıcının üzerine geldiğinizde otomatik kaydırmayı duraklatın
animasyonZaman	500	int	!!! Bu seçenek, tarayıcı css3'ü desteklemiyorsa çalışır. Tarayıcı css3'ü destekliyorsa, bu parametre .css dosyasında değiştirilmelidir !!!
oklar	NS	bool / dize	Okları göster / gizle / ekle. Kaydırıcı kapsayıcısında okları görüntülemek için doğrudur. Gizlemek için yanlış. Özel bir html kodu eklemek için sınıf adını da (örnek: ".sınıf-adı") belirtebilirsiniz.
oklarSarmalayıcıSınıfı	kaydırıcı oklar	sicim	Oklarla kapsayıcıya atanacak sınıf
okAnaSınıf	kaydırıcı ok	sicim	Tüm oklar için ana sınıf
okSağSınıf	kaydırıcı ok - sağ	sicim	Sağ ok sınıfı
okSolSınıf	kaydırıcı ok - sol	sicim	sol ok sınıfı
okSağMetin	sonraki	sicim	Sağ ok metni
okSolMetin	önceki	sicim	Sol ok metni
gezinme	NS	bool / dize	Slayt navigasyonunu göster / gizle / ekle. Görüntülemek için doğru. gizlemek için yanlış
navCenter	NS	bool	Merkez gezinme
navClass	kaydırıcı-nav	sicim	Gezinti kapsayıcısı için sınıf
navItemClass	kaydırıcı-nav__item	sicim	Gezinme öğesi için sınıf
navCurrentItemClass	kaydırıcı-nav__item - geçerli	sicim	Geçerli gezinme öğesi için sınıf
tuş takımı	NS	bool	Sol / sağ düğmelere basarken slaytı kaydırın
Dokunma Mesafesi	60	int / bool	Dokunma desteği. Bu özelliği devre dışı bırakmak için False.
önceInit	işlev () ()	işlev	Eklentiyi başlatmadan önce çalışacak geri arama
afterInit	işlev () ()	işlev	Eklenti başlatıldıktan sonra çalışacak geri arama
önceGeçiş	işlev () ()	işlev	Kaydırıcıyı kaydırmadan önce çalışacak geri arama
geçiş sonrası	işlev () ()	işlev	Kaydırıcıyı kaydırdıktan sonra çalışacak geri arama

API

API'yi kullanmak için bir değişkene kayma yazın.

Var glide = $ (". Slider").Glide ().Veri ("api_glide");

Artık API yöntemleri sizin için kullanılabilir.

Glide.jump (3, console.log ("Wooo!"));

• .current () - Geçerli yan numarayı döndürür
• .play () - Otomatik kaydırmayı başlat
• .pause () - Otomatik kaydırmayı durdur
• .next (geri arama) - Kaydırıcıyı ileri kaydır
• .prev (geri arama) - Kaydırıcıyı geri kaydır
• .jump (mesafe, geri arama) - Belirli bir slayta geç
• .nav (hedef) - Navigasyonu belirli bir öğeye ekleyin (örneğin: "body", ".class", "#id")
• .arrows (hedef) - Okları belirli bir öğeye ekleyin (örneğin: "body", ".class", "#id")