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şlik – maksimum 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 +""; }); $("
İş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ı