Css3'te duyarlı bir kaydırıcı nasıl yapılır? İyi bir DIY jQuery kaydırıcısı yapmak. jQuery kaydırıcısı nasıl yapılır

Her ne kadar sevmesem de bazen front-end ile ilgili sorunları çözmek zorunda kalıyorum 🙂

Aslında benim tarafımdan geliştirilen bu sitenin tasarımı ile “güzel” ile bağlantılı her şeye karşı tutumumu değerlendirebilirsiniz 🙂

Ancak, nispeten yakın bir zamanda JavaScript'te bir kaydırıcı uygulama ihtiyacıyla karşı karşıya kaldım ve bu, herhangi bir hazır kitaplık olmadan ve hatta herkesin favori jQuery'si olmadan yapılmalıydı.

Bu ihtiyaç, sonucun siteye üçüncü taraf bir hizmet aracılığıyla bağlanacak bir JS betiği olması gerektiği gerçeğinden kaynaklandı. Sonuç olarak, JavaScript'teki hazır karuseller hemen ortadan kayboldu, çünkü bunları entegre etmek için sitenin HTML koduna script etiketi aracılığıyla bir kitaplık bağlantısı eklemek ve dosyaların kendilerini sunucuya kopyalamak veya cdn aracılığıyla çekmek gerekiyordu, ancak bu yine kaynak kodunun düzenlenmesini gerektirecekti.

JavaScript kaydırıcısı nasıl yapılır: Başlarken

Bugün sanırım kendini benzer bir durumda bulan herkes mevcut gelişmeleri arayarak başladı, tk. JS atlıkarınca yapma görevi işin bir parçası olduğunda, her zaman mümkün olduğunca çabuk yapılmalıdır. Ve bu koşullar altında, elbette, kimse oturmanıza ve kendi bisikletlerinizi icat etmenize izin vermez.

Müşteriler her zaman kodun nasıl yazıldığını, hangi mimariye sahip olduğunu umursamazlar, asıl mesele sonucu görmektir!

Sonunda, anladığınız gibi, JavaScript'te jQuery olmadan bir kaydırıcı yazmadan önce, hazır bir tane bulmaya ve ihtiyaçlarıma göre değiştirmeye karar verdim. Neden jQuery olmadan? Evet, çünkü kaydırıcımı hizmet üzerinden bağlamayı planladığım hedef kaynakta, koddaki jQuery çağrısı, hizmet tarafından bağlanan komut dosyasından daha sonra bulunuyordu. Bu nedenle, kodumdaki jQuery yapıları basitçe algılanmadı.

Bu JavaScript resim kaydırıcısını temel aldım - https://codepen.io/gabrieleromanato/pen/pIfoD.

üzerinde durmaya karar verdim, çünkü JS kodu, OOP ilkeleri kullanılarak yazılmıştır ve içindeki sınıflar, önemsiz işlevlere değil, prototiplere dayanmaktadır.

Dürüst olmak gerekirse, JavaScript'in OOP, çerçeveler ve diğer mimari şeylerin, başlangıçta dinamik komut dosyası oluşturma için basit bir dil olarak tasarlanmış bir dilde kullanılmasıyla ilgili mevcut yutturmacayı derinden anlamıyorum ve tanımıyorum. JS'nin yanı sıra, aynı yapıların çeşitli şekillerde yazılmasına izin veren sözdizimsel salata sosundan açıkçası hoşlanmıyorum.

Ama ne yazık ki modern dünyada benim konumlarımı paylaşan çok az insan var, çünkü dil çılgın bir hızla gelişiyor ve hatta Java, PHP, C#, Ruby ve diğer canavarlara alternatif olarak Node.js kullanan arka uç geliştiricilerin zihinlerini fethetmeye çalışıyor.

Sonuç olarak, işten banal olmamak için JavaScript ile sessizce ilgilenmeniz gerekir. Ve seçtiğim kaydırıcının salt JavaScript uygulamasında, anladığınız üzere bu dilde küçümsediğim bir şeyle karşılaştım. Bu nedenle, JavaScript OOP ve prototip sınıfları üzerinde çalışmak ve anlamak için en azından bir neden olması için seçtim - aksi takdirde hayatımda onlara asla gönüllü olarak dokunmazdım 🙂

Bulduğum koda dayanarak, bir açılır pencerede saf JS'de bir kaydırıcı geliştirmem gerekiyordu (bu şeye açılır pencere, açılır pencere vb. de denir), slaytları değiştirmek için düğmeleri ve tıklanabilir göstergeleri olurdu. geçerli slayt. Bu pencereyi kapatmak için de bir buton yapmak gerekiyordu.

İşte bitirdim.

Slider JS kütüphanesi yapmak

İlk başta, her şeyi akıllıca uygulamaya karar verdim ve site için tek bir komut dosyası ile siteye bağlanabilen, alt dizinlere bölünmüş kaydırıcı bileşenlerinin çağrılacağı bir kitaplık şeklinde site için bir JavaScript kaydırıcısı yapmaya karar verdim. onu aramaya karar verdim popupSlider.js asıl amacının şerefine.

Kodu GitHub'da şu adreste bulunabilir - https://github.com/Pashaster12/popupSlider.js

Kütüphane yapısı şu şekilde ortaya çıktı:

Dosya slaytlar slayt resimleri için tasarlanmıştır. V kontroller JS carousel kontrollerinin resimleri (kaydırıcıyı kapatma ve slaytları değiştirme düğmeleri). Ve varlıklar- statik JS kaydırıcı öğeleri: HTML işaretlemesi ve CSS stillerine sahip bir dosya.

PopupSlider.js dosyası, JavaScript carousel eylemlerinin yazıldığı ve dosyaların geri kalanına bağlantıların oluşturulduğu kitaplığın kalbidir. Siteye bağlanacağımız kişi o ve gerisini zaten arayacak.

Benim durumumda şöyle görünen resim carousel JS'nin HTML işaretlemesiyle başlamaya karar verdim:

Kaydırıcıyı JavaScript'te açılır pencere olarak tasarlamak için aşağıdaki stilleri kullandım:

#slider (kenar boşluğu: otomatik; genişlik: 600 piksel! önemli; taşma: gizli;) # kaydırıcı-sarmalayıcı (genişlik: 9999 piksel; yükseklik: 343 piksel; konum: göreceli; geçiş: sol 400ms doğrusal;) .slide (kayan: sol; genişlik : 600 piksel; konum: göreli; taşma: gizli;) .caption (genişlik: 600 piksel; yükseklik: 110 piksel; satır yüksekliği: 1,5; yazı tipi boyutu: 15 piksel; yazı tipi ağırlığı: 300; metin hizalama: merkez; renk: # 000; display: table;) .caption-container (ekran: tablo hücresi; dikey hizalama: orta; dolgu: 0 20 piksel;) # kaydırma çubuğu (konum: mutlak; alt: -36 piksel; metin hizalama: merkez; sol: %50; transform: translateX (-50%);) # kaydırıcı-gezinme a (genişlik: 8 piksel; yükseklik: 8 piksel; metin dekorasyonu: yok; renk: # 000; görüntü: satır içi blok; sınır yarıçapı: %50; kenar boşluğu: 0 5 piksel; arka plan rengi: #fafafa;) # kaydırıcı gezinme a.akım (arka plan rengi: # 337ab7;) .yatay denetimler (konum: mutlak; görüntü: satır içi blok; genişlik: 12 piksel ; yükseklik: 20 piksel; üst: %50; kenar boşluğu: -10 piksel;) #önceki (arka plan: url (../ devamı) roller / arrow_left_inactive.png); sol: -40 piksel; ) #prev: üzerine gelin (arka plan: url (../ kontroller / ok_left_active.png);) #sonraki (arka plan: url (../ kontroller / arrow_right_inactive.png); sağ: -40 piksel;) #sonraki: üzerine gelin (arka plan : url (../ kontroller / arrow_right_active.png);) # cq-popup (genişlik: 600 piksel; z-endeksi: 23; sol: hesap (%50); üst: hesap (%50); konum: sabit! önemli ; arka plan tekrarı: tekrar yok; arka plan konumu: sağ; arka plan rengi: #fff; yazı tipi ailesi: "Roboto", "Segoe UI", "Helvetica", "Gürcistan", "Calibri", "Verdana" ; transform: translate (-50%, -50%) scale (1);) # cq-popup .header (ekran: satır içi blok; yazı tipi boyutu: 17 piksel; yazı tipi ağırlığı: 500;) # cq-popup> div (genişlik: 500 piksel; yazı tipi boyutu: 22 piksel; satır yüksekliği: 36 piksel;) # cq-popup-btclose (metin dekorasyonu: yok; konum: mutlak; sağ: -40 piksel; üst: 0; arka plan: url (. ./controls/btn_delete_inactive.png); yükseklik: 16 piksel; genişlik: 16 piksel;) # cq-popup-btclose: vurgulu (arka plan: url (../ kontroller / btn_delete_active.png);) # cq-popup-bg (konum : sabit; üst: 0; genişlik: %100 ; yükseklik: %100; arka plan: rgba (51,51,51,0.8); z-endeksi: 22; )

Bu JS stillerini uygulamanın bir sonucu olarak atlıkarınca şöyle görünür:

Hem HTML işaretlemesini hem de CSS stillerini, JavaScript kaydırıcı kitaplığının varlıklar dizininde bulunan ayrı popupSlider.html ve popupSlider.css dosyalarına taşıdım. Bunu bilerek yaptım, böylece kullanıcılar bu kodu kullanırken, işlenenin doğrudan yazılması gereken JS koduna girmeden işaretlemeyi ve tasarımı kolayca düzeltebilirler.

Ek olarak, birçok kişi web sitesi yüklemesini hızlandırmak için hala JS'yi küçültmeyi seviyor. Dolayısıyla, bu koşullar altında bu çözümü özelleştirmek çok zor olurdu.

Sonuç olarak, sorun bildirimim için aşağıdaki formu alan popupSlider.js ana kitaplık dosyasına hazır dosyaları eklemeye karar verdim:

İşlev Kaydırıcısı (öğe) (this.loadStatic (); this.el = document.querySelector (öğe); this.init ();) Kaydırıcı.prototip = (init: işlev () (this.links = this.el.querySelectorAll ("# slider-nav a"); this.wrapper = this.el.querySelector ("# slider-wrapper"); this.nextBtn = this.el.querySelector ("# sonraki"); this.prevBtn = bu. el.querySelector ("# önceki"); this.navigate ();), gezinme: function () (var self = this; for (var i = 0; i)< this.links.length; ++i) { var link = this.links[i]; link.addEventListener("click", function (e) { self.slide(this); }); } self.prevBtn.style.display = "none"; self.nextBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var nextSlide = document.querySelector(""); nextSlide.click(); }, false); self.prevBtn.addEventListener("click", function (e) { var currentSlideNumber = document.querySelector("#slider-nav a.current").getAttribute("data-slide"); var prevSlide = document.querySelector(""); prevSlide.click(); }, false); self.close(); }, slide: function (element) { this.setCurrentLink(element); var index = parseInt(element.getAttribute("data-slide"), 10) + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + index + ")"); this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; if (index < this.links.length) this.nextBtn.style.display = "block"; else if (index == this.links.length) this.nextBtn.style.display = "none"; if (index >1) this.prevBtn.style.display = "blok"; else if (index == 1) this.prevBtn.style.display = "none"; ), setCurrentLink: function (link) (var parent = link.parentNode; var a = parent.querySelectorAll ("a"); link.className = "current"; this.currentElement = link; for (var j = 0; j< a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } }, loadStatic: function () { var self = this; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "assets/popupSlider.css"; document.head.appendChild(link); var sliderHTML = ""; var xhr = new XMLHttpRequest(); xhr.open("GET", "assets/popupSlider.html", false); xhr.send(); if (xhr.status != 200) { alert("Can not load the popupSlider.html. Got the error " + xhr.status + ": " + xhr.statusText); } else { sliderHTML = xhr.responseText; } var div = document.createElement("div"); div.innerHTML = sliderHTML; document.body.appendChild(div); }, close: function () { document.getElementById("cq-popup-btclose").onclick = function () { document.getElementById("cq-popup-bg").remove(); document.getElementById("cq-popup").remove(); } } };

Verilen kod hakkında birkaç yorum. popupSlider.js dosyasının içeriği, PHP gibi, sınıfın yapıcısını ve yöntemlerini içeren tek bir JavaScript Slider sınıfıdır. Yalnızca JS'de, PHP'nin aksine bir kurucu tanımı gereklidir.

Yapıcı, aşağıdaki yapı kullanılarak tanımlanır:

İşlev Kaydırıcısı (eleman) (// yapıcı kodu)

Yapıcı içinde, sınıfın bir nesnesini oluştururken gerçekleştirilecek eylemler yazılmalıdır.

Sınıf yöntemlerinin kendisi prototipin içinde olacak ve bu JavaScript sınıfının tüm örnekleri için geçerli olacak. Benim durumumdaki JS prototipi aşağıdaki yapı ile açıklanmaktadır:

Slider.prototype = (// yöntemler)

Sınıf gövdesi dışında şu şekilde çağrılacaklar:

Var kaydırıcı = yeni Kaydırıcı (); slider.class_method();

Ve sınıf kodunun içinde aşağıdaki yöntem mevcuttur:

this.class_method();

Ana şey, JavaScript'te bunun değerinin çağrının içeriğine bağlı olduğunu unutmamaktır, bu nedenle, sınıfın yöntemlerini ve özelliklerini çağırmanın gerekli olduğu bazı yöntemlerin gövdelerinde böyle bir yapı vardır:

Var self = this; self.class_method(); // açıklanan yöntemin kodundan bir seviye daha yüksek olan bir yönteme atıfta bulunmak için

Görünüşe göre kod yazmanın tüm nüanslarını anlattım. Şimdi, resim karuselinin JS eylemlerinin açıklamalarını içeren JavaScript sınıfımızın yöntemleri hakkında birkaç söz.

yükStatik ()

Sınıf, yapıcıda başlatıldığında çağrılan ilk yöntem. Site sayfasının HTML koduna kaydırıcı HTML işaretlemesi ve stilleri olan bir dosya eklemekten sorumludur.

İlk olarak, JavaScript işlevi Document.createElement () kullanılarak bellekte yeni bir bağlantı etiketi oluşturulur ve kaydırıcı JS stilleriyle CSS dosyasının yolu da dahil olmak üzere gerekli tüm özniteliklerin değerleri atanır. Son olarak, stil verilmesi gereken head bölümünün sonunda JavaScript appendChild() yöntemi kullanılarak HTML sayfasına eklenir.

Ardından, kaydırıcımızın HTML dosyası için aynısını saf JavaScript'te yapıyoruz. Ancak burada küçük bir nüans var: Tıpkı bunun gibi, bir CSS dosyasında yaptığımız gibi aynı içindeki bir HTML dosyası bağlanamaz. Bunun için özel kütüphaneler var, örneğin HTML'ye HTML eklemek için, w3.org'daki kütüphane harika - https://www.w3schools.com/howto/howto_html_include.asp

Ancak daha sonra ya kaydırıcı kitaplığının kendisine dahil edilmesi ya da kullanıcılardan bunu kendi başlarına yüklemelerini istemesi gerekir. Ancak tüm bunlar optimal değil, çünkü çok fazla vücut hareketi gerektirir ve ek komut dosyaları nedeniyle web sitesi yükleme hızını yavaşlatır.

Sonunda, JavaScript kodunun içindeki HTML dosyasının içeriğini almaya ve daha önce JavaScript'e bir CSS dosyası eklemek için yaptığım gibi, onu bellekte oluşturulan yeni bir div öğesine yüklemeye karar verdim. Oluşturulan öğe, site sayfasının HTML kodunun gövde bölümünün en sonuna bağlanır.

Yalnızca gövdenin sonuna değil, aynı zamanda belirli bir kapsayıcıya kaydırıcı işaretlemesi olan bir div eklemek istiyorsanız, aşağıdaki kod yerine şunları yapabilirsiniz:

Var div = document.createElement ("div"); div.innerHTML = sliderHTML; belge.body.appendChild (div);

İstenen hedef kapsayıcı tanımlayıcısını belirterek aşağıdakini yazın (benim durumumda, kaydırıcının HTML JS'si, popupSlider kimliğine sahip öğede yer alacaktır):

Var hedef = document.querySelector ("# popupSlider"); target.innerHTML = sliderHTML;

Yükleyicide loadStatic ()'den sonra çağrılan ve bir sonraki kodda değineceğimiz ana HTML öğelerine karşılık gelen sınıf özelliklerini başlatmak için gerekli olan yöntem.

Son olarak, navigasyon () yöntemi çağrılır.

gezinmek ()
Bu yöntem, kaydırma anahtarı düğmelerine ve kaydırıcının altında bulunan gezinme öğelerine tıkladığınızda, daireler şeklinde gerçekleşen eylemleri belirtir.

Kolaylık sağlamak için, slaytları değiştirmek için JavaScript kodunu ayrı bir slayt () yöntemine koydum ve bunda onu döngüdeki her yuvarlak düğme için yalnızca click olayına asıyorum.

"Önceki Slayt" / "Sonraki Slayt" düğmelerine tıkladığımda, gördüğünüz gibi, ilgili daireye tıklamayı taklit etmeye karar verdim, mevcut CSS sınıfına sahip mevcut olana göre gerekli olanı tanımladım.

slayt (eleman)

Slaytları değiştiren kodu içeren JavaScript atlıkarıncasının kendisinin "sihrinden sorumlu" yöntemi. En başta, biraz sonra bahsedeceğimiz setCurrentLink() yöntemi çağrılır.

Bir giriş parametresi olarak, kendisine daire şeklinde bir JS kaydırıcı gezinme düğmesi nesnesi iletilir.

Slayt değiştirmenin kendisi şu şekilde çalışır:

1. Tüm kaydıraklar, birbiri ardına giden aynı büyüklükte bloklar şeklinde tasarlanmıştır. Kaydırıcı penceresi, tüm slaytları içeren öğenin yalnızca görünen kısmıdır.
2. offsetLeft özelliğini kullanarak geçerli slaydın sol kenarının üst öğenin sol kenarından ofsetini belirleriz.
3. Ve gerekli öğenin kaydırıcı penceresinde görüntülenmesi için ana öğeyi bu değere kaydırıyoruz.

Yöntemin sonunda, sırasıyla sol / sağ oklar olarak tasarlanan "önceki slayt" / "sonraki slayt" düğmeleri için davranış açıklanmıştır. Geçerli slayt tüm listenin ilkiyse, önceki slayta gitme düğmesi gizlenir. İkincisi ise, sonraki slayta gitmek için düğmeyi kaldırın.

setCurrentLink (bağlantı)

JavaScript kaydırıcı sınıfımızın bu yöntemi, geçerli öğeye karşılık gelen gezinme yuvarlak düğmesinin vurgulanmasından sorumludur. Onlar. ikinci slaydı seçtiysek, ikinci düğme vurgulanacaktır.

Geçerli olan olarak seçilmesi gereken düğmenin nesnesi, giriş parametresi olarak işleve iletilir.

Mevcut öğeyi vurgulamanın mantığı basittir:

1. Bizim durumumuzda tanımlayıcıya sahip kap olan ana öğenin nesnesini alıyoruz. kaydırıcı-nav.
2. Tüm gezinme öğelerini bir dizi bağlantı olarak alıyoruz.
3. Girişte alınan elemanı, ona bir sınıf ekleyerek seçiyoruz. akım.
4. Döngüde, tüm gezinme öğelerini yineleriz ve geçerli olan hariç tümü için sınıf değerini temizleriz. Bu fonksiyon çağrısından önce mevcut olan elemanın seçimini kaldırmak için bu gereklidir.

Kaydırıcının kapat düğmesine bir çarpı şeklinde tıkladığınızda eylemin belirlendiği sınıfın en son yöntemi. Burada aslında kod, kaydırıcı JS sınıfında yer alan her şeyin en anlaşılır halidir.

Tanımlayıcısı ile ulaşılan kapat butonuna tıklandığında kaydırıcı eleman ve yarı saydam arka planı ayarlayan eleman sayfadan kaldırılır. Bunlar da benzersiz tanımlayıcılardan türetilir.

Yöntemin kendisi, JavaScript kaydırıcımızda gerçekleşen tüm eylem komut dosyalarını içeren, daha önce açıklanan gezinme () içinde çağrılır.

Bu arada, kaydırıcıyı dışına tıkladığınızda kapatmak istiyorsanız, bu yönteme aşağıdaki kodu eklemeniz yeterlidir:

Document.getElementById ("cq-popup-bg"). Onclick = function () (document.getElementById ("cq-popup-bg"). Kaldır (); document.getElementById ("cq-popup"). Kaldır () ;

Geliştirilen kitaplığa dayalı JavaScript slayt gösterisi

Bazen pratikte, genellikle slayt gösterisi olarak adlandırılan bir JS kaydırmalı atlıkarınca yapmak isteyebilirsiniz. Benim durumumda bu gerekli değildi, ancak yine de kullanışlı olabileceği durumlarda ortaya çıkan kütüphane koduna dayanarak bir tane yapmaya karar verdim.

Aslında, slayt gösterisinin JavaScript uygulaması, normal kaydırıcıdan yalnızca biraz farklıdır. Tek fark, bir slayt gösterisinde, slaytların belirli bir zaman aralığında otomatik olarak değişmesi ve normal bir JS atlıkarınca durumunda, gezinme öğeleri kullanılarak manuel olarak değiştirilmesidir.

SlideShow: function (zaman aşımı) (var sliderCount = this.links.length; var self = this; this.slideCycle = setInterval (function () (var currentSlideNumber = document.querySelector ("# slider-nav a.current"). GetAttribute ("data-slide"); var slideId = parseInt (currentSlideNumber, 10) + 1; self.slide (document.querySelector (""));), zaman aşımı);)

Burada neler oluyor - bence açık. Bu yöntemi oluşturmak için, manuel kaydırmalı geçiş düğmeleri üzerindeki click olayından kodu kopyaladım ve belirtilen eylemi belirli bir süre sonra gerçekleştiren setInterval() işlevine yapılan JavaScript çağrısının içine yerleştirdim.

Action script ilk argüman olarak isimsiz bir fonksiyon olarak ve zaman aralığını ise bir değişken olarak yapmaya karar verdiğim ikinci argüman olarak, değeri slideShow () çağrılırken iletildi.

setInterval () içinde gerekli olan tek kod değişikliği, otomatik geçiş döngüsü için slayt sayısını belirlemek ve mevcut slaytın indeksini bununla karşılaştırmaktı.

Bu kodun çalışması için yöntemin kendisinin çağrılması gerekir. Hepsini, her türden komut dosyasının bir koleksiyonu olan aynı gezinme () içinde yapmaya karar verdim. Slayt gösterimiz JS'de slaytları otomatik olarak değiştirmek için zaman aralığının değerini argüman olarak ileterek aramayı en sona yerleştirdim (2000 milisaniye veya 2 saniye seçtim, bu sayıyı gerektiği gibi değiştirebilirsiniz):

Self.slideShow (2000);

Bundan sonra, tarayıcıyı da temizlemeyi unutmadan JavaScript kaydırıcısını kontrol edin.

Teoride, her şey işe yaramalı. Değilse, tarayıcı konsolundaki hataları inceleyin ve yorumlarda paylaşın.

Sonuç olarak, slaytların otomatik olarak ve bir daire içinde değiştiği bir JS slayt gösterisi elde ettik, yani. son slayta ulaşıldığında, gösteri döngüye girer ve ilk öğeden yeniden başlar.

Döngü görüntüleri ve incelemelerinden oluşan çeşitli JS kitaplıkları ile çalışırken, geliştiricilerin bu uygulamayı aktif olarak kullandıklarını, ancak bazı eklemelerle fark ettim. Gördüğüm tüm çözümlerde kullanıcı manuel geçiş yapmışsa otomatik slayt gösterisi kesiliyor. Bu yüzden ben de aynısını kitaplığımda yapmaya karar verdim.

JavaScript carousel'in otomatik slayt gösterisini kesmek için, setInterval () işlevi ayarlandığında döndürülen zaman aralığının tanımlayıcısını argüman olarak ilettiğim standart JS işlevi clearInterval () kullanmaya karar verdim.

Sonuç olarak, ayrı bir yöntemle çizmemeye karar verdiğim aşağıdaki kodu aldım:

ClearInterval (self.slideCycle);

Ve çeşitli gezinme öğelerine tıklandığında eylemlerin açıklandığı yerlere yerleştirdim, yani. aşağıdakilerde:

Link.addEventListener ("tıkla", işlev (e) (...)); self.prevBtn.addEventListener ("tıklama", işlev (e) (...)); self.nextBtn.addEventListener ("tıklama", işlev (e) (...));

clearInterval () öğesini click olayının kendisine daha yakın olarak çağırmak daha iyidir, asıl mesele ondan önce ve ondan sonra değil.

JavaScript kaydırıcısının siteye entegrasyonu

Yani, saf JS kaydırıcımız hazır. Şimdi geriye kalan tek şey onu siteye bağlamak.

Bunu yapmak için, genel olarak herhangi bir üçüncü taraf JavaScript kitaplığını entegre ederken standart adımlar olan aşağıdaki sıralı adımları izlemelisiniz.

Aşama 1... Kütüphane dosyalarını ayrı bir dizinde sitemize kopyalıyoruz.
Adım 2... Kaydırıcıyı göstermesi gereken HTML sayfalarına, kapanış gövde etiketinin önüne yerleştirerek aşağıdaki kodu ekleyin:

Aşama 3... Kaydırıcıyı bağladıktan sonra sayfaya bağlanan mevcut bir JavaScript dosyasına dönen JS'yi çağırmak için aşağıdaki kodu yerleştirin:

Var aSlider = new Slider ("# kaydırıcı");

Gördüğünüz gibi, bu kod aslında, popupSlider.js'de bulunan Slider sınıfının bir nesnesini oluşturuyor. Bu nedenle, yalnızca sınıf dosyasının kendisini sayfaya bağladıktan sonra çağrılmalıdır.

JavaScript atlıkarıncasına yeni slaytlar ekleme

Burada her şey çok basit. Slaytlar ayrı bir kütüphane dizininden alındığından slaytlar, sonra yeni resimler eklerken, gerekli dosyaları içine bırakmanız ve önce diğerleriyle aynı boyuta ayarlamanız yeterlidir.

Ve daha sonra varlıklar / popupSlider.html dosyasının kodunda, kapsayıcıya kimliği olan yeni bir blok ekleyin kaydırıcı-sarmalayıcı:

Temel olarak, benzer bir mevcut olanı kopyalayabilir ve görüntü dosyasının yolunu ve içindeki imza metnini değiştirebilirsiniz (gerekirse).

Ayrıca daire şeklinde yeni bir gezinme öğesi eklemeniz gerekecek, çünkü şu anda, otomatik eklenmesi henüz uygulanmadı. Bunu yapmak için, kimliği olan kapsayıcıya aşağıdaki kodu eklemeniz gerekir. kaydırıcı-nav en sonunda yazarak:

öznitelik değeri veri slaytı diğer elemanların en büyüğünden daha büyük olmalıdır. Maksimum akımı birer birer artırmak yeterlidir.

Carousel JS'yi tek bir komut dosyasına paketleme

İşte bu, JavaScript kaydırıcısı hazır ve bağlı. Ben şahsen bu seçeneği pratikte kullanmanızı tavsiye ederim, eğer işe yararsa :)

Bu arada, çalışmasını hızlandırmak için statik bileşenleri ek olarak sıkıştırabilirsiniz: CSS, HTML ve JavaScript dosyaları. Bunu yapmadım ve size küçültülmüş kod sunmadım, çünkü artık birçok ön uç yapı sistemi var: Gulp, Grunt, Webpack ve diğerleri. Ve her birinin kendi sıkıştırma ve dosya bağlantı algoritmaları vardır.

Ayrıca, küçültülmüş sonuçlar farklı işletim sistemlerinde farklı şekilde çalışabilir. Genel olarak, birçok neden var.

Ve kaynak kodların kendileri çıktı, bence, bu prosedüre ihtiyaç duyacak kadar ağır değil. Ancak bunlara ihtiyacınız varsa, işletim sisteminizi ve toplayıcınızı dikkate alarak küçültmeyi kendiniz yapılandırın.

En başta yazdığım gibi, başlangıçta belirlenen görevi çözmek için sitede üçüncü taraf bir hizmet aracılığıyla kaydırıcımın doğru kullanımı için tek bir JS dosyası almam gerekiyordu. Bu nedenle, aslında hazır üçüncü taraf kütüphaneleri kullanmadım.

O zaman tek bir JavaScript carousel betiğinin bir varyantı kullanışlı olacaktır. bir kitaplık durumunda ayrı dosyalarda saklanan HTML / CSS kodu da dahil olmak üzere tüm içerik doğrudan içinde yer alacaktır.

Benim durumumdaki senaryo iki bölümden oluşuyor. İlk bölüm, ikinci kez göstermeyeceğim popupSlider.js dosyasının içeriğini içeriyordu. LoadStatic () yönteminin açıklamasını ve çağrısını sınıf kodundan kaldırarak kendiniz ekleyin, çünkü onlara ihtiyacımız olmayacak.

Site için tek JavaScript kaydırıcı komut dosyasının ikinci kısmı, sayfa içeriği yüklendiğinde meydana gelen DOMContentLoaded olayının işleyicisidir.

Orada, HTML / CSS sayfasına carousel JS kodunu ekleyeceğiz ve kaydırıcının kendisini etkinleştirmeye eşdeğer olan Slider sınıfının bir nesnesini oluşturacağız.

Kod şematik olarak şöyle görünür:

/ * loadStatic () yöntemini tanımlamadan ve onu çağırmadan popupSlider.js içeriği * / document.addEventListener ("DOMContentLoaded", function () (var str = "\\ / * html kodu * / "; var div = document.createElement (" div "); div.innerHTML = str; document.body.appendChild (div); var aSlider = new Slider (" # slider ");

Benim durumumda sunucuya dosya yükleme seçeneği tamamen kapalı olduğundan, JavaScript carousel kontrollerinin görüntü dosyalarını buluta yüklemek zorunda kaldım ve HTML ve CSS kodunda bunlara giden yollar yerine, oluşturulan bağlantıları yazmak zorunda kaldım. tasarruf.

Eğer bu tür zorluklar yaşamıyorsanız, hiçbir şeyi değiştiremezsiniz, ancak kitaplığın slayt ve kontrol dizinlerini sunucuya kopyalamayı ve bunlara doğru yolları belirtmeyi unutmayın.

Kendi kendine yazılan JS kaydırıcısı - geliştirme beklentileri

Dürüst olmak gerekirse, oluşturduğum çözümün hedeflenen desteğini ve geliştirilmesini planlamıyorum 🙂 Şu anda, benimkinin aksine kendi geçmişine sahip olan, tamamen test edilmiş ve desteklenen bu tür kaydırıcıların bir arabası ve küçük bir arabası var. geniş bir kullanıcı ve geliştirici topluluğu tarafından.

Ama benim için tüm bu yola tek başıma sıfırdan başlamak ve başka bir bisiklet yaratmak bir şekilde ilginç değil ve bunun için gerçekten zamanım yok. Ancak öte yandan, bu JavaScript kaydırıcı, kodunu yeniden düzenleyerek ve belki de henüz mevcut olmayan yeni ilginç işlevleri uygulayarak geliştirme alıştırması yapmak için mükemmel bir fırsattır.

Yani, benim gibi, deney yapmak için bir kod tabanına ihtiyacınız varsa ve en azından fazladan boş zamanınız varsa - tarif ettiğim JavaScript kaydırıcısının kodunu kendinize kopyalayın veya GitHub'daki katkıda bulunanlara katılın. Depo açık ve makalenin başında ona bir bağlantı verdim.

Benim yaratımıma ön uç becerilerinizi pompalamak istiyorsanız, size kodun ihtiyaç duyduğu ve belki de uygulanması açısından ilginizi çekebilecek küçük bir düzenleme ve iyileştirme listesi bile verebilirim:

1. kaydırıcıyı kolayca özelleştirebilmeniz için harici bir yapılandırma yapın;
2. kaydırıcıyı sayfanın içine yerleştirmeyi mümkün kılar (şimdi yalnızca bir açılır pencere olarak tasarlanmıştır);
3. HTML kodunun eşzamansız yüklenmesi (birçok tarayıcı tarafından kullanımdan kaldırılmış olarak işaretlenen artık eş zamanlı yapılıyor);
4. paket yöneticilerini kullanarak bağımlılıklarla kurulabilmesi ve çalıştırılabilmesi için kütüphaneyi bir paket, NPM, Bower veya başka bir paket şeklinde düzenlemek;
5. JS atlıkarıncasını çeşitli cihazlarda kullanmak için düzeni duyarlı hale getirin;
6. mobil kullanıcılar için Swipe etkinliği ile slayt geçişi yapın.

Verdiğim düzenlemelerin listesi elbette nihai değildir ve eklenebilir. Önerilerinizi, düşüncelerinizi ve dileklerinizi makalenin altındaki yorumlara yazın ve geliştirmeye dahil etmek için sosyal ağlar aracılığıyla arkadaşlarınızla paylaşın.

Kodumu kesinlikle yargılamamanızı rica ediyorum, çünkü dediğim gibi, kendimi bir Ön Uç uzmanı olarak görmüyorum ve değilim. Ayrıca kodlama stiliyle ilgili tüm yorumlarınıza açığım ve umarım sizden bir şeyler öğrenebilirim ve sizden - benden, yani. OpenSource ürünlerini geliştirme ve destekleme ana amacını yerine getirmek.

Proje topluluklarına katılın, güncellemelere abone olun ve hatta size bir konuda yardımcı olabilirsem veya yaptığım şeyi beğenirseniz makalenin hemen altındaki formu kullanarak bana finansal olarak yardımcı olabilirsiniz 🙂

Bu kadar! Hepsi iyi! 🙂

Responsive veya dilerseniz responsive web tasarımı artık sadece başka bir tasarım trendi değil, halihazırda web sitelerinin evrenselliğini, çeşitli kullanıcı cihazlarının ekranlarında uyumlu bir görsel algıyı sağlayan bir tür web sitesi geliştirme standardıdır. Daha yakın zamanlarda, duyarlı bir şablon geliştirirken, genel tasarım stilini bozmadan belirli kaydırıcıları ve resim galerilerini entegre etmede çeşitli zorluklarla uğraşmak zorunda kaldım. Artık her şey çok daha basit, ağda çok sayıda hazır çözüm var ve özellikle sevindirici olan, çoğu açık kaynak koduyla ücretsiz olarak sunuluyor.

Sunulan araçların çeşitliliği nedeniyle, yakın zamanda ortaya çıkan ve herhangi bir kısıtlama olmaksızın dağıtılan duyarlı jQuery görüntü kaydırıcılarındaki en dikkate değer gelişmelere dair küçük bir genel bakış derledim; Tamamen ücretsiz.

Vay kaydırıcı

Harika görsel efektler (dönüşler, kalkışlar, bulanıklık, spiraller, panjurlar, vb.) ve birçok hazır şablon içeren duyarlı jQuery görüntü kaydırıcısı. WOW Slider'ın yerleşik sayfa ekleme sihirbazı ile dakikalar içinde kolayca ve kolayca çarpıcı slayt gösterileri oluşturabilirsiniz. Geliştiricinin sitesi, eklentiyi Rusça olarak kurmak ve kullanmak için gerekli tüm belgeleri, eklenti çalışmasının mükemmel canlı örneklerini içerir. Ayrı bir Wordpress eklentisi ve Joomla için bir modül de indirilebilir. Hem yeni başlayanlar hem de ileri düzey web yöneticileri olan birçok kişinin bu harika kaydırıcıyı beğeneceğinden eminim.

HiSlider

HiSlider - HTML5, Jquery kaydırıcı ve resim galerisi, popüler sistemleri çalıştıran sitelerde kişisel kullanım için tamamen ücretsiz eklenti - WordPress, Joomla, Drupal. Bu basit ama oldukça işlevsel aracın yardımıyla, sitelerinizin sayfalarında şaşırtıcı ve canlı slayt gösterileri, etkili sunumlar ve yeni mesajların duyurularını kolayca oluşturabilirsiniz. Kaydırıcı için çeşitli hazır şablonlar ve görünümler, içeriğin çarpıcı geçiş efektleri (değişimi), çeşitli multimedya içeriğinin çıktısı: YouTube ve Vimeo'dan videolar, esnek kullanıcı ayarları vb.

Nivo kaydırıcı

Nivo Slider eski güzel, konuyla ilgili herkes tarafından iyi bilinen, en güzel ve kullanımı kolay resim kaydırıcılarından biridir. MIT lisansı altında dağıtılan jQuery Nivo Slider eklentisini indirmek ve kullanmak ücretsizdir. WordPress için ayrı bir eklentisi de var ama ne yazık ki zaten ücretli ve bir lisans için 29 dolar ödemeniz gerekecek. WP tema dosyalarıyla biraz sihir yapmak ve Nivo Slider eklentisinin ücretsiz jQuery sürümünü blogunuza eklemek daha iyidir, çünkü internette bunun nasıl yapılacağına dair yeterli bilgi vardır.
İşlevselliğe gelince, her şey bununla uyumludur. İş için jQuery v1.7 + kitaplığı kullanılır, güzel geçiş efektleri, basit ve çok esnek ayarlar, duyarlı düzen, otomatik görüntü kırpma ve çok daha fazlası.

Kaydırıcı fikri, birkaç küçük nesnenin (resimlerin) basit bir animasyon efekti ile seçilen kategoriye tıklayarak değiştiği Apple ürünlerinin sunum stili ile tanınan geliştiricilerden ilham aldı. Codrops size bu kaydırıcının nasıl oluşturulacağı hakkında ayrıntılı bir eğitim, eksiksiz bir HTML düzeni, bir dizi CSS kuralı ve yürütülebilir bir jQuery eklentisinin yanı sıra kaydırıcıyı kullanmanın harika bir canlı örneği sunar.

yarık kaydırıcı

jQuery ve CSS3'te tam ekran görüntü kaydırıcısı + eklentiyi site sayfalarına entegre etme hakkında ayrıntılı bir eğitim. Buradaki fikir, bir sonraki veya önceki içeriğe giderken mevcut slaydı belirli içerikle dilimleyerek açmaktır. jQuery ve CSS animasyonları ile benzersiz slayt geçişleri oluşturabilirsiniz. Duyarlı kaydırıcı düzeni, çeşitli kullanıcı cihazlarının ekranlarında eşit derecede iyi görünmesini sağlar.

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

Bulunduğu ana kabın boyutuna bağlı olarak genişlik ve yüksekliği otomatik olarak ayarlayan içerik kaydırıcısı. Yürütmede oldukça basit ve ayarlarda esnek, jQuery tarafından desteklenen kaydırıcı, altta gezinme ile ekran boyutu aşağı doğru değiştirildiğinde, gezinme simgeler şeklinde görüntülenir. Çok ayrıntılı belgeler (oluşturma eğitimi) ve canlı kullanım örnekleri.

3B Yığın Kaydırıcısı

3B düzlemden geçişleri olan görüntüleri gösteren deneysel bir kaydırıcı. Görüntüler iki yatay yığına bölünür, gezinme okları yardımıyla her bir sonraki görüntünün değişimi ve izleme durumuna geçişi gerçekleştirilir. Genel olarak, özel bir şey yok, ancak fikrin kendisi ve uygulama tekniği oldukça ilginç.

Çok basit, %100 duyarlı ve tam ekran jQuery görüntü kaydırıcısı. Kaydırıcı, jQuery'nin büyüsü ile birlikte CSS geçişlerine (geçiş özelliği) dayanmaktadır. Maksimum genişlik varsayılan olarak %100'e ayarlanmıştır, bu nedenle resimlerin boyutu, ekran boyutundaki değişikliklere bağlı olarak değişecektir. Tasarımda özel animasyon efektleri ve incelikler yoktur, her şey basit ve sorunsuz çalışma için keskinleştirilmiştir.

Minimal slaytlar

Adı kendisi için konuşuyor, bu belki de karşılaştığım en hafif ve minimalist jQuery görüntü kaydırıcılarından biri (1kb'lik eklenti). DuyarlıSlides.js bir kap içindeki öğeleri kullanarak slayt gösterileri oluşturan küçük bir jQuery eklentisidir. IE6'dan itibaren ünlü ilerleme freni olan IE'nin tüm sürümleri de dahil olmak üzere çok çeşitli tarayıcılarla çalışır. Çalışma, güvenilirlik için javascript ile birlikte CSS3 geçişlerini kullanır. Sırasız bir liste kullanarak basit düzen, geçişleri ve zaman aralıklarını ayarlama, slayt değiştirmenin otomatik ve manuel kontrolü ve aynı anda birden fazla slayt gösterisi desteği. İşte çok eğlenceli bir "çocuk".

Kamera

Kamera, site sayfalarında slayt gösterileri düzenlemek için ücretsiz bir jQuery eklentisi, birçok geçiş efektine sahip hafif bir kaydırıcı, %100 duyarlı bir düzen ve çok basit ayarlar. Herhangi bir kullanıcı cihazının (PC monitörleri, tabletler, akıllı telefonlar ve cep telefonları) ekranlarına mükemmel şekilde uyar. Gömülü videoyu gösterme yeteneği. Düğmeleri ve bir küçük resim bloğunu kullanarak otomatik slayt değiştirme ve manuel kontrol. Kompakt bir tasarımda neredeyse eksiksiz bir resim galerisi.

bxSlider jQuery

Oldukça basit bir duyarlı jQuery kaydırıcısı. Herhangi bir içerik, video, resim, metin ve diğer öğeler slaytlara yerleştirilebilir. Dokunmatik ekranlar için geliştirilmiş destek. CSS geçiş animasyonlarını kullanma. Slayt gösterilerinin ve kompakt resim galerilerinin sunumunun çok sayıda farklı varyasyonu. Otomatik ve manuel kontrol. Düğmeleri kullanarak ve küçük resimleri seçerek slaytlar arasında geçiş yapma. Kaynak dosyanın küçük boyutu, yapılandırması ve uygulaması çok kolay.

FlexSlider 2

FlexSlider 2 - Geliştirilmiş yanıt verme, komut dosyası küçültme ve en aza indirilmiş yeniden akış / yeniden çizme ile aynı adı taşıyan kaydırıcının güncellenmiş bir sürümü. Eklenti, temel bir kaydırıcı, küçük resimlerle kaydırma kontrolü, yerleşik sol-sağ oklar ve düğmeler şeklinde bir alt gezinme çubuğu içerir. Videoyu slaytlarda görüntüleme (vimeo), esnek parametre ayarları (geçişler, dekorasyon, zaman aralığı), tamamen duyarlı düzen.

Galleria

Yüksek kaliteli resim galerileri ve kaydırıcılar oluşturmak için iyi bilinen ve oldukça popüler, duyarlı jQuery eklentisi. Kaydırıcı arayüzü, kontrol paneli sayesinde görsel olarak tanıdık bir video oynatıcıya benziyor, eklenti birkaç farklı tema içeriyor. Popüler hizmetlerden gömülü videolar ve resimler için destek: Flickr, Vimeo, YouTube ve diğerleri. Kurulum ve kullanım hakkında ayrıntılı belgeler.

Yaban mersini

Duyarlı web tasarımı için özel olarak yazılmış basit, zil ve ıslık içermeyen ücretsiz bir jQuery görüntü kaydırıcısı. Blueberry, deneysel bir açık kaynak jQuery eklentisidir. Minimalist tasarım, efekt yok, yalnızca belirli bir süre sonra birbirinin yerini alan sorunsuz açılır resimler. Her şey çok basit, kurun, prize takın ve gidin...

jQuery temel 2.1

Lightbox öğelerine sahip çok kompakt bir jQuery görüntü kaydırıcısı. Esnek boyutu nedeniyle, herhangi bir kapsayıcıya, küçük resimler şeklinde tek bir girişe, fare imlecini üzerine getirdiğinizde veya üzerine tıkladığınızda, büyütülmüş bir resim ve kontroller içeren bir ışık kutusunun etkinleştirildiği çok kolaydır. Ürünleri veya haber duyurularını sunmak için böyle bir kaydırıcıyı kenar çubuklarına yerleştirmek uygundur. Büyük miktarda bilgi içeren siteler için mükemmel bir çözüm.

Sıra

Gelişmiş CSS3 geçişlerine sahip ücretsiz duyarlı kaydırıcı. Minimalist tarz, 3 tasarım teması, Her çerçeve yatay olarak kayar, ortada görünür, resim sola gider, imza sağa, küçük resimler sağ alt köşede çoğaltılır. Her çerçevede görüntülemek için ürün sunumlarının sayfalandırılması. Kontroller ayrıca geri ve ileri düğmeleri içerir. Tüm modern tarayıcılar tarafından desteklenir.

Tokatlamak

Hem işlevsellik hem de ayarlar açısından çok basit bir resim kaydırıcısı, ayarlardan slayt değiştirme hızında bir değişiklik var, bir manuel mod bağlanıyor (kontrol düğmeleri etkinleştirilir), sürekli bir slayt gösterisi. Bu kaydırıcının olma hakkı var ve beni sadece olduğu gerçeğiyle çekti, bu gelişmede özellikle ilginç bir şey bulamadım, belki de kötü görünüyordum)))

Duyarlı Görüntü Kaydırıcısı

Vladimir Kudinov ve arkadaşlarından böyle güzel, uyarlanabilir bir görüntü kaydırıcısı. Oluşturma, yükleme ve kullanma için açıklayıcı örnekler ve ayrıntılı talimatlarla sağlanan sağlam, iyi geliştirilmiş bir araç. Duyarlı tasarım, hoş yeşil düğmeler ve oklar, her şey baskı olmadan oldukça güzel ve sakin.

Kesir Kaydırıcısı

Resimler ve metin slaytları için ücretsiz jQuery paralaks kaydırıcı eklentisi. Slayt animasyonu, her zamanlama ve animasyon ayarında tam kontrole sahip çoklu gösteri değerlerine sahiptir. Bir slaytta aynı anda birkaç öğeyi canlandırabilme yeteneği. Farklı animasyon yöntemleri ayarlayabilir, slaytları soldurabilir veya belirli bir yönden geçişler yapabilirsiniz. Bir resmin üzerine geldiğinizde açılan gezinme oklarını kullanarak otomatik görüntüleme ve manuel kontrol. 10 çeşit slayt görünümü animasyon efekti ve çok daha fazlası...

İncelemenin oldukça kapsamlı olduğu, ancak söz konusu çok sayıda ürün nedeniyle yeterince bilgilendirici olmadığı ortaya çıktı. Bu veya bu eklentinin işlevselliğinin tüm ayrıntıları ve ayrıntılı açıklamaları doğrudan geliştiricilerin sayfalarında bulunabilir. Umarım birisinin, sitelerinin sayfalarında renkli resim kaydırıcıları oluşturmak için bu çok gerekli aracı bulmasını kolaylaştırmıştır.

Tüm saygımla, Andrew

Bir süre önce jQuery'de ustalaşmaya başladım. Sanırım herkes bunun JavaScript'te komut dosyaları (komut dosyaları) geliştirmek ve oluşturmak için en popüler kitaplığın adı olduğunu biliyor. Onun yardımıyla, etkili ve etkileşimli web sitesi öğeleri oluşturmak çok kolaydır.

Bu yazımda size jQuery kullanarak basit bir evrensel kaydırıcının nasıl oluşturulacağını anlatmak istiyorum. Aslında, ağda bazen çok cazip görünen ve oldukça işlevsel olan çok sayıda hazır kaydırıcı var, ancak bunu sıfırdan yapacağız.

Peki, jQuery kaydırıcımızın (HWSlider adını verdiğim) hangi özellikleri not edilebilir?

• Kullanım ve tasarım kolaylığı - Zil ve ıslık olmadan basit bir komut dosyası oluşturmak istedim, bu nedenle CSS3'te animasyon kullanmadım ve kodun çok yönlü ve anlaşılır olduğu ortaya çıktı.
• Slaytlara hem görüntüleri hem de herhangi bir HTML kodunu ekleme yeteneği.
• Slaytları sırasıyla (ileri - geri) kaydırma ve her slaydı seçme (1,2,3,4 ...)
• Otomatik olarak oluşturulan bağlantılar (önceki - sonraki ve slayt numaralarıyla). Sadece gerekli sayıda div eklemeniz yeterlidir, gerisi kendi başına hesaplanacaktır. Slayt sayısının sınırsız olduğu belirtilebilir.

Komut dosyası tüm modern tarayıcılarla uyumludur: IE, Opera, Firefox, Safari, Chrome (kaydırıcı CSS3 kullanmadığından).

HTML işaretlemesi ile başlayalım. Bunu html sayfasının veya şablonun doğru yerine yapıştırmanız gerekir.

Burada her şey basit, gördüğünüz gibi yeni div'ler oluşturarak istediğiniz kadar slayt ekleyebilirsiniz. İçine herhangi bir html kodu, örneğin bir resim veya metin içeren bir blok ekleyebilirsiniz. Tüm js - komut dosyalarıyla birlikte jQuery kitaplığının kendisini eklemeyi unutmayın. Nasıl yapılacağını bilmiyorsanız, örneğe bakın.

# kaydırıcı kaydırma (/ * Kaydırıcı ve düğmeler kaydırma * / genişlik: 660 piksel;) # kaydırıcı (/ * Kaydırıcı kaydırma * / genişlik: 640 piksel; yükseklik: 360 piksel; taşma: gizli; kenarlık: #eee katı 10 piksel; konum: göreli; ) .slide (/ * Slayt * / genişlik: %100; yükseklik: %100;) .sli bağlantıları (/ * Kaydır düğmeleri * / kenar boşluğu: 10 piksel; metin hizalama: merkez;) .sli bağlantıları. kontrol -slide (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.png) merkez alt tekrarsız;) .sli - bağlantılar .control-slide: vurgulu (imleç: işaretçi; arka plan konumu: merkez merkez;) .sli-links .control-slide.active (arka plan konumu: orta üst;) #prewbutton, #nextbutton (/ * Bağlantı " Sonraki ve Önceki * / display: blok; genişlik: 15 piksel; yükseklik: %100; konum: mutlak; üst: 0; taşma: gizli; metin girintisi: -999 piksel; arka plan: url (okBg.png) sol merkez tekrarsız; opaklık: 0,8; z-endeksi: 3; anahat: yok! önemli;) #prewbutton (sol: 10px;) #nextbutton (sağ: 10px; arka plan : url (arrowBg.png) sağ merkez tekrarsız;) #prewbutton: üzerine gelin, #nextbutton: üzerine gelin (opaklık: 1;)

Daha yakından bakalım. İlk olarak, "slider-wrap" kimliğine sahip ana kutuya istenen genişliği veriyoruz. Diğer tüm bloklar içine yerleştirildiği için yükseklik ayarlanamaz, içeride ne olduğuna bağlı olacaktır. Ardından slaytların yerleştirileceği kabın boyutlarını ayarlamamız gerekiyor. Bu #kaydırıcı. Ona bir genişlik ve yükseklik verelim, ayrıca örneğin 10 piksellik bir kenarlık verelim. Burada genişlik 640 pikseldir ve bu, sağ ve sola 10 piksel genişliğinde kenarlıklar eklediğimiz için ebeveynin genişliğinden daha azdır. Slaytların kendilerinin (.slide) genişliği de bu div'in genişliğine bağlıdır.

Ve son olarak: içerideki sürgüler mutlak konumlandırmaya sahip olduğundan, sürgü kabı için konum: göreli ayarladığınızdan emin olmamız gerekir. Slaytların kendileri için yalnızca genişlik ve yükseklik CSS'de ayarlanır. Özelliklerin geri kalanı zaten jQuery betiğinde ayarlanmıştır.

.sli-links seçicisi, gerekli slayta gitmek için düğmelerin yerleştirileceği bir bloktur. Bu düğmeler, formun basit öğeleridir. oda, üst sli-linkleri ile birlikte gerekli miktarda otomatik olarak eklenecektir. Düğmeler için güzel bir görünüm ayarlıyoruz, yani her düğmeyi kare yapıyoruz, hepsini merkeze hizalıyoruz ve ayrıca overflow: hidden ve text-indent: -9999px sayesinde metni kaldırın, yalnızca arka plan simgelerini bırakın , bu imleç öğesinin üzerine gelindiğinde de değişir. Kolaylık sağlamak için görüntü sayısını azaltan sprite kullandım.

Ardından, aktif düğme çizilir. Sadece arka planın konumunu değiştiriyoruz. Ardından, sonraki ve önceki slaytlara gitmek için bağlantıları yeniden tasarlayacağız. Tıpkı düğmeler gibi onlara herhangi bir dekorasyon verebilirsiniz. Bu bağlantılar otomatik olarak #kaydırıcıya eklenir. Ama onlara göstermek için, slaytların üzerinde görünmeleri için onlara mutlak konumlandırma ve bir üst katman (z-endeksi: 3) verdim. CSS ile her şeyin açık ve basit olduğunu düşünüyorum: Kaydırıcıyı ihtiyaç duyduğunuz şekilde tasarlamak için neredeyse tüm özellikleri değiştirebilirsiniz.

Şimdi senaryonun kendisine bir göz atalım:

Var hwSlideSpeed ​​​​= 700; var hwTimeOut = 3000; var hwNeedLinks = true; $ (belge) .ready (işlev (e) ($ (". slayt").css ("konum": "mutlak", "üst": "0", "sol": "0")). () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = $ ("# slider .slide").size (); var animSlide = function (ok) (clearTimeout (slideTime); $ (".slide").eq (slideNum) .fadeOut (hwSlideSpeed); if (ok == "next") (if (slideNum == (slideCount-1)) (slideNum = 0;) else (slideNum ++) ) else if (ok == "prew") (if (slideNum == 0) (slideNum = slideCount-1;) else (slideNum- = 1)) else (slideNum = ok;) $ (". slayt"). eq ( slideNum) .fadeIn (hwSlideSpeed, rotator); $ (". control-slide.active"). removeClass ("etkin"); $ (". kontrol-slide"). eq (slideNum) .addClass ("etkin" ") ;) if (hwNeedLinks) (var $ linkArrow = $ ("") .prependTo ("# kaydırıcı"); $ ("# nextbutton"). (function () (animSlide ("next"));)) $ ( "#prewbutton"). (function () (animSlide ("prew"));))) var $ adderSpan = ""; $ (". slayt"). " "+ dizin +""; }); $("

") .appendTo (" # slider-wrap "); $ (". kontrol-slide: ilk "). addClass (" aktif "); $ (". kontrol-slide "). (fonksiyon () (var goToNum) tıklayın = parseFloat ($ (bu) .text ()); animSlide (goToNum);)); var duraklama = yanlış; var döndürücü = işlev () (if (! duraklatma) (slideTime = setTimeout (işlev () (animSlide (" next ")), hwTimeOut);)) $ (" # kaydırıcı-sarma "). vurgulu (fonksiyon () (clearTimeout (slideTime); duraklatma = doğru;), işlev () (duraklatma = yanlış; döndürücü ();) ); döndürücü ();));

İlk olarak, ayarlar değişkenlere kaydedilir: hwSlideSpeed ​​​​- slaytların hızı, hwTimeOut - otomatik slaydın değiştiği süre, hwNeedLinks - "Sonraki" ve "Önceki" bağlantılarını kontrol eder - bu değişkenin değeri ise doğruysa, bu bağlantılar görüntülenecek ve yanlışsa, buna göre olmayacaklar (blogumun ana sayfasında olduğu gibi).

Ardından, .css() yöntemini kullanarak slaytlar için gerekli CSS özelliklerini ayarlıyoruz. Kaydırmalı blokları mutlak konumlandırma kullanarak üst üste koyuyoruz, ardından hide () ile hepsini gizleyip sadece ilkini gösteriyoruz. SlideNum değişkeni, aktif slaydın, yani sayacın numarasıdır.

jQuery kaydırıcımızın arkasındaki ana mantık, animSlide işlevidir. Bir parametre alır. İçine "sonraki" veya "önceden" dizelerini geçirirsek, koşul operatörleri tetiklenecek ve sırasıyla sonraki veya önceki slayt görüntülenecektir. Değer olarak bir sayı gönderirsek, bu sayı aktif slayt olur ve gösterilir.

Yani bu fonksiyon mevcut div'i gizler, yenisini hesaplar ve gösterir.

Etkin slaydı görünür yapan .fadeIn () yöntemine ikinci bir argüman verildiğine dikkat edin. Bu, sözde geri arama işlevidir. Slayt tam olarak görüntülendiğinde yürütülür. Bu durumda, slaytların otomatik olarak kaydırılmasını sağlamak için bu yapılır. Aşağıda tanımlanan döndürücü işlevi, ihtiyacımız olan aralıkta bir sonraki slayta geçmek için animSlide işlevini tekrar çağırır: sürekli kaydırma sağlayan bir kapatma elde ederiz.

Her şey yolunda gidiyor, ancak kullanıcı imleci kaydırıcıya hareket ettirirse veya düğmelere basarsa otomatik yürütmeyi durdurmamız gerekir. Bunun için duraklama değişkeni oluşturuldu. Değeri pozitif - true ise, otomatik geçiş olmayacaktır. .hover () yöntemiyle şunları belirtiyoruz: çalışıyorsa zamanlayıcıyı temizle - clearTimeout (slideTime) ve duraklatma = doğru olarak ayarlayın. İmleci hareket ettirdikten sonra, duraklamayı kapatın ve döndürücü () kapatma işlemini başlatın.

Ek olarak, sayfada yeni öğeler oluşturmamız ve bunları doğru yere yerleştirmemiz gerekiyor. Her slayt için her bir () döngüsünü kullanarak (sınıf.slide ile div), içinde bir sayı olacak bir yayılma öğesi oluşturun - slaydın numarası. Bu sayı, animasyon işlevinde o sayı ile slayta atlamak için kullanılır. Her şeyi gerekli sınıflarla bir div'e saralım ve sonuç olarak aşağıdaki işaretlemeyi elde ederiz:

Görünüşe göre, neden HTML kodunda değil de komut dosyasının içinde işaretleme oluşturuyoruz? Gerçek şu ki, örneğin, bir kullanıcı komut dosyalarını devre dışı bırakmışsa, çalışmayan öğeleri görmeyecektir ve bu onun kafasını karıştırmayacaktır. Ayrıca, SEO için iyi olan kodu basitleştirir.

Sonuç olarak, kaydırıcı işaretlemesi şöyle görünecek (görüntüleri slayt olarak kullandım ve 5 parça yükledim):

Aşağıda, jQuery kaydırıcımızın demo sayfasında nasıl çalıştığını görebilir ve gerekli tüm kaynakları indirebilirsiniz.

Son olarak, bu kaydırıcıyı Drupal ile entegre etme hakkında birkaç nokta. Bu kodu, örneğin page.tpl.php gibi bir şablon dosyasına ekleyebilir ve komut dosyasını ayrı js dosyalarında temaya ekleyebilirsiniz. Jquery, Drupal'da varsayılan olarak etkindir, ancak tuhaflıklar modunda () çalışır. İyileştirme için iki seçenek vardır. Veya tüm js kodunu sarın:

(fonksiyon ($) (// Tüm kodunuz ...)) (jQuery);

veya tüm komut dosyasındaki $ karakterlerini jQuery ile değiştirin. Bunun gibi:

JQuery (belge) .ready (işlev (e) (jQuery (". Slayt")). Css ("konum": "mutlak", "üst": "0", "sol": "0")). Gizle () .eq (0) .show (); var slideNum = 0; var slideTime; slideCount = jQuery ("# ​​​​slider .slide"). size (); var animSlide = fonksiyon (ok) (// vb. ...

Örnek zaten ilk yöntemi uygulamıştır.

Okuduğunuz için teşekkürler! Yorum bırakın yine gelin. Ayrıca, blog güncellemelerini ilk alan kişi olmak için RSS'ye abone olabilirsiniz!

Katma: Hepsi bu değil. Okumaya devam etmek. Orada bu betiğe yeni özellikler ekleyeceğiz.

Ancak sizinle JS'nin temellerini tartıştığımız için, tabanı incelemek için sadece JavaScript kullanarak basit bir kaydırıcının nasıl oluşturulacağını anlatacağım. Pekala, malzemenin analizine geçelim!

Ne tür kaydırıcılar var ve bunlara nerede ihtiyacınız olabilir?

En azından bazı fotoğrafların bulunduğu tüm web hizmetlerinde görüntüleri izlemek için uygun galerilerin oluşturulması gerekir. Çevrimiçi mağazalar, portföy siteleri, haber ve eğitim hizmetleri, şirketlerin web siteleri ve fotoğraf raporları olan eğlence kuruluşları vb.

Ancak, bu kaydırıcılar için yaygın bir kullanımdır. Benzer teknolojiler, müşterileri promosyon ürünlerine, hizmetlerine çekmek veya işletmelerin avantajlarını anlatmak için de kullanılmaktadır.

Temel olarak, müşteriler bunu "Carousel" galeri tipinde uygulamayı ister. Bu, kullanıcı tarafından slaytları ileri geri değiştirebilme özelliği ile görüntüleri büyük boyutta görüntülemek için kullanışlı bir araçtır. Bu durumda, resimlerin kendisi genellikle belirli bir süre sonra otomatik olarak değişir. Bu mekanizma, resimlerin bir daire içinde tekrarlanması nedeniyle takma adı verildi.

Bugün, istenirse, bir dizi fotoğrafı görüntülemek için en sıra dışı ve çekici eklentileri internette bulabilirsiniz.

Bağımsız aktivite

Şimdi kendi kaydırıcımızı oluşturmaya başlayalım. Öğrenme eğrinizin bu noktasında, onu uygulamak için saf kullanmanızı öneririm. Bu, bir daire içindeki görüntüleri otomatik olarak değiştirir.

Aşağıda uygulamamın program kodunu ekledim. Yol boyunca sizin için yorum bıraktım.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

• 
• 
• 

Umarım css ve html kodunda herhangi bir sorunla karşılaşmamışsınızdır. Ancak senaryonun çalışmasını analiz etmenin gerekli olduğunu düşünüyorum. Bu nedenle, yazılanları deşifre etmeye devam edelim.

Yani, önce yöntemi kullanarak sorguSelectorTümü değişken Kaydırıcım Belirtilen aralıktaki tüm öğelerin bir listesini atadım. Bu girişi gösterir

Document.querySelectorAll ("#slides .slide")

Böylece, Kaydırıcım dört elementten oluşan bir koleksiyon saklanır.

Ardından, değişkene atayarak hangi görüntünün gösterilmeye başlayacağını belirledim. geçerli resim sıfır. Slayt değişiminin 2.7 saniyede gerçekleştiğini ve işleme fonksiyonunun çağrılması gerektiğini belirttikten sonra sonraki slayt.

Gelelim fonksiyonun kendisine.

Başlangıçta, listenin mevcut öğesi için sınıfların tanımını değiştiririm, yani. yeniden yazma" kaymakgösteriliyor" üzerinde " kaymak". Böylece görüntü görünmez olur.

Şimdi ekranda görüntülenecek yeni bir koleksiyon öğesi tanımlıyorum. Bunu yapmak için mevcut +1 pozisyonunu alıyorum. Ayrıca sahip olduğum slayt sayısına göre kalan (%) bir bölme kullandığımı fark etmişsinizdir. Gösteriyi yeni bir çevrede başlatmak için kulaklarla yapılan bu numara gereklidir. Kelimenin tam anlamıyla şöyle görünecek:

Ama şimdi ortaya çıkan öğeye sınıfların açıklamasını atıyorum " kaymakgösteriliyor". Gördüğünüz gibi, her şeyin uygulanması kolaydır.

Dikkatiniz için teşekkürler. Abonelerimden oluşan gruba katılmayı, yeni makaleler okumayı ve elbette en sevdiğiniz yayınların bağlantılarını arkadaşlarınızla paylaşmayı unutmayın. JavaScript öğrenmede iyi şanslar. Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 256 kez

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

Ders planı

Bu nedenle, bugün size komut dosyaları olmadan kendi kaydırıcınızı nasıl oluşturacağınızı, herhangi bir cihaza nasıl uyarlayacağınızı ve gelecekte görünümünü kolayca nasıl değiştireceğinizi ve yeni slaytlar ekleyeceğinizi ayrıntılı olarak göstereceğim. 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ğından, 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 altyazıları 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 altyazı 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ına sahip 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-box-sizing: border-box; box-sizing: border-box ;)

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

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

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, bu boyutları bu yüzden belirtiyorum. 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 bir ş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: devral; taşma: gizli; konum: göreli; genişlik: devral;)

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: devral; opaklık: 0; konum: mutlak; genişlik: devral; 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ş (ekran: yok;)

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

Sarma .control (konum: mutlak; sol kenar boşluğu: -50 piksel; sol: %50;)

Bu stiller ile düğme kutusunu ortalayacağız.

Etiketi kaydır (imleç: işaretçi; görüntü: satır içi blok; yükseklik: 25 piksel; kenar boşluğu: 10 piksel; konum: göreli; genişlik: 25 piksel; kenarlık: 2 piksel düz gri; kenarlık yarıçapı: %30 / 10 piksel;)

Bu stiller çok önemli bir iş yapıyor - düğmeleri şekillendirmemize 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 yuvarlatılmasını da ekleyebilirsiniz.

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

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

# point1: kontrol edildi ~ .kontrol etiketi: nth-of-tür (1), # point2: kontrol edildi ~ .control etiketi: nth-of-type (2), # point3: kontrol edildi ~ .kontrol etiketi: nth-of-tür (3) (arka plan: url (wheel.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. Bu 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 olun. 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, ikinci tıklandığında - Audi, üçüncü tıklandığında - Porshe'de bir BMW arabası gösteriliyor. 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 yatay bir kaydırma çubuğu görünecektir. 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, pencerenin genişliği küçülürse kabın küçülmesine izin verecektir.
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:

Sarma (maksimum genişlik: 600 piksel;) .slider (genişlik: %100;)

Harika, şimdi geriye kalan tek şey, kaydırıcıyı tamamen duyarlı hale getirmek için birkaç medya sorgusu yazmak ve ayrıca görüntüleri yeni ekranlara uyacak şekilde ölçeklendirmek. 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, 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:

@media ekranı ve (maksimum genişlik: 650 piksel) (.wrap (maksimum genişlik: 480 piksel; yükseklik: 280 piksel;) .slides (arka plan boyutu: kapak;))

Kaydırıcının genişliği azalacak ve yükseklik de azalacaktır. Slaytların kendileri için, görüntüleri orantılarını korurken kırpılmadan kaydırıcıya tamamen sığacak şekilde ölçekleyen 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 almak gerekiyor. Bunu yapmak için başka bir medya sorgusu yazacağım:

@media ekranı ve (maksimum genişlik: 400 piksel) (.wrap (maksimum genişlik: 320 piksel; yükseklik: 180 piksel;) .slides (arka plan boyutu: kapak;))

Her şey aynı, ancak yine de kabın genişliğini ve yüksekliğini azaltıyoruz. Harika, şimdi kaydırıcımız tamamen duyarlı! 320 piksel genişliğe sahip bir cep telefonunda bile harika görünecek. Ancak, kendiniz görün:

Medya sorguları sayesinde görüntüler orantısal olarak küçülürken orantıları korunur.

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

Slaytlara geçişli (.slides) bir iş parçacığı atayabilir ve görüntü göründüğünde efekti iptal edebilirsiniz. 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ürme: döndürme (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ür: 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 orijinal konumuna yumuşak bir dönüşün etkisi görünecektir. Buna göre, kendi efektlerinizi oluşturabilirsiniz. Kaydırıcıyı yaptık, hepsi benim için. Herhangi bir sorunuz varsa, yorumlarda bekliyorum.

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 gerekirse, her etikette target = "_blank" özniteliği eklenmelidir.

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:

a kaydırır (ekran: blok; genişlik: %100; yükseklik: %100;)

Yani, tüm slaytlar için bağlantıyı bir blok elemanı yaparız ve resmin tüm alanını kaplaması için genişlik ve yüksekliği %100'e ayarlarız. Şimdi her şey işe yaramalı, kontrol edebilirsiniz. Sadece linklerdeki adresleri değiştirin ve kullanabilirsiniz.

Animasyon efektlerinde alternatif css3 kaydırıcısı

Bir css3 kaydırıcısının başka bir örneği. Bu sefer animasyon üzerinden yapacağız. Genel olarak, bu ilk yoldan daha kolay olacak.

Ana karelerle kaydırıcı oluşturma

Html işaretlemesiyle başlamanız gerekir. Bu durumda, oldukça basit olacaktır, tanımlayıcıya sahip sadece bir blok:

Slaytlar için aynı boyutta 3 adet resim hazırladım. Benim durumumda, 448 piksel genişliğinde ve 251 piksel uzunluğunda olduğu ortaya çıktı. Bunlar resimlerin boyutları. Tüm boyutların aynı olmasını tavsiye ederim, o zaman kaydırıcımızda hiçbir sorun olmayacak.

Her resim için aynı boyutları verdim, ana bloğun ortasına yaptım ve ayrıca ilk resmi arka plan olarak ayarladım. Şimdi her şey şöyle görünüyor:

Blokta sadece bir arka plan resmimiz var, başka bir şey yok. Kolaylık olması açısından bu örnekte kullandığım resimleri 1, 2 ve 3 isimleriyle kaydettim.

Ve şimdi eğlence başlıyor. Arka plan görüntüsünün değişmesini sağlayacak animasyonu yazmanın zamanı geldi. Bu, @keyframes yapısı kullanılarak yapılır.

@keyframes kaydırıcısı (%0 (arka plan: url (1.jpg);) %33 (arka plan: url (2.jpg);) %66 (arka plan: url (3.jpg);))

Bu kod parçasına daha yakından bakalım. Bu arada, bir css dosyasına yerleştirilmesi gerekiyor. @keyframes anahtar sözcüğünü animasyonun adı izler, kesinlikle herhangi bir şey olabilir, ancak yalnızca Latin karakterlerini içerebilir. Ardından, küme parantezleri açılır ve her bir animasyon efekti bunlara yazılır.

Burada ne görüyoruz? Öncelikle animasyondaki zaman dilimi belirtilir ve ardından o anda uygulanması gereken özellikler kaşlı ayraçlar içinde yazılır. Tarayıcıya, animasyonun en başında arka plan görüntüsünün 1.jpg olması gerektiğini, ardından animasyonun üçte birinde 2.jpg olarak değiştirilmesi gerektiğini ve sonuna doğru tekrar başka bir görüntüye dönüştürülmesi gerektiğini söyleriz. görüntü.