Html5 duyarlı kaydırıcı. Css3'te duyarlı bir kaydırıcı nasıl yapılır? Duyarlı CSS3 Kaydırıcısı

Biri etkili yollar Site sayfasında kullanıcıların dikkatini çeken hareketli bir animasyon oluşturulmasıdır. Animasyon öğeleri, kullanıcılara ürününüz hakkında daha net bilgi vermeye ve göstermeye yardımcı olur. Son zamanlarda, kayan paneller çok popüler hale geldi ve ayrıca bir resmi kaydırırken veya tıklatırken ortaya çıkan bir dizi başka efekt. Kaydırıcılar, karuseller ve sürgülü paneller olarak da bilinirler. Bu makale, yumuşak otomatik kaydırma efektine sahip duyarlı bir atlıkarınca kaydırıcısı oluşturmaya odaklanacaktır.

Bugün, ağda hazır çözümlere bağlantılar içeren yüzlerce inceleme var, ancak çoğu, kaydırıcının performansını önemli ölçüde azaltan ve sitenin bir bütün olarak yüklenmesini yavaşlatan birçok kullanılmayan işlev içeriyor. Profesyonel web geliştiricileri her zaman esnek özelleştirme oluşturmaya çalışmıştır. yazılım ürünleri, ek kitaplıklar ve eklentiler için düşük bir eşik ile. Bu nedenle, böyle bir kaydırıcıyı düzenlemek için minimum gereksinimler, komut dosyamızın çalışmasına dahil edilir. Çalışmanın işlevselliği, anahtarlama aralığını, hızı ve belirli bir slayt seçimini ayarlamanıza olanak tanır. Aşağıda, kaydırıcının çalışmasını kontrol eden bir dizi değişken bulunmaktadır.

zaman listesi- slayt değiştirme hızı

Zaman Görünümü- gösteri zamanı

RadyoAma- hızlı gezinme için slaytın altındaki düğmeler. Varsayılan true'dur, false kullanırsanız düğmeler kaybolur.

Şimdi başlayalım! Bir dosya oluşturalım ve açalım index.htm

Sunulan kodda, gördüğümüz gibi, karmaşık bir şey yok, kaydırıcı-sarma tanımlar genel konum ve kaydırıcıyı ekranın ortasına hizalar. Parametre aktif slayt resmin boyunu ve yüksekliğini uzunluğuna göre ayarlar. VE kaydırıcı sadece aktif resmi gösterir.

Şimdi dosyayı oluşturalım ve açalım stil.css ve ihtiyacımız olan işaretlemeyi oraya ekleyin:

@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); gövde (renk: # 4f4f5a; yazı tipi ailesi: "Roboto", sans-serif; yazı tipi boyutu: 16 piksel; dolgu: 0; kenar boşluğu: 0;) # kaydırıcı sarma (maks. genişlik: 800 piksel; kenar boşluğu: 0 otomatik; üst kenar boşluğu: 80px;) # etkin slayt (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;) #slider (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: içeri girme kolaylığı; -o-geçiş-zamanlama-işlevi: girme kolaylığı -out; geçiş-zamanlama-fonksiyonu: kolay-in-out;) .slide (genişlik: calc (%100 / 4); liste stili: yok; görüntüleme: satır içi; kayan nokta: sol;) .slide img (genişlik: %100;) .Radio-But (kenar boşluğu: 10 piksel; metin hizalama: merkez;) .Radio-But .ctrl-select (kenar boşluğu: 2 piksel; görüntü: satır içi blok; genişlik: 16 piksel; yükseklik: 16 piksel; taşma : gizli; metin girintisi: -9999 piksel; arka plan: url (radioBg.p ng) merkez alt tekrarsız; ) .Radio-But .ctrl-select: fareyle üzerine gelin (imleç: işaretçi; arka plan konumu: merkez merkez;) .Radio-But .ctrl-select.active (arka plan konumu: orta üst;) #prewbutton, #nextbutton (ekran : blok; genişlik: 40 piksel; yükseklik: %100; konum: mutlak; üst: 0; taşma: gizli; metin girintisi: -999 piksel; arka plan: url ("arrowBg.png") tekrarsız sol merkez; opaklık: 0,5 ; z-index: 3; anahat: yok! önemli;) #prewbutton (sol: 10px;) #nextbutton (sağ: 10px; arka plan: url (arrowBg.png) sağ merkez tekrarsız;) #prewbutton: vurgulu, # sonraki düğme: üzerine gelin (opaklık: 1;)

stil özelliğinde kaydırıcı-sarma yazmak Genişlikmaksimum uzunluk senin fotoğrafların.

stil özelliğinde #slider (genişlik: hesapla (%100 * 4);) ve .slide (genişlik: hesapla (%100 / 4);) kaydırıcınızdaki resim sayısını belirtin. Örneğimizde 4 tane var.

İleri / geri okları kaydırıcınızın görünürlüğünü engelliyorsa, onları görünmez yapabilirsiniz ve fareyle üzerine gelindiğinde görünürler. Bunu yapmak için, parametrelerde önAma ve sonrakiAma, opaklık özelliğini 0 olarak ayarlayın.

Şimdi dosyamızı oluşturalım ve açalım kaydırıcı.js kaydırıcı kodunu içerecektir. jQuery kitaplığını eklemeyi unutmayın.

$ (belge) .ready (işlev () (var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $ ("# slider .slide"). uzunluk; var animSlide = function (ok) (clearTimeout (slideTime); if (ok == "next") (if (slideNum == slideCount) (slideNum = 1;) else (slideNum ++) translateWidth = - $ ("# active-slide" ") .width () * (slideNum - 1); $ ("# kaydırıcı").css (("transform": "translate (" + translateWidth + "px, 0)"));) else if (ok = = " prew ") (if (slideNum == 1) (slideNum = slideCount;) else (slideNum- = 1) translateWidth = - $ (" # aktif-slide "). genişlik () * (slideNum - 1); $ (" #slider "). css ((" transform ":" translate ("+ translateWidth +" px, 0) "));) else (slideNum = ok; translateWidth = - $ (" # active-slide "). genişlik ( ) * (slideNum -1); $ ("# kaydırıcı").css (("dönüştür": "çevir (" + translateWidth + "px, 0)"));) $ (". ctrl-select. aktif") .removeClass ("etkin"); $ (". ctrl-select"). eq (slideNum - 1) .addClass ("etkin");) if (RadioBut) (var $ linkArrow = $ ("<>") .prependTo (" # active-slide "); $ (" # nextbutton "). (fonksiyon () (animSlide (" next "); return false;)) $ (" # prewbutton ") tıklayın (işlev) () (animSlide ("prew"); false döndürmek;))) var adderSpan = ""; $ (". slide"). "+ dizin +""; }); $("

"+ adderSpan +"
") .appendTo (" # slider-wrap "); $ (". ctrl-select: first "). addClass (" active "); $ (". ctrl-select "). (fonksiyon () (var goToNum) tıklayın = parseFloat ($ (bu) .text ()); animSlide (goToNum + 1);)); var duraklama = yanlış; var döndürücü = işlev () (eğer (! duraklatma) (slideTime = setTimeout (işlev () (animSlide) ("sonraki")), TimeView);)) $ ("# kaydırıcı sarma"). vurgulu (işlev () (clearTimeout (slideTime); duraklatma = doğru;), işlev () (duraklatma = yanlış; döndürücü () ;)); var tıklama = false; var prevX; $ (". slayt"). mousedown (işlev (e) (tıklama = true; prevX = e.clientX;)); $ (". slayt"). function () (tıklama = yanlış;)); $ (belge) .mouseup (işlev () (tıklama = yanlış;)); $ (". slayt").mousemove (işlev (e) (if (tıklama == doğru) ) (eğer (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) (animSlide ("prew"); clearTimeout (slideTime);) tıklama = false; ))); $ (". slayt").hover().css ("imleç", "işaretçi"); döndürücü (); ));

İşlev animasyonSlideüç tür değer alır: next, prew, numeric value. Sonraki parametre bir sonraki slaydı değiştirir, prew bir öncekini döndürür ve sayısal değer kesinlikle slaydın altındaki radyo düğmeleri aracılığıyla seçilen belirtilen slayttır.

Sunulan kaydırıcıda https://pixabay.com/ web kaynağındaki resimler kullanılmıştır.

Sitenize yüksek kaliteli bir jQuery resim kaydırıcısı eklemeniz gerekiyorsa, bu makalede gerekli eklentilerin bir açıklamasını bulacaksınız. jQuery, JavaScript ile çalışmayı çok daha kolay hale getirmiş olsa da, web tasarım sürecini hızlandırmak için hala eklentilere ihtiyacımız var.

Bu eklentilerin bazılarında değişiklikler yapabilir ve sitemizin amaçlarına çok daha uygun yeni kaydırıcılar oluşturabiliriz.

Diğer kaydırıcılar için başlıklar, resimler eklemeniz ve kaydırıcıyla birlikte gelen slayt geçiş efektlerini seçmeniz yeterlidir. Tüm bu eklentiler eşlik ediyor ayrıntılı belgeler bu nedenle onlara yeni efektler veya işlevler eklemek kolaydır. Deneyimli bir jQuery programcısıysanız, olay tabanlı tetikleyicileri bile değiştirebilirsiniz.

gibi son trendler uyarlanabilir tasarım ister bir eklenti ister bir komut dosyası uyguluyor olun, web projeleri için çok önemlidir. Tüm bu öğeler, bu eklentilerin her birini çok esnek hale getirir. 2014 yılında çıkan her şey bu listede yer alıyor.

JQuery Görüntü Kaydırıcıları

Jssor Duyarlı Kaydırıcı

Geçenlerde bu işlevsel jQuery kaydırıcısına rastladım ve işini çok iyi yaptığını ilk elden görebildim. Açık kaynak kaydırıcı koduyla genişletilebilecek sonsuz olasılıklar içerir:

  • Uyarlanabilir tasarım;
  • 15'ten fazla özelleştirme seçeneği;
  • 15'ten fazla görüntü değiştirme efekti;
  • Resim galerisi, atlıkarınca, tam ekran boyutu desteği;
  • Dikey afiş döndürücü, slayt listesi;
  • Video desteği.

Demo | İndirmek

PgwSlider, JQuery / Zepto'ya dayalı duyarlı bir kaydırıcıdır

Bu eklentinin tek amacı resimlerin slayt gösterilerini göstermektir. JQuery dosyalarının boyutu yalnızca 2,5 KB olduğundan çok küçüktür ve bu da yüklemeyi gerçekten hızlı hale getirir:

  • Duyarlı düzen;
  • SEO optimizasyonu;
  • Farklı tarayıcılar tarafından desteklenir;
  • Basit görüntü geçişleri;
  • Arşiv boyutu yalnızca 2,5 KB'dir.

Demo | İndirmek

Jquery Dikey Haber Kaydırıcısı

Haber kaynakları için tasarlanmış esnek ve kullanışlı bir jQuery kaydırıcısı, sol tarafta bir gönderi listesi ve sağ tarafta bir resim:

  • Uyarlanabilir tasarım;
  • Haber değiştirmek için dikey sütun;
  • Genişletilmiş başlıklar

Demo | İndirmek

Valop kaydırıcı

Bu kaydırıcı JQuery içermiyor, ancak çok kompakt olduğu ve sayfa yükleme sürelerini önemli ölçüde azaltabileceği için tanıtmak istiyorum. Beğenirsen bana haber ver:

  • Duyarlı düzen;
  • Basit tasarım;
  • Slaytları değiştirmek için çeşitli seçenekler;
  • Minimum JavaScript kodu;
  • Boyut sadece 3KB'dir.

Demo | İndirmek

Düz stil Polaroid galerisi

Esnek bir düzen ile masaya dağılmış belgeler tarzında bir galeri ve Güzel tasarım birçoğunuzu ilgilendirmeli. Tabletler ve büyük ekranlar için daha uygun:

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

Demo | İndirmek

A-kaydırıcı

Demo | İndirmek

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

HiSlider, harika geçişlere sahip çeşitli resim galerileri oluşturabileceğiniz yeni bir ücretsiz jQuery kaydırıcı eklentisini tanıttı:

  • Duyarlı kaydırıcı;
  • Programlama bilgisi gerekmez;
  • Birkaç harika şablon ve görünüm;
  • Güzel geçiş efektleri;
  • Farklı platformlar için destek;
  • WordPress, Joomla, Drupal ile uyumlu;
  • İçerik görüntüleme özelliği farklı şekiller: resimler, YouTube videoları ve Vimeo videoları;
  • Esnek özelleştirme;
  • Faydalı ek işlevler;
  • Sınırsız içerik görüntülendi.

Demo | İndir

Vay kaydırıcı

WOW Kaydırıcısı duyarlı jQuery- şaşırtıcı ile görüntü kaydırıcı görsel efektler (domino taşı, çevir, bulanıklaştır, çevir ve parla, dışarı uç, panjur) ve profesyonel şablonlar.

WOW Slider, kodu gözden geçirmek veya görüntüleri düzenlemek zorunda kalmadan saniyeler içinde harika kaydırıcılar oluşturmanıza olanak tanıyan bir kurulum sihirbazıyla birlikte gelir. Ayrıca Joomla ve WordPress eklentisinin sürümleri de indirilebilir:

  • Tamamen duyarlı
  • Tüm tarayıcılar ve her tür cihaz için destek;
  • Dokunmatik cihazlar için destek;
  • WordPress'te kolay kurulum;
  • Özelleştirmede esneklik;
  • SEO için optimize edilmiş.

Demo | İndir

Nivo Slider ücretsiz bir jQuery eklentisidir

Nivo Slider, tüm dünyada en güzel ve kullanımı kolay görüntü kaydırıcı olarak bilinir. Nivo Slider eklentisi ücretsizdir ve MIT lisansı altında yayınlanmıştır:

  • JQuery 1.7 veya üzeri gerektirir;
  • Güzel geçiş efektleri;
  • Özelleştirmek için basit ve esnek;
  • Kompakt ve uyarlanabilir;
  • Açık kaynak;
  • Güçlü ve basit;
  • Birkaç farklı şablon;
  • Otomatik görüntü kırpma.

Demo | İndir

Teknik belgelere sahip basit jQuery kaydırıcısı

Fikir, birkaç küçük öğenin çeşitli animasyon efektleriyle uçabileceği Apple'ın kaydırıcılarından ilham aldı. Geliştiriciler bu konsepti dikkate alarak uygulamaya çalıştılar. minimum Gereksinimler yaratmak için basit tasarım"uçan" öğelerin farklı kategorileri temsil ettiği bir çevrimiçi mağaza:

  • Duyarlı düzen;
  • Minimalist tasarım;
  • Düşme ve slayt değiştirmenin çeşitli etkileri.

Demo | İndir

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

Sayfa genişliğinin %100'ünü kaplayan ve mobil cihazların ekranlarının boyutuna göre ayarlanan çok basit bir kaydırıcı. CSS geçişleriyle çalışır ve görüntüler bağlantılarla "istiflenir". Görüntüye bir bağlantı bağlamak istemiyorsanız, bağlantı değiştirilebilir veya kaldırılabilir.

Kurulduğunda, kaydırıcı ekran genişliğinin %100'üne kadar genişler. Ayrıca slayt görüntülerinin boyutunu otomatik olarak küçültebilir:

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

Demo | İndir

Elastik İçerik Kaydırıcısı + öğretici

Elastik İçerik Kaydırıcısı, ana öğenin boyutlarına göre genişliği ve yüksekliği otomatik olarak ayarlar. Bu basit bir jQuery kaydırıcısıdır. Üstte bir slayt alanı ve altta bir gezinme sekmesi çubuğundan oluşur. Kaydırıcı, genişliğini ve yüksekliğini ana kabın boyutlarına uyacak şekilde ayarlar.

Çapraz olarak küçük ekranlarda görüntülendiğinde, gezinme sekmeleri küçük simgelere dönüşür:

  • Uyarlanabilir tasarım;
  • Fare tıklamasıyla kaydırma.

Demo | İndir

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

3D görüntüler arasında geçiş yapan deneysel bir kaydırıcı. İki yığın kağıt yığınına benzer; bunlar arasında gezinirken resimler kaydırıcının ortasında görüntülenir:

  • Uyarlanabilir tasarım;
  • Flip-geçiş;
  • 3D efektler.

Demo | İndir

JQuery ve CSS3 + öğreticisi tarafından desteklenen Tam Ekran Yarık Kaydırıcısı

Bu öğretici, bir bükülme ile nasıl kaydırıcı oluşturulacağını gösterecektir: fikir, bir sonraki veya önceki görüntüyü açarken geçerli slaydı kesmek ve görüntülemektir. jQuery ve CSS animasyonunu kullanarak benzersiz geçiş efektleri oluşturabiliriz:

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

Demo | İndir

Unislider çok küçük bir jQuery kaydırıcısıdır

Gereksiz çan, ıslık ve işaretleme yok, boyut 3KB'den az. Slaytlarınız için herhangi bir HTML kullanın, genişletin CSS kullanarak... Unslider ile ilgili her şey GitHub'da barındırılıyor:

  • Çeşitli tarayıcılar için destek;
  • Klavye desteği;
  • Yükseklik ayarı;
  • Uyarlanabilir tasarım;
  • Dokunmatik giriş desteği.

Demo | İndirmek

Minimal Duyarlı Slaytlar

Basit ve kompakt eklenti ( boyut sadece 1 Kb'dir) oluşturan duyarlı kaydırıcı kap içindeki öğeleri kullanarak. ResponsiveSLides.js ile çalışır büyük miktar IE6 ve sonraki tüm IE sürümleri dahil olmak üzere tarayıcılar:

  • Tamamen duyarlı
  • Boyut 1KB;
  • JavaScript ile çalıştırma özelliği ile CSS3 geçişleri;
  • Madde işaretli bir liste kullanarak basit işaretleme;
  • Geçiş efektlerini ve bir slayt görüntüleme süresini özelleştirme yeteneği;
  • Birden çok slayt gösterisi oluşturma özelliğini destekler;
  • Otomatik ve manuel kaydırma.

Demo | İndir

Kamera - ücretsiz jQuery kaydırıcısı

Kamera, birçok geçiş efektine, duyarlı düzene sahip bir eklentidir. Kurulumu kolay, mobil cihazlar tarafından destekleniyor:

  • Tamamen duyarlı tasarım
  • İmzalar;
  • Video ekleme yeteneği;
  • 33 farklı renk simgesi.

Demo | İndir

SlidesJS, duyarlı bir jQuery eklentisi

SlidesJS, dokunma ve CSS3 geçişlerini destekleyen duyarlı bir jQuery eklentisidir (1.7.1 ve üstü). Bununla denemeler yapın, projenize SlidesJS'yi nasıl ekleyeceğinizi anlamanıza yardımcı olacak bazı hazır örnekleri deneyin:

  • Uyarlanabilir tasarım;
  • CSS3 geçişleri;
  • Dokunmatik cihazlar için destek;
  • Kurulumu kolay.

Demo | İndirmek

BX Jquery Kaydırıcısı

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

  • Tamamen duyarlı - her cihaza uyum sağlar;
  • Yatay, dikey slayt değişimi;
  • Slaytlar resimler, videolar veya HTML içeriği içerebilir;
  • Dokunmatik cihazlar için genişletilmiş destek;
  • Slayt Animasyonları için CSS Geçişlerini Kullanma ( donanım ivmesi);
  • Geri arama API'si ve tamamen genel yöntemler;
  • Küçük dosya boyutu;
  • Uygulaması kolay.

Demo | İndir

FlexSlider 2

En iyi duyarlı kaydırıcı. Yeni bir versiyon işin hızını, kompaktlığını artırmak için değiştirildi.

Demo | İndirmek

Galleria - JavaScript tabanlı duyarlı fotoğraf galerisi

Galleria, yüksek kaliteli resim galerileri oluşturmak için milyonlarca site tarafından kullanılmaktadır. Çalışmalarıyla ilgili olumlu eleştirilerin sayısı basitçe listelerin dışında:

  • Tamamen bedava;
  • Tam ekran görünümü;
  • %100 duyarlı;
  • Programlama deneyimi gerekmez;
  • iPhone, iPad ve diğer dokunmatik cihazlar için destek;
  • Flickr, Vimeo, YouTube ve daha fazlası;
  • Birkaç konu.

Demo | İndirmek

Blueberry, basit, duyarlı bir jQuery resim kaydırıcısıdır

Duyarlı web tasarımı için özel olarak yazılmış bir jQuery görüntü kaydırıcısı ile tanışın. Blueberry, duyarlı şablonlarla çalışmak üzere özel olarak yazılmış deneysel bir açık kaynaklı görüntü kaydırıcı eklentisidir.

4 Kasım 2019 giriş güncellendi

Yuri Nemets

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

CSS kaydırıcılarının Javascript kaydırıcılarına göre bazı avantajları vardır. Böyle bir avantaj indirme hızıdır. Sadece kaydırıcı resimler kullanılmaz büyük boy(farklı ekranlar için optimizasyon yoksa), komut dosyalarının yüklenmesi de biraz zaman alır. Ancak makalede yalnızca saf CSS kaydırıcıları göreceksiniz.

Kaydırıcılar hakkında sitede bulduğum şey:

1.Css3 görüntü kaydırıcısı

Slaytlar arasında gezinmek için radyo düğmelerini kullanan bir CSS kaydırıcısı. Bu radyo düğmeleri, kaydırıcıların altında bulunur. Ayrıca radyo düğmelerine ek olarak, sol ve sağdaki oklar kullanılarak navigasyon gerçekleştirilir. Şu anda hangi görüntünün görüntülendiğini takip etmek için: kontrol edilen sözde sınıflar kullanılır.

2. CSS3 küçük resim kaydırıcısı

Önceki CSS kaydırıcısından farklı olarak, burada radyo düğmeleri yerine, altta tüm resimlerin küçük resimleri bulunur, bu da bir resim galerisi oluştururken kullanışlıdır. Görüntüler tuhaf bir etkiyle değişiyor: Büyütüldüklerinde düzgün bir şekilde kayboluyorlar.

3. CSS galerisi

Ancak bu CSS kaydırıcısı satış sayfaları için mükemmeldir. Kural olarak, birçok web geliştiricisi, açılış sayfaları geliştirirken (sayfa satarken), en başta bir kaydırıcı yerleştirir, böylece ilk ekranda (kaydırmadan) ziyaretçi bu sayfanın kendisi için sahip olduğu tüm avantajları hemen görebilir. Her şeyden önce, bu kaydırıcı duyarlı ve bu da harika.

4. Bağlantısız CSS kaydırıcısı

Sadece bu kaydırıcının bağlantıları kullanmadığını belirtmek isterim! Varsayılan olarak, ana görüntünün (slayt) yanı sıra 2 slayt daha görünür. Ana olanın arkasında bulunurlar. Slaytların değiştirilmesi güzel bir modda gerçekleşir: önce iki slayt birbirinden ayrılır ve bu slayt merkezde olur ve daha sonra asıl olan olur. Slayt daha sonra büyütülür ve diğerlerinin önüne yerleştirilir.

5. CSS3'te duyarlı kaydırıcı

Radyo düğmesi kontrollerine sahip başka bir duyarlı kaydırıcı. Bu kaydırıcının nasıl görüneceğini görmek için farklı cihazlar ah - tarayıcı penceresini kendiniz değiştirebilir veya kaydırıcının bulunduğu sayfada, kaydırıcının bilgisayarınızda, tabletinizde veya akıllı telefonunuzda görüneceğini göreceğiniz farklı cihazlar için özel simgeler vardır.

*** BONUS KAYDIRICI ***

Yukarıda sunulan tüm kaydırıcılara ek olarak, sizi bir tane daha memnun etmek istiyorum. Bu kaydırıcı, bir resim galerisi oluşturmak için mükemmeldir. Kelimeler ne yaptığını açıklayamaz, bu yüzden videodaki her şeyi izlesen iyi olur:

Çıktı

Kaydırıcıların yardımıyla, resim galerilerini güzel bir şekilde tasarlayabilir, onları daha kompakt bir şekilde yerleştirebilir, satış sayfasının ilk ekranına (sayfanın kaydırmadan görünen kısmı) bir kaydırıcı ekleyerek ziyaretçiye ana avantajları hemen gösterebilirsiniz. o alacak. Kaydırıcıları nerede ve nasıl kullanabileceğinizin birçok yolunu hala bulabilirsiniz, ancak bir şey açıktır - doğru kullanıldığında faydalıdırlar.

Makalede tartışılan öğeler.

Herkese merhaba. Çok güzel bir kaydırıcıyı dikkatinize sunmak istiyorum. Oooh ... beni tamamen unuttuğunu görüyorum. Evet, evet, muhtemelen altı ay ya da bir yıllığına ortadan kayboldum ve kendimi her gün bir makale göndermeye nasıl zorlayacağımı hiç bilmiyorum (bu tamamen gerçek olsa da). Pekala, tamam, şimdi bahsettiğimiz şey bu değil. Kaydırıcı Tympanus Codrops tarafından sağlanır ve HTML5, CSS3 ve TweenMax.js'de çalışır.

Kaydırıcı soldan sağa ve yukarıdan aşağıya değil, çapraz olarak dönmez. Gezinme okları sol üst köşede ve sağ alt köşede bulunur. Ayrıca sağ ve soldaki küçük resme tıklanarak gezinme gerçekleştirilir. Tüm animasyonlar çok düzgün ve hepsinde düzgün çalışıyor modern tarayıcılar... Her biri ayrı eleman kaydırıcının, önizlemeye tıkladığınızda açılan kendi sayfası vardır. Sayfada bir fotoğraf, başlık ve metin var.

Kaydırıcı, bir galeri, bir sanatçının portföyü, bir fotoğrafçı, heykeltıraş, kısacası yaratıcı faaliyetlerde bulunan ve sitede göstermek istediği işleri olan herhangi bir kişi için mükemmeldir. Müzenin veya serginin bulunduğu yerdeki galeri iyi görünecek.

Galeri bağlantısı

Galeriye bağlanmak zor olmayacak

Dosyaları indirme

Başlamak için, doğrudan bir bağlantı kullanarak kaynakları sitemden indirmeniz yeterlidir. Arşivden img, css ve js klasörlerini sitenin kök dizinine yüklemeniz gerekiyor.

css ve js dosyalarını dahil ediyoruz

Sonra komut dosyalarını ve stilleri ekliyoruz. Stiller etikete eklenerek bağlanır aşağıdaki kod

ve sayfadan kapanış etiketine kadar komut dosyaları

Siteye kaydırıcı ekleme

Öncelikle sitenin en üstüne navigasyon ekleyelim.

ve sonra kaydırıcının kendisi

Anılar ve Düşünceler
1

Otomasyon

rastgele dolaşım
2

makineler

Keyfi Kelimeler
3

birlikte yaşama

Tek rehber kalbin

perili sürüklenme
4

belamio

eğlenceli ayrılık
5

Meralar

Umutlar ve Hayaller
6

Odak

1

Otomasyon

Onu boyayacaksan, bir ağacın arkadaşın olması gerekir.

Bunun olmasına izin ver. Sadece bu akışın aklımızdan çıkmasına izin veriyoruz. Sadece rahatlayın ve akışına bırakın. Bu kadar kolay. Hadi dünyamıza küçük mutlu bulutlar koyalım. Çok soğuk bir tablo, gidip paltomu almam gerekebilir. Beni donarak öldürmek üzere. Bu küçük, mutlu bir deniz manzarası olacak. Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey bile çok şey yapabilir. Her seferinde bir şey üzerinde çalışın. Kendinizi kaptırmayın - bolca zamanımız var. İçine duygularını koy, kalbini, bu senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum.
2

makineler

Bu muhtemelen hayatımda başıma gelen en büyük şey

Size "kopyalanacak bir şey öğretmeye çalışmıyoruz. Biz" sadece size bir teknik öğretmek için buradayız, sonra sizi dünyaya salıveriyoruz. Şimdi bu bulutu kabartacağız. Burada mutlu ağaçlardan başka bir şeyimiz yok. Bir daha yapalım. Gördüğünüzü kullanın, planlamayın. Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey bile çok şey yapabilir. Her seferinde bir şey üzerinde çalışın. Kendinizi kaptırmayın - bolca zamanımız var. İçine duygularını koy, kalbini, bu senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum.
3

birlikte yaşama

Tek rehber kalbin

Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey bile çok şey yapabilir. Her seferinde bir şey üzerinde çalışın. Kendinizi kaptırmayın - bolca zamanımız var. İçine duygularını, kalbini koy, bu senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum. Ama henüz orada değiliz, bu yüzden ihtiyacımız yok. Endişelenme. Şimdi buraya küçük mutlu bulutlar koyalım. Ne şeytan. İnce bir boya kalın bir boyaya yapışacaktır. Biraz renk karıştıracağım.
4

belamio

Tek ön koşul seni mutlu etmesi

Görmek. Fırçanın köşesini alıyoruz ve ileri geri oynamasına izin veriyoruz. Bu plansız bir şey, gerçekten öyle oluyor. Ben "yumuşak biriyim", Bambi'yi kamera dışında çekemedim. Sanırım "biraz tuhafım. Ağaçlarla ve hayvanlarla konuşmayı seviyorum. Sorun değil; Çoğu insandan daha çok eğleniyorum. Bugün bulutlarla oynayacağız. Bu kadar gücün olduğunu bilmiyor muydun? Dağları hareket ettirebilirsin. Herşeyi yapabilirsin. Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey bile çok şey yapabilir. Her seferinde bir şey üzerinde çalışın. Kendinizi kaptırmayın - bolca zamanımız var. İçine duygularını koy, kalbini, bu senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum.
5

Meralar

Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım

Sıklıkla akan sudan kaçınırız ve akan su çok eğlencelidir. Herkes olayları farklı görecek - ve olması gereken de bu. Büyük, güçlü bir ağacın büyük, güçlü köklere ihtiyacı var. Steve yansımalar istiyor, o yüzden ona yansımalar verelim. Bağlı olmak zorunda değiliz. Sadece burada oynuyoruz. Bulutlarda yaşayan tüm o küçük tüyleri yapıyoruz. Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey çok şey yapabilir. Bir seferde bir şey üzerinde çalışın. Kendini kaptırma - bolca zamanımız var. Duygularını içine koy, kalbin, o senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum.
6

Odak

Bu plansız gerçekten oluyor

Ama henüz orada değiliz, bu yüzden endişelenmemize gerek yok. Şimdi buraya küçük mutlu bulutlar koyalım. Ne olur. İnce bir boya kalın bir boyaya yapışır. Biraz renk karıştıracağım. Van Dyke Brown, Permanent Red ve biraz da Prusya Mavisi kullanacağız. Hadi yukarı çıkalım ve biraz eğlenmeye başlayalım. En ufak bir şey bile çok şey yapabilir. Her seferinde bir şey üzerinde çalışın. Kendinizi kaptırmayın - bolca zamanımız var. İçine duygularını koy, kalbini, bu senin dünyan. Bu ağaçlar çok eğlenceli. Onlara başlıyorum ve durmakta zorlanıyorum.

Bu kadar. Kaydırıcı hazır! işte iyi şanslar

Bloguma tekrar hoş geldiniz. Bugün css'de yeni seçiciler sayesinde scriptler olmadan bir kaydırıcı oluşturmak mümkün. O halde bu yazımda size css3'te nasıl responsive slider yapacağınızı göstereceğim.

Ders planı

Bu yüzden bugün size komut dosyası olmadan kendi kaydırıcınızı nasıl oluşturacağınızı, herhangi bir cihaza nasıl uyarlayacağınızı ve gelecekte kolayca nasıl değiştireceğinizi ayrıntılı olarak göstereceğim. dış görünüş ve ayrıca yeni slaytlar ekleyin. Düğmelere tıkladığınızda manuel olarak değiştirilecek olan sadece 3 slayt yapacağız. Pekala, başlayalım!

kaydırıcı işaretleme

Her şeyden önce, işaretlemenin ne olacağını anlamanız gerekir. Bu ekran görüntüsünde işaretleme örneğimi görebilirsiniz ve bugün onunla çalışacağım.
Ayrıca tüm bunları kodla çoğaltacağım, böylece kendiniz kopyalayıp yapıştırabilirsiniz.
İlk adım, sürgülü anahtar düğmelerini oluşturmaktır. Üç slayt olacağı için aynı sayıda buton gereklidir:

Her biri kendi benzersiz tanımlayıcısını alır ve biri varsayılan olarak seçilir.

İhtiyacımız olan son kod parçası. Düğmeler için başlıklar görüntüler, ancak aslında bunları varsayılan olarak düğmeleri gizlemek için kullanırız (radyo düğmelerinin stili yoktur) ve bunun yerine stillendirilebilen bu başlık bloklarını koyarız. Radyo düğmeleri olarak hizmet edecek olan onlardır ve radyo düğmeleriyle bağlantı, için özel bir öznitelik aracılığıyla yapılır.

Ve şimdi tüm bu kodun ortak bir kapsayıcıya sarılması gerekiyor. Wrap sınıfı olan bir blok olsun.

Kaydırıcıya Başlarken - Sayfanın İlk Stilleri

Bu nedenle, başlangıç ​​olarak, tüm varsayılan kenar boşluklarını sıfırlamaya yardımcı olacak genel stiller belirleyeceğiz ve aynı zamanda öğelerin genişliğinde iç kenar boşluklarının ve sınırların dikkate alındığından emin olacağız. Bu şu şekilde yapılır:

* {
kenar boşluğu: 0;
dolgu: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-kutu boyutlandırma: kenarlık kutusu;
kutu boyutlandırma: kenarlık kutusu;
}

Bu arada, * - tüm seçicileri ifade eder. Yani, böyle evrensel ve küresel bir seçici.

Konteyneri yapıyoruz. Düğmeler, slaytlar ve imzalar olmak üzere 3 önemli parçamızın tümünü içeren bloğun kendisidir.

Dürüm (
yükseklik: 350 piksel;
kenar boşluğu: 0 otomatik;
pozisyon: göreceli;
genişlik: 600 piksel;
}

Genişliği ve yüksekliği ayarlayabilirsiniz HERHANGİ, slayt fotoğraflarınızın ne boyutta olacağına bağlı olarak. Fotoğrafları önceden 600 x 350 piksele kırptım, o yüzden bu boyutları belirledim. Marj: 0 auto, kapsayıcıyı tam olarak sayfanın ortasına hizalayacaktır ve göreli konumlandırma, daha sonra kapsayıcıdaki düğmeleri doğru şekilde konumlandırmanıza olanak tanır.

Kaydırıcıyı ve slaytları tasarlama

İlk olarak, bunlar stiller:

Kaydırıcı (
arka plan rengi: # 999;
yükseklik: miras;
taşma: gizli;
pozisyon: göreceli;
genişlik: miras;
}

Kaydırıcıya, paylaşılan kapla aynı genişlik ve yüksekliği verin. Ayrıca rengi ve konumlandırmayı da belirtiriz ve overflow: hidden özelliği bloğa düşmeyen her şeyi keser.

Bir sonraki adım, slaytları kendileri tasarlamaktır:

Slaytlar (
yükseklik: miras;
opaklık: 0;
pozisyon: mutlak;
genişlik: miras;
z-endeksi: 0;
}
.auto1 (arka plan resmi: url (bmw.jpg);)
.auto2 (arka plan resmi: url (audi.jpg);)
.auto3 (arka plan resmi: url (porshe.jpg);)

Ayrıca slayt için genişlik ve yüksekliği de belirtiyoruz. Devralma değeri, ana bloğun değerinin devralınmasına izin verir. Resimlerimizi görünmez yapmak için z-endeksi ve opaklık özelliklerini kullanacağız. Aşağıda arka plan resimlerini açıkça tanımlıyoruz.

Şimdiye kadar hiçbir şey görmeyeceğiz, sadece gri bir arka plan, çünkü resimlerimiz gizli.

Dekorasyon düğmeleri anahtarları

Şimdi standart radyo düğmelerini kaldırmamız ve bunun yerine altyazıları biçimlendirmemiz gerekiyor.

Sar> giriş (
görüntü yok;
}

Radyo düğmelerinin çıkarılması.

.control'ü kaydır (
pozisyon: mutlak;
sol kenar boşluğu: -50 piksel;
sol: %50;
}

Bu stiller ile düğme bloğunu ortalayacağız.

Etiketi sar (
imleç: işaretçi;
ekran: satır içi blok;
yükseklik: 25 piksel;
kenar boşluğu: 10 piksel;
pozisyon: göreceli;
genişlik: 25 piksel;
kenarlık: 2 piksel düz gri;
sınır yarıçapı: %30 / 10 piksel;
}

Bu stiller çok önemli bir iş yapıyor - düğmelere stil vermemize izin veriyorlar. Düğmelerin boyutunu ayarlamanız, onlar için blok çizgi türünü, girintileri ve gri bir kenarlığı ayarlamanız gerekir. Ayrıca köşelerin yuvarlanmasını da ekleyebilirsiniz.

Artık slaytların altında ortalanmış üç düğmemiz var, bunlar sadece gri çerçeveler. Diyelim ki butona tıkladığınızda içinde butonun aktif olduğunu gösteren bir resim çıkıyor. şu an... Bu arada, bu makalede aynı tekniği sadece onay kutularıyla gösteriyorum.

Sen ve ben arabaların resimlerini değiştirdiğimiz için, internette direksiyon simidi simgesini buldum, 20'ye 20'ye indirdim. Şimdi gözden kaçıyor - üzerine tıkladıysanız düğmeye bir arka plan resmi ekleyin.

# point1: kontrol edildi ~ .kontrol etiketi: nth-of-type (1),
# point2: kontrol edildi ~ .kontrol etiketi: türünün ilk örneği (2),
# point3: kontrol edildi ~ .kontrol etiketi: nth-of-type (3) (
arka plan: url (tekerlek.png) tekrarsız %50 %50;
}

Bu, bunun gibi seçiciler kullanılarak yapılır. Onlar ne yapıyor? Aslında, bu karmaşık bir seçicidir, tüm bir koşulu içerir. Biraz programlama gibi. Bunun anlamı şudur: radyo düğmesi seçiliyse, stili, işaretlemede daha ileri bir yere giden başlığa uygulamanız gerekir. Şimdi, düğmelere tıkladığınızda, içlerinde direksiyon simidinin bir görüntüsü beliriyor!

En önemli adım, anahtarın çalışmasını sağlamaktır!

Aslında, yapacak çok az şeyimiz var. Yani, kaydırıcıdaki gri alan yerine, başarılı bir şekilde çevrilecek olan arabalı görüntülerin göründüğünden emin olmak için. Bunu yapmak için biraz daha karmaşık seçiciler uygulamanız gerekir:

# point1: kontrol edildi ~ .slider> .auto1,
# point2: kontrol edildi ~ .slider> .auto2,
# point3: kontrol edildi ~ .slider> .auto3 (
opaklık: 1;
z-endeksi: 1;
}

Ne oluyor? Şimdi, kaydırıcıyı çalışırken denerseniz, tamamen işlevsel olacaktır. Bu seçicilerle şunları belirtiyoruz: radyo düğmesine basılırsa, html kodunda (radyo düğmelerinin ötesinde) bir yerde bulunan istenen slaydı görünür hale getirin.

Böylece, ilk düğmeye tıklandığında, ikinciye tıklandığında bir BMW arabası gösterilir - Audi, üçüncü tıklandığında - Porshe. Ve tüm bu süre boyunca, geçiş yaparken, slaydın aktif olduğu düğmede direksiyon simidi simgesi belirir.

Böylece bir kaydırıcı yaptık. Onu uyarlamak için kalır.

Kaydırıcıyı mobil cihazlarda görüntülemek için uyarlama

Şimdilik kaydırıcımızın sabit genişliği 600 pikseldir. Buna göre bu genişlikten daha küçük ekranlarda sorunlar çıkmaya başlayacaktır. Özellikle, olacak yatay şerit kaydırma. Bundan kaçınmak için, önceden yazılmış kodu biraz değiştirmemiz gerekiyor. İşte değiştirilmesi gerekenler:

  1. Sarma bloğu, yani ana kap için genişliği değil, maksimum genişliği ayarlayın: 600 piksel. Bu, pencere küçülürse kabın küçülmesini sağlar.
  2. Kaydırıcıya genişlik verilmelidir: %100;
  3. Slaytlar için hiçbir şeyi değiştirmiyoruz.

Toplamda, tüm değişiklikler bu kodda görülebilir:

Dürüm (
maksimum genişlik: 600 piksel;
}
.kaydırıcı (
genişlik: %100;
}

Harika, şimdi geriye, kaydırıcıyı tamamen duyarlı hale getirmek ve görüntüleri yeni ekranlara uyacak şekilde ölçeklendirmek için birkaç medya sorgusu yazmak kalıyor. Deneysel olarak, slayt resminin yaklaşık 600 piksel genişliğinde ekrana sığmamaya başladığını öğrendim. Bu, bu alanın çevresinde stillerde bir değişiklik yapmanız gerektiği anlamına gelir. Bunun için ilk medya sorgusunu yazalım.

Bu arada, bu makalede medya sorguları ve uygulamaları hakkında ayrıntılı olarak yazdım. Responsive tasarım hakkında hiçbir fikri olmayanların okumasını tavsiye ederim.

Buna göre, her şeyin 650 piksel veya daha az genişlikte iyi görüntülenebilmesi için şöyle bir stil değişikliği öneriyorum:

@medya ekranı ve (maksimum genişlik: 650 piksel) (
.dürüm (
maksimum genişlik: 480 piksel;
yükseklik: 280 piksel;
}
.slaytlar (
arka plan boyutu: kapak;
}
}

Kaydırıcının genişliği ve yüksekliği de azalacaktır. Slaytların kendileri için, görüntüleri orantılarını korurken kırpılmadan kaydırıcıya tam olarak sığacak şekilde ölçeklendiren bir özellik belirledik.

Harika, şimdi genişlik 650 pikselden az olduğunda kaydırıcının resmi kırpmadan dönüşeceğini ve iyi göründüğünü kontrol edebilir ve emin olabilirsiniz.

Son nokta yaklaşık 400 piksel genişliğindedir. Üzerinde yine resmimiz uymamaya başlıyor ve önlem almamız gerekiyor. Bunu yapmak için başka bir medya sorgusu yazacağım:

@medya ekranı ve (maksimum genişlik: 400 piksel) (
.dürüm (
maksimum genişlik: 320 piksel;
yükseklik: 180 piksel;
}
.slaytlar (
arka plan boyutu: kapak;
}
}

Her şey aynı, sadece kabın genişliğini ve yüksekliğini tekrar azaltıyoruz. Harika, şimdi kaydırıcımız tamamen duyarlı! hatta cep telefonu 320 piksel genişliği ile harika görünecek. Ancak, kendiniz görün:

Medya sorguları sayesinde görüntüler orantıları korunurken orantılı olarak küçültülür.

Kaydırıcıya geçiş efektleri ekleme

Bir bonus Bu makalede, blokların üzerinde gezinirken uygulanabilecek birkaç efekt görebilirsiniz. Bu nedenle, bunlardan herhangi birini seçin ve slaytlara (.slides) atayın ve görüntü göründüğünde efekti iptal edin. Sonucu görmek için, geçişlerin düzgün olması için slaytlara geçiş özelliğini ayarladığınızdan emin olmanız gerekir. Efekt örneği:

Slaytlar (
dönüştürmek: döndürmek (50 derece);
geçiş: 1s;
}

Şimdi, slaydı görünür yapan seçicinin dönüşümün iptalini kaydetmesi yeterlidir:

# point1: kontrol edildi ~ .slider> .auto1 (
dönüştürme: yok;
}

Ve bunu tüm slaytlar için yapın. Buna göre, başlangıçta görüntü döndürülecek ve görünmez olacak ve göründüğünde yumuşak bir dönüşün etkisi olacaktır. başlangıç ​​pozisyonu... Buna göre, kendi efektlerinizi oluşturabilirsiniz. Kaydırıcıyı yaptık, hepsi benim için. Herhangi bir sorunuz varsa, yorumlarda bekliyorum.

Ekleme - bir slayda tıkladığınızda bağlantının slayda bağlı olduğundan nasıl emin olunur?

Başka bir deyişle, artık sadece resimlerimiz var, ancak onları nasıl tıklanabilir hale getireceğiz. Bunu yapmak için, bu ders için hazır bir kaydırıcınız olmalıdır. Ardından, html kodunda slaytların kendisinden sorumlu olan bir parça bulmanız gerekir. İşte ekran görüntüsünde:

Gördüğünüz gibi, birinci ve ikinci slaytların içine bağlantılar ekledim. Yani ilk slayda tıkladığınızda Google'a, ikinciye tıkladığınızda Yandex'e gideceksiniz. Bağlantının aynı pencerede açılacağını, yani kaydırıcının bulunduğu mevcut sayfanın bu durumda kaybolacağını belirtmek isterim. Slaytlardaki bağlantıları yeni bir pencerede açmanız gerekiyorsa, her etikette eklemen gerek hedef özellik= "_boş".

Ama hepsi bu kadar değil! Artık resimlerin tıklanabilir olması için hiçbir şey çalışmıyor, bunu css'e eklemeniz gerekiyor:

Slaytlar bir (
Ekran bloğu;
genişlik: %100;
yükseklik: %100;
}

Yani, tüm slaytlar için bağlantıyı bir blok elemanı yaparız ve bunun için genişliği ve yüksekliği %100 olarak belirleriz, böylece resmin tüm alanını kaplar. Şimdi her şey işe yaramalı, kontrol edebilirsiniz. Sadece linklerdeki adresleri değiştirin ve kullanabilirsiniz. Umarım olabildiğince açık bir şekilde anlatabilmişimdir.

Bir an dikkatinizi çekerim: Hepimiz sitelerimizi güvenilir bir barındırmada barındırmak isteriz. Yüzlerce barındırmayı analiz ettim ve en iyisini buldum - HostIQ yüzlerce var olumlu geribildirim onun hakkında ortalama kullanıcı puanı 5 üzerinden 4.8. Siteleriniz hayırlı olsun.