Kaygan kaydırıcıyı jQuery kitaplığı altına yüklemeye bir bakış. Bu eklenti, slayt gösterileri oluşturmaya yönelik eklentilerin derecelendirmesinde en yüksek yerlerden birini kaplar.

Tek başına, burayı hak ettiği şekilde ele geçirdikten sonra onunla temasa geçmeli ve onu web kaydedicinin hazinesine koymalısın. Kurulumun açıklamasını ve çeşitli robot uygulamalarını içeren eklentinin ana sayfasını burada bulabilirsiniz - şık Demolar. Eklenti her şeye sahip değil - deposunda tüm yönetim işlevlerine sahip, hafif ve kurulumu basit, oluşturulması için HTML düzeni basit ve anlamsal. Kaygan eklenti, yapılandırma dosyasına kolayca bağlanabilen yeni bir ayar seti ile birlikte gelir.

Kaygan eklentiyi bağlama

Kaygan eklentiyi çalışan bir projeye bağlama işlemi çok basittir, sadece ayarların doğru olduğundan emin olmanız gerekir.

Kaygan yüzey altında işaretlerin oluşturulması

Kaygan eklentinin HTML düzeni anlamsal ve basittir. Uygun sınıf adlarının bir listesini oluşturmak yeterlidir. Kaygan eklentinin resmi sayfasındaki Başlarken kullanıcısı aşağıdaki HTML işaretlemesini görüntüler:

Temel madde işaretli liste biçiminde HTML düzenine dayalı bir kaydırıcı oluşturma girişimim:

• 
• 
• 
• 

... başarı getirmedi - ustaca eklenti kazanılmadı! Belki CSS stillerini kullanarak öğeleri değiştirebilirsiniz

1

ul

,

1

li

Blok için her şey hâlâ yolunda mı? Ancak, resmi belgelerde açıklandığı gibi, olmadan yapabileceğiniz ve gerçekleştirebileceğiniz ek adımlar vardır. Kaygan eklenti dosyasını düzenleme

Bir sonraki adımda kaygan eklentinin arşivini alacağız. Çeşitli şekillerde para kazanabilirsiniz. Bunlardan ilki sizi bu sayfadan ikna etmek, Git Get It. Veya yazarın GitHub sayfasına gidin ve eklentinin zip arşivlerini edinin; GitHub'u kullanın. Her iki durumda da isimli arşivler kaldırılır

Kaygan eklentinin hazır CSS stillerini bir HTML belgesine bağlamak mümkündür:

HTML belgesinin kapatılan etiketten önceki gövdesi

1

Js komut dosyalarına üç satır ekliyoruz:

Nitekim ilk iki satırda jQuery-1.11.0 kütüphanesi ve jQuery Migrate 1.2.1 eklentisi CDN üzerinden indiriliyor. Üçüncü eklenti

Eklenti başlatma komut dosyasını ekliyoruz: $(document). hazır (function ()( $ (".slider") .slick (( noktalar : true )); ));

Podsumkov'un HTML düzeni ve CSS tabloları ile JS komut dosyalarının bağlantısı şu şekilde görünecektir:

• 
• 
• 
• 
• 

Google Chrome tarayıcı konsolu gibi zengin bir şey hakkında bilgi edinmek isterim. Korisna neden var? Çünkü birdenbire benim için de işe yaradı (her şeyden önce jqFancyTransitions eklentisi - jqFancyTransitions Slider ile oldu) ve komut dosyalarını bir HTML belgesine bağlarken hataları bulmaya yardımcı oluyor. Yeri doldurulamaz bir şey!

Tarayıcının kullanımını ve Chrome konsolunun işlevselliğini göstermek için, daha önce oluşturduğum tarayıcıda index.html dosyasını başlatıyorum.

Ve ne?! Affedersiniz, işte şık eklenti - bir kaydırıcı, yardımınız için yaratımlar? Projenin resmi web sitesi Demos'ta bu kadar net bir şekilde gösterilen bunlar nasıl bir güzellik?! Harika - ama hiç yok!

Heh, betiği bağlamak için doğru şekilde oturum açtım mı? Peki, dokümanları bir kez daha gözden geçireceğim... Her şey doğru ama işime yaramıyor... Belki de indeks sayfasını yeniden yazmalıyım? Bu mümkündür, ancak farklı varyasyonlara sahip çok sayıda "veya belki" olabilir.

Google Chrome tarayıcı konsolunu açıp “Ağ” sekmesine gidelim:

Kaygan eklentinin sayfamda çalışmamasının ana nedeni budur! Sadece jQuery 1.11.0 kitaplığı ve jQuery Migrate 1.2.1 eklentisi Chrome tarayıcısı tarafından CDN aracılığıyla indirilemedi. Konsolun kendisi olmasaydı, “arızanın” nedenini belirlemek için “bilimsel yöntemi” kullanmak için kaç saatimi ve sinirlerimi boşa harcardım, bilinmiyor.

Tarayıcının dosyaları CDN aracılığıyla neden indiremediğini anlamak için bir dakika bile bekleyemiyorum. Bu yüzden dosyaları "manuel olarak" indireceğim ve yerel olarak bağlayacağım:

Google Chrome tarayıcısında index.html indeks sayfasını yeniden başlatıyorum ve... Mucize hakkında! Kaygan eklenti şunları yapar:

Resimler otomatik olarak kaydırılır ve alt kısımda, ayarlama öncesinde, akıcı komut dosyası tarafından oluşturulan sayfalandırmayı görebilirsiniz:

noktalar: doğru, otomatik oynatma: doğru

... yapılandırma dosyasında. Ek olarak, görüntüyü "manuel olarak" ileri geri sarmak için oklar oluşturuldu (HTML sayfasının beyaz arka planında görünmez). Kaygan eklentinin diğer ayarları resmi sayfa olan Ayarlar'da görüntülenebilir.

NOT: Başlatma komut dosyanızı harici bir JS dosyasına yerleştirmenizi önemle tavsiye ederim.

Bu makaleyi basit bir nedenden dolayı yazmadım: poponun kesinliği ve yaratılışının akışkanlığı için.

Kaygan eklentiyi düzenleme

Şimdi sağda biraz kaybettim - bir sayfa öğesi denetçisi (örneğin, Firebug) oluşturduktan sonra, sayfamızın DOM ağacından ihtiyacımız olan öğe sınıflarının adlarını "çektim" ve bunları kolayca düzenleyebilirim CSS kuralları:

gövde ( arka plan rengi : hafiflet (#ccc, 5% ); .slider( genişlik : 300 piksel ; kenar boşluğu : 10 piksel otomatik ; dolgu : 5 piksel ; arka plan rengi : #ccc ; kenarlık : 3 piksel katı #000 ; @include borde (3 piksel) ); .slick-dots(alt : -30px ; )) )

Bir HTML belgesinin gövdesi için oluşturuyorum

Dolgu, yuvarlatılmış kenarlı bir kordon ve arka plan dolgusu ekleyeceğim; Onu yan tarafa ortalayacağım ve biraz aşağı indireceğim. Ve ayrıca biraz tepenin yukarısında

1	.kaygan noktalar

sayfalandırma ile.

Sonuç şaşırtıcı:

Visnovok

Slick me eklentisi kesinlikle başarılı oldu. Kurulumu ve bağlanması kolaydır, slayt gösterisi görüntüleyerek öğeler oluşturur ve çok sayıda farklı ayara sahiptir. Yeni görünümü özelleştirmeye yönelik çeşitli seçenekler için uygulama sayfasına - Demolar'a gidebilirsiniz ve gitmeniz gerekecektir. Ve gerektiği gibi gerekli spesifik zihinlere uyum sağlayın.

Kodlamaya elveda!

Merhaba, size hafif, evrensel ve kurulumu kolay olduğunu kanıtlamış sitenin şık kaydırıcısından bahsetmek istiyorum. Burada kaydırıcılar ve atlıkarıncalarla ilgili her şeyi uygulayabilirsiniz. Eklentinin yaratıcısının belirttiği gibi, "ihtiyaç duyacağınız son atlıkarınca", fikriniz ne olursa olsun ona uygun tek bir evrensel atlıkarınca olarak yorumlanabilir. Ve bu doğru. Temel bir kaydırıcıdan, birkaç satıra kadar kaydırılabilen uyarlanabilir bir atlıkarıncaya kadar pek çok şey var.

Eklenti hem yeni başlayanlar hem de ileri düzey web okuyucuları tarafından güvenle kullanılabilir. Bu bildiğimiz her şeye karşı çok güçlü bir rakip. Zengin görevlere sahip bir aracı bile kutudan çıkarabiliriz.

Web sitenize bir kaydırıcı/atlıkarınca yüklemek için tek yapmanız gereken 3 basit adımı tamamlamaktır.

Kaygan kaydırıcının takılmasıUygulama No. 1 (Kaydırıcı)

1. Krok - Komut dosyası ve eklenti stillerini bağlama.

html sayfaları.

$(document).ready(function())( $(".sınıfınız").slick(); ));

1 numaralı iş için eklediğiniz koddan sonra değil, html sayfanızın etiketleri arasında bağlantı kurmanız gerekir.

Bu örnekte, tek ana slaytlı atlıkarınca gibi kaygan bir kaydırıcının nasıl kurulacağını gösterdik.

Aşağıda, yukarıda anlatılanların ön kısmına hayran kalacaksınız.

Dipçik No.2 (Atlıkarınca)

Atlıkarıncayı kurmak için, 2 numaralı öğe ve 3 numaralı öğenin biraz değişebilir olması dışında, önceki açıklamada olduğu gibi aynı şeyleri yapmanız gerekir.

2. Croc - kaydırıcının kendisinin HTML kodunu ekleme.

Kaydırıcının kendisini görüntülemek istiyorsanız bu kodun etiketlerin arasına eklenmesi gerekir.

3. Croc – kaydırıcının başlatılması.

$(document).ready(function())( $(".sınıfınız").slick(( sonsuz: doğru, slaytlarToShow: 3, slaytlarToScroll: 3 )); ));

Ve bu uygulamada, kaygan bir kaydırıcıyı atlıkarınca olarak (3 ana slaytla) vikorize ettik ve bunun için bazı eklenti parametrelerini vikorize ettik.

Aşağıdaki örnekte bu atlıkarıncanın çalışmalarına hayran olabilirsiniz.

Toplamda 3 parça elde ettiğinizde ihtiyaçlarınıza uygun bir atlıkarınca veya kaydırıcı seçebilirsiniz. Bu kaydırıcı için çok daha fazla olasılık var. Beslenme konusunda herhangi bir zorluk veya sorununuz varsa yorumlarda sorun, hızlı bir şekilde cevaplamaya çalışacağım.

Geçen haftaki ekipten kaydırıcı komut dosyasını aldık

$ bower ve slick.js

Bunu Google'da da bulabilirsiniz - önce http://kenwheeler.github.io/slick/'e sorun.

Kaydırıcının avantajları: Dokunma olaylarını destekler, bunları telefonunuzda parmağınızla izleyebilirsiniz
- duyarlılığı destekler - slayt sayısını ekran boyutuna göre ayarlayabilirsiniz: büyük ekranlarda 4 slayt, orta boy slaytlarda 2-3, telefonlarda birer birer görüntüleyebilirsiniz

Bower_components klasöründeki komut dosyalarını eklemek iyi bir uygulamadır



Ayrıca Bower programıyla bir betiği güncellerken koddaki sürüm numarasını yeniden yazmanıza gerek kalmayacak, böylece Bower betiklere güncellendiğinde değişmeyecek kalıcı isimler veriyor.

Slick klasöründe bulunan stiller nelerdir: slick.css, slick.less, slick.theme.less, bunları css ile klasöre kopyalayıp eklemek daha iyidir. Bunları yerlerinden mahrum bırakırsanız ve kaydırıcı stilinde değişiklik yaparsanız, komut dosyası güncellendiğinde tüm değişiklikler kaybolacaktır.

Diğer kaydırıcılardan farklı olarak çerçeveler bir listeye değil bloklara yerleştirilir:

1 2 3 4 5 6

Parametresiz tıklayın Parametresiz eklentiye tıkladığınızda, yan tarafta tek slayt ve gezinme okları bulunan basit bir seçeneği seçebilirsiniz.

$(".single-item"). kaygan();

Birden fazla slayt gösterme Uygulamada döngülü kaydırma için “kaygan kaydırıcı” parametrelerini ayarladık, gezinme noktalarının görüntülenmesini etkinleştirdik, görüntülenen ve kaydırılan slayt sayısını belirledik.
$(".multiple-items"). kaygan ((
sonsuz: doğru,
// kaydırıcıyı döngüye alın - kalan slayttan sonra ilki noktalara gider: true,
// etkin slaydı göstermek için kaydırıcının altındaki noktalar
slaytlarToShow: 3,
//ekranda görüntülenecek slayt sayısı SlidesToScroll : 1
//aynı anda kaç slayt yakılıyor
)); Merkezleme modu Merkezleme modunda etkin slayt merkeze yerleştirilir.
$(".center"). kaygan ((
centerMode: doğru,
slaytlarToShow: 3,
});
Merkezi kızak "kaygan merkez" sınıfına sahiptir, bu da farklı şekilde tasarlanabileceği anlamına gelir. Uyarlanabilirlik Kaydırıcıda, ekranın genişliğine bağlı olarak slayt sayısının uyarlanabilir tasarımını özelleştirebilirsiniz. Örneğin ekran genişliği 600 pikselden az olduğunda yalnızca 2 slayt görüntülemeniz ve bunları birer birer karıştırmanız gerekir. Bu saray böyle görünecek

$(".uncycle") . slick(( infinite: false , speed: 350 , // tükenmişliğin akışkanlığını gösterir SlidesToShow: 4 , // görüntülenecek slaytların sayısı SlidesToScroll: 2 , // bir seferde kaç slaytın yanacağını duyarlı: [ ( kesme noktası: 600 , // hangi ekran genişliğini belirtir, ayar ayarlarını etkinleştirmeniz gerekir: (slidesToShow: 2, slaytlarToScroll: 1, sonsuz: true,)))))));

Sorunsuz geçiş Standart kaydırıcı kurulumunda, slaytlarda ani bir değişiklik olur. Ayrıca Slick işlevi, sorunsuz bir slayt değiştirme modu sağlar. Bunu yapmak için, görüntünün yolunun yazıldığı data-lazy özelliğine gitmeniz gerekir. Niteliğin görselin kendisine değil, görsel etiketinin kendisine eklenmesi gerekir. Bu, js kodunun benzersiz olmasını sağlamak içindir. Alternatif takım olabilir

LazyLoad: "talep üzerine"

Trace özelliğini şu şekilde yazın

< img data- lazy = " images/slaid.jpg" >

Böyle bir kaydırıcının özelliği, ekranda değiştirildiğinde adım adım hareket eden tek bir slaytın bulunmasıdır. Etki, görünürlüğün yumuşak bir şekilde artması ilkesine dayanmaktadır. Ardından, ilk slaydın görünürlüğünün %0'dan %100'e değiştiği ve sonraki slaytın görünür hale geldiği ilk saat dilimi seçilir. Böyle bir kaydırıcının komut dosyası şuna benzer

$(".fade") . slick(( sonsuz: doğru, hız: 400, solma: doğru, cssEase: "doğrusal") ) ;

Slick, günümüzde mevcut olan en çok yönlü ve en basit kaydırıcıdır. Kaydırıcının ayarlanması için geniş bir aralık, kaydırıcıların uygulanması kararında tercih edilir, bu da elbette bu kaydırıcının en önemli avantajıdır. Kaygan kaydırıcıyı ayarlama

• Erişilebilirlik – bu parametrenin başlangıç ​​değeri doğru olarak ayarlanmıştır; kaydırıcı için gezinme düğmelerinin (ileri ve geri oklar) bağlantısını belirtir ve düğmeleri nokta olarak gösterir.
• adaptiveHeight – orijinal kabın yüksekliğinin kaydırıcının yüksekliğine bağlı olarak değiştiği tek bir kaydırıcıyla sınırlıdır. Koçanın zihinlerinin hiçbir bağlantısı yoktur.
• otomatik oynat – bir öğretmenin yardımı olmadan slaytların otomatik modda tekrar oynatılmasını ayarlar. Bu parametrenin standart değeri false'tur.
• autoplaySpeed ​​– bu parametre otomatik oynatmanın tamamlayıcısıdır ve slaydın otomatik olarak oynatılmasından önceki süreyi ayarlar. Bunun başlangıç ​​değeri 3000 milisaniyedir.
• oklar – ileri ve geri okları kaydırıcıya bağlar. Ek dış stil tablosunu kullanarak bu okların konumunu ve görünümünü değiştirebilirsiniz.
• asNavFor – ek bir tanımlayıcı ve sınıf kullanarak iki kaydırıcı arasına bir gezinme bağlantısı ekler. Mısır kabuklarında parametre sıfır değerine sahiptir.
• prevArrow – ön slaytta yukarı çıkan standart gezinme okunun görünümünü değiştirmenize olanak tanır.
• nextArrow – önceki parametrenin işlevine benzer, ancak slaytı ileri doğru hareket ettiren bir ok görevi görür.
• centerMode – dahil etme parametresinden başlayarak geçerli slaydı Babanın kabının merkezi olarak sabitler.
• centerPadding – merkez modunda bir akış slaydı görüntülerken (ön parametre), o slayt için, akış slaydının görsel olarak büyütülmesine olanak tanıyan dahili bir dolgu ayarlar.
• cssEase - resimlerin karıştırılması için düzgün veya ani olabilen animasyon sağlar. Standart "kolaylık" değerini getirir.
• CustomPaging – kaydırıcı görünümüne özel bir şablon eklemenizi sağlar.
• noktalar – atlama noktalarını birleştirir ve yıkama istasyonunda kalır.
• sürüklenebilir - ayıyı sıkarken sürüklenebilir slayt olasılığını sağlar. Daha sonra fare imlecini kaydırıcının üzerine getirip sıkıştırıp hareket ettirirseniz slayt ilerleyen slayta geçecektir.
• solma - karıştırma sırasında slaytın solması efektini, bir animasyon efektini yaratır.
• focusOnSelect – görevlere kaydırıcı öğesi üzerinde odaklanır.
• yumuşatma – görüntüler değiştirildiğinde özel bir animasyon modu ayarlamanıza olanak tanır.
• edgeFriction – kalan elemandaki slaytların karıştırılmasını titreştirir. Bu özellikle doğrudur çünkü kaydırıcı döngü yapmamaktadır.
• sonsuz - slayt gösterisini döngüye alır. Bu, slayt gösterisinin geri kalan resimlerini yeniden karıştırdığınızda görünmeye başlayacağı anlamına gelir.
• ilkSlide – slayt gösterisinin başlayacağı resmi belirtir. Daha sonra başlatılacak kaydırıcı ilk görüntüyü seçer.
• lazyLoad – sonraki slaytların yüklenmesi için modu ayarlamanıza olanak tanır. Özelleştirme için kullanılabilen yalnızca 2 değer vardır: "talep üzerine" ve "aşamalı" ve geri kalan değerler özelleştirme içindir.
• PauseOnHover – fare imleci kaydırıcının gövdesi üzerine geldiğinde slaytların kaydırılmasını duraklatır. Bunun nedeni slaytların otomatik olarak karıştırılmasının belirtilmesidir.
• PauseOnDotsHover - fare imleci nokta atlama tellerinin üzerine geldiğinde slaytların kaydırılmasını duraklatır. Bunun nedeni slaytların otomatik olarak karıştırılmasının belirtilmesidir.
• answerTo – tarayıcı penceresinin genişliğini değiştirme tepkisini tetikler. Üç değer mevcuttur: "pencere", "kaydırıcı" veya "min".
• duyarlı – kaydırıcı ayarlarını ekran genişliğine uyarlamanıza olanak tanır. Genişlik sınırlarının tam piksel değerlerine atanması nedeniyle önceki ayarlamadan farklıdır. Mobil cihazlara yönelik uyarlanabilir düzen için Vikorist.
• SlidesToShow – görünür alanda görüntülenecek resim sayısını ayarlamanıza olanak tanır. İlk başta bir slayt gösterilir ve diğer değerler değiştirilebilir.
• SlidesToScroll – geçiş yaparken kaç resmin değiştirilmesi gerektiğini kaydırıcıya bildirir.
• hız – slaytların karışmasına neden olan hızı sabitler.
• değişkenWidth – kaydırıcı kaplarının genişliğini görüntülenen dış görünüm resminin genişliğine uyarlar.

GÜNCELLEME: Bu ders için bir kaydırıcı oluşturmaya çalıştım ve bunun pek iyi olmadığı ortaya çıktı.
Daha fazlasını ekleyeceğim.

1. Buradaki depoya göz atın https://github.com/kenwheeler/slick
2. index.html dosyasında, açılan dosyadan önce kaydırıcı stillerini ekleyin:

Kapatmadan önce komut dosyalarını ekliyoruz

Bu kaydırıcı yazı tipi gerektirecektir. Slider klasöründeki fonts klasörü projenin css klasörüne yerleştirilmelidir.
Kaydırma klasöründe küçük ajax-loader.gif dosyasını bilmeniz ve slick-theme.css dosyasına yenisinin yolunu yazmanız gerekir.

3. Artık kaydırıcı sarmalayıcı divaya bir sınıf atanmıştır; örneğin, birden fazla öğe
Ve script.js dosyasına kodu yazıyoruz

$(document).ready(function())(
$(".multiple-items").slick((
otomatik oynatma: yanlış,
otomatik oynatma Hızı: 6000,
oklar: doğru,
sonsuz: doğru,
noktalar: doğru,
Merkez Modu: doğru,
slaytlarToShow: 3,
slaytlarToScroll: 1
});
});

4. Kaydırıcı zaten çalışıyor. Yalnızca okların ekseni görünmüyor çünkü kaydırıcının sınırlarının arkasında kötü bir koku var ve kaydırıcının genişliği tüm ekranı kaplıyor. Oklar slick-theme.css dosyasında bulunur ve girişler, oklar kaydırıcının ortasında değil ortasında yer alacak şekilde değiştirilir.

5. Güzel. Şimdi, benim görüşüme göre, kaydırıcının merkezi kaydırıcısı rahatsız edici olmaktan suçlu.
kodda yazmanız yeterli olanı yazın

$(".middle").slick((
Merkez Modu: doğru,
//Akış kaydırağını ortalayın
centerPadding: "50 piksel",
// biraz daha hassas bir slayt
slaytlarGösterilecek: 3
//inceleme için 3 slayt görünür
});

Merkezi kaydırıcının boyutunu artırmak için. Gerçekte bu yöntem işe yaramıyor
Merkezi slayt şık bir şekilde geliştirildi
.slick-center(
arka plan rengi: #8cc63f;
dönüşüm: ölçek(1.3);
}

Herkese merhaba ve bugün size çok havalı ve basit bir kaydırıcıdan bahsediyorum - şık.

Siteye git http://kenwheeler.github.io/slick/ Burada kaygan kaydırıcı robotun birçok uygulamasını bulabilirsiniz. Bu kaydırıcının aslında birçok farklı etkisi var ve aynı zamanda fareyle de kaydırılıyor. Tobto. Kaydırıcıdaki herhangi bir öğeye farenin sol tuşuyla tıklayabilir ve fareyi kullanarak kaydırıcıyı sol veya sağ elle geri sarabilirsiniz. Bu işlev tamamen bilgisayarlar için değil, akıllı telefonlar ve tabletler için de faydalıdır; yine de!

Bu nedenle, bağlanmak için dosyaları bu siteden indirin. Artık jquery kullanarak HTML oluşturabilir ve gerekli bileşenleri ekleyebiliriz, çünkü... Vikory kaydırıcısı, çalışması için bu kütüphaneyi içerir.

içeriğiniz
içeriğiniz
içeriğiniz

Stilleri bağlayın

Komut dosyalarını etkinleştiriyorum

Kaydırıcıyı başlatmak için komut dosyası etiketine aşağıdakini yazın:

$(".sınıfınız").slick((
ayar adı: ayar değeri
});
});

Tamamlandığında, html dosyanız şuna benzer:

Kaygan

içeriğiniz
içeriğiniz
içeriğiniz

$(document).ready(function())(
$(".sınıfınız").slick((
ayar adı: ayar değeri
});
});

Bu kaydırıcıda kendi kendinize ayarlayabileceğiniz bir dizi ayar bulunur. Bunların hepsini aynı sitede, sayfanın altındaki tabloda bulabilirsiniz. Nesnedeki başlatma talimatlarını ayarlayın.

$(document).ready(function())( $(".sınıfınız").slick(( autoplay: true; )); ));

Slaytları otomatik olarak yakabilecekleri söylenenlerin kıçına.

Ayrıca gördüğünüz gibi kaydırıcının kurulumu ve yapılandırması oldukça kolay ancak harika konuşmalar yapmanızı sağlıyor. Saygınız için ve İsveçliye teşekkür ederiz!

kaygan - atlıkarıncanın işlevselliğine çeşitli şekillerde daha kapsamlı bir çözüm. Demolar, tipik seçenekler ve yayınlar görüntülenebilir/elde edilebilir.

Başvurunuzu gönderin

Slick'in temel konfigürasyonu bir dizi komut dosyası, bir dizi stil ve basit bir yazı tipi içerir. Kesilmiş sürümü kullanıyorum:

• slick.min.js (küçültme)
• slick.css (+ stiller temizlenebilir)
• slick-theme.css (+ stiller temizlenebilir)

Çanta için stiller tek bir stilde birleştirilebilir.
Kaygan yazı tipini daha büyük FontAwesome ile değiştiriyorum

Temel atlıkarınca Tekrarlama bloğu

Atlıkarıncanın ana işlevi div class = "multiple-items" tarafından ayarlanır. div class="carousel" yalnızca atlı karıncanın girişlerini tanımlamak için gereklidir.

Komut dosyası başlatma komut dosyası

$(document).ready(function() ( $(".multiple-items").slick(( //infinite: true, //scrolling autoplay: true, SlidesToShow: 3, SlidesToScroll: 3 )); ) );

Slick-slider (genişlik: %100; float: sol;).slick-slide (imleç: işaretçi;).multiple-items .slick-slide (kenar boşluğu: 0 15px;).carousel (dolgu: %0 3; float: left;width:100%;box-sizing:border-box;) /* woocommerce ürünleri için */ .carousel .woocommerce ul.products li.product (marj: 1em 0 1,992em 0; genişlik: %100;)

Woocommerce ürünleri için atlıkarınca

Güncellenmiş versiyon

Atlıkarınca için ürünleri sergiledikten birkaç dakika sonra (! Evrensel bir çözüm değil, farklı düzen seçenekleri farklı görünebilir):

Atlıkarınca komut dosyalarını kullanırken düzen bozulmaları meydana gelir. Akış düzeni içinde atlıkarıncayı kırpan koçan stilleri oluşturabiliriz:

Çoklu öğeler (ekran: flex !important; flex-wrap: sarma; kenar boşluğu: 25 piksel;).multiple-items img ( -moz-backface-visibility: görünür; -webkit-backface-visibility: görünür; backface-visibility : görünür; ) .slick-list (kenar boşluğu: 0 -1px 0 0 !important; dolgu: 0 1px 0 0 !important; genişlik: %100;) .slick-track (border: katı #e9eaec; border-width: 0 0 0 1px; ekran: esnek !önemli; dolgu-alt: .1rem;).carousel .product ( kenarlık: katı #e9eaec; kenarlık genişliği: 1px 1px 1px 0; arka plan: #fff; : yok, metin hizalama: merkez; konum: göreceli; kenar boşluğu-alt: -.1rem; yükseklik: otomatik; ) .multiple-items > .product (genişlik: %25;

Görüntünün arka yüzünü belirterek güç verin, çünkü Koridor etiketlerinin kokusunu geri sararken gizliden mahrum bırakmak istiyorsanız.

Atlıkarınca uyarlanabilirliği

Komut dosyası farklı ekran boyutları için yapılandırılabilir. Bu amaçla, duyarlı parametreler ayarlarda belirtilir.

Yanıt veren: [ ( kesme noktası: 1280, ayarlar: ( SlidesToShow: 4, SlidesToScroll: 4, ) ), ( kesme noktası: 1024, ayarlar: ( SlidesToShow: 3, SlidesToScroll: 3, ) ) ( ( kesme noktası: : 2, SlidesToScroll: 2) ) ), ( kesme noktası: 480, ayarlar: ( slaytlarToShow: 1, slaytlarToScroll: 1 ) ) ]

Veya ayrı olarak açın - ayarlar: "kayganlaştırmayı kaldır"

Kaygan kaydırıcı

Geri kalan zamanlarda ana kaydırıcıyı kaygan temel alarak oluşturuyorum. Bu büyük bir sorun değil; sayfaya tıklandığında tüm slaytlar birkaç saniye boyunca görüntüleniyor ve ardından katlanıyor. Bunu şu şekilde gizledim:

Bir slayt dışında her şey görünmez:

Slick-track > div:nth-child(2) img (görüntüleme: blok !important;) #index-slider img (görüntüleme: yok;)

Ve sayfa çekildiğinde başka bir şey duyulacak:

JQuery(document).ready(function())( jQuery("#index-slider img").css("display", "block"); ));

Slaytların iyileştirilmesi

Slick, başka bir kullanışlı işlev olan lazyload()'u ekler. Betiğe yalnızca lazyLoad: 'ondemand'ın gücünü eklemeniz gerekir. Görüntünün ön planını değiştiriyorum:

Ya da şöyle de söyleyebilirsiniz:

">

Slaytların hemen büyüleyici hale gelmesi için lazyLoad'un gücünü yazmak gerekir: 'progressive'

Standart görsel tam olarak düzgün çalışmıyor, lazyload bağlantısını kontrol etmenizi öneririm.

Kaydırıcının mobil versiyonu
Mobilden daha fazlasını alabilirsiniz. sürümde, kaydırıcının yüksekliği görüntünün kenarlarının görünmesini sağlayacak ve görüntü daha büyük olacaktır:

@media ekranı ve (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;).slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (yükseklik: %100; nesneye sığdırma: kapak;))

nesne uyumu: kapak; - Çoğu tarayıcı tarafından desteklenen güçlü CSS 3

Galeri

Son zamanlarda sitelerden birinde galerideki Slick vikoristan'a saygı kazandım. Buradaki tuhaflık, galeri görüntülerinin ekranın kenarlarına kadar uzanmasıdır (tüm ekran boyunca siteden bir mil uzakta).

Bunu uygulamak için kapsayıcıya (.s2) bir kaydırıcı (#index-slider) yerleştirmeniz ve aşağıdaki stilleri eklemeniz gerekir:

S2 (taşma: gizli; ekran: blok;) #index-slider (maks. genişlik: 1000 piksel; kenar boşluğu: 0 otomatik;) .s2 .slick-list (taşma: görünür;) #index-slider .slick-slide img ( maksimum genişlik: 800 piksel; kenar boşluğu: 0 otomatik;)

veya daha da basit:

Böyle bir galeri oluşturmak için 2 stil girmeniz yeterlidir:

#index-slider (maks. genişlik: 1280 piksel; kenar boşluğu: 0 otomatik;) #index-slider .slick-list (taşma: görünür;)

Dizüstü bilgisayarlar