ilaçlama
Bootstrap kullanarak kaydırıcı oluşturma. Birkaç kolay adımda kendi önyükleme kaydırıcınızı nasıl oluşturabilirsiniz? Önyükleme 3 için duyarlı döngü

Bootstrap kullanarak kaydırıcı oluşturma. Birkaç kolay adımda kendi önyükleme kaydırıcınızı nasıl oluşturabilirsiniz? Önyükleme 3 için duyarlı döngü

Twitter Bootstrap 3, içerik yönetim sistemlerini geliştirmek ve sürdürmek için en iyi CSS çerçevelerinden biridir. Bootstrap ile, Twitter Bootstrap ızgara sistemini (ızgara düzeni) kullanarak kolayca bloglar veya portföyler oluşturabilirsiniz. Birçok CMS sisteminin merkezinde, genellikle "Slider" (Carousel) adlı temel bir bileşene sahibiz. teklifler, haberlere bağlantılar veya blogdan son makaleler. Bu yazıda, Twitter Bootstrap 3'te Carousel bileşenini kullanarak nasıl kaydırıcı oluşturacağımıza bakacağız.

Bootstrap 3 Carousel Twitter Bileşenine Giriş

Karusel bileşeninin işaretlemesi şöyle görünür:

>
>

...
>
>
...
>

>
>

>
>
>

Yukarıdaki koddan Bootstrap 3 kaydırıcısının birkaç bölüme ayrıldığını görebiliriz:

İşaretçiler
kaydırıcı içerik
Kontroller

Bir öğeyi dönüştürmek için div kaydırıcıda sınıf adlarını ekliyoruz: atlıkarınca ve slayt. Sınıf atlıkarınca bir "atlıkarınca" efekti yaratır, yani slaytları bir daire içinde değiştirir. Sınıf slayt sağdan veya soldan kayan bir animasyon ekler. İşaretçiler, kaydırıcının altındaki küçük dairelerdir, slaydın mevcut konumunu ve slayt sayısını gösterirler. İşaretçiler, sıralı bir liste kullanılarak oluşturulur.

>
>

Sıralı bir listenin bir sınıfı vardır atlıkarınca göstergeleri alt öğeleri küçük dairelere dönüştüren. Her eleman liözniteliğe sahip olmalı veri hedefiüst kapsayıcı kimliğiyle. özelliğine de sahip olmalıdır. veri kaydırma benzersiz bir sayısal değere sahip, belirli bir slayda atıfta bulunmak için değerler "0" ile başlamalıdır.

...
>
>
...
>

Bir sınıfa sahip her öğe öğe iki alt bölümü vardır: resim ve atlıkarınca yazısı. Görüntü, slayt için arka plan olarak kullanılır. Sınıflı öğe atlıkarınca yazısı resmin üzerinde konumlandırılır ve slaydın başlığı olarak kullanılır. İçeri atlıkarınca yazısı, ekleyebiliriz

veya etiketler, hatta her ikisi.

Kontrol sol ve sağ oklarla yapılır, slaytları manuel olarak değiştirmek için kullanılırlar.

"glyphicon glyphicon-chevron-sol"> >
>

"glyphicon glyphicon-chevron-sağ"> >
>
>

İki öğe olmalıdır: her yön için bir tane. İlk eleman sahip olacak açıklık sınıfları olan öğe glyphicon glyphicon-chevron-sol, sol ok simgesi olan ve ikinci öğe sınıflara sahip olacak glyphicon glyphicon-chevron-sağ, bu bir sağ ok. Bootstrap'te simgeleri görüntülemek için resimler yerine yazı tiplerini kullanabiliriz.

Bu kadar! Siteniz için başarıyla bir kaydırıcı oluşturdunuz. Ayrıca, tek bir JavaScript kodu satırı yazmadınız, ancak bootstrap.js sizin için her şeyi yaptı.

atlıkarınca ayarları

Kaydırıcıyı daha fazla özelleştirmek için birkaç özellik ekleyebilirsiniz. veri-* döngünün ana kapsayıcısı için.

"veri aralığı", geçiş slaytları arasındaki zaman aralığını belirtmek için kullanılır. Sayısal bir değer alır ve sayı milisaniye cinsinden olmalıdır.
"veri duraklatma", duraklatma olayının ne zaman tetikleneceğini belirlemek için kullanılır. Örneğin, şuna eşit olduğunda: " üzerine gelin", fare kaydırıcının üzerine geldiğinde slayt değiştirme durur.
"veri sarma" bir boole özniteliğidir ve slayt listesinin sonuna ulaşıldığında slaytlar arasında geçiş yapmaya devam edilip edilmeyeceğini belirlemenizi sağlar.

jQuery ile özelleştirme

jQuery ve data-* özniteliklerini kullanmak isterseniz Bootstrap, JavaScript ile başlatmaya izin verir. Bunu yapmak için aşağıdaki kodu yazabilirsiniz:

$(".carousel" ) .carousel() ;

Karusel ayarları, seçenekler kullanılarak ayarlanabilir. Örneğin:

$(".carousel")
Aralık: 2000
duraklat: "vurgulu" ,
sarma: doğru
} ) ;

Aşağıdaki kodu kullanarak kaydırıcı olaylarını manuel olarak da tetikleyebilirsiniz:

.carousel("duraklat") // duraklat
.carousel("döngü") // slaytları etkinleştir
.carousel(3) // dördüncü slaydı göster
.carousel("prev") // önceki slaydı göster
.carousel("sonraki") // sonraki slaydı göster

Yukarıdaki yöntemler, kaydırıcının normal çalışmasını kontrol etmek için herhangi bir JavaScript kodundan çağrılabilir. Standart oklar yerine kendi düğmelerimi göstermek istiyorsam önceki ve sonraki yöntemleri çok faydalı buluyorum. Özellikle de atlıkarınca düzeninin dışındayken.

Çözüm

Bu makale, binlerce satır JavaScript kodu yazmadan kaydırıcı oluşturmayı öğrenmek isteyenler için faydalı olacaktır. Hiç şüphesiz, bu geliştirme hızını artıracaktır. En önemlisi, bu çözüm tarayıcılar arasıdır, bu nedenle eski tarayıcılarda çalışması için saçınızı yolmanıza gerek yoktur.

Herhangi bir sorunuz varsa, lütfen

Döngü öğeleri için slayt gösterisi bileşeni - görüntü karuseli veya metin slaytları.

Nasıl çalışır

Carousel, CSS 3D dönüşümlerine ve bazı JS'lere dayalı bir dizi içeriği görüntülemek için bir slayt gösterisidir. Metin, resimler veya normal işaretleme ile çalışır. Sonraki/önceki düğmelerini de destekler.

Örnek vermek

Döngü, slayt içeriğinin boyutunu otomatik olarak normalleştirmez. Bu nedenle, içeriklerini doğru boyuta getirmek için ek yardımcı programlara ihtiyacınız olabilir. Döngüler önceki/sonraki düğmelerini desteklediği sürece, bunların açıkça eklenmesine gerek yoktur. Bunları kendiniz ekleyin ve özelleştirin.

Özellikle bir sayfada çok sayıda döngü kullanıyorsanız, esneklik için .carousel sınıfına benzersiz bir kimlik verin.

Yalnızca slaytlar

Burada yalnızca slaytlar içeren bir döngü örneği verilmiştir. Karusel görüntülerde .d-block ve .img-fluid sınıflarının varlığına dikkat edin - bunların amacı, tarayıcının varsayılan görüntü hizalamasını önlemektir.

Kontrollerle

Önceki/sonraki düğmeleri ekler:

göstergeli

Karusele kontrollerin yanı sıra göstergeler de ekleyebilirsiniz.

İlk etkin öğeyi gerektirir

.active sınıfının slaytlardan birine eklenmesi gerekir, aksi takdirde döngü görünmez.

yazıtlı

.carousel-item sınıfının herhangi bir carousel öğesine bir .carousel-caption sınıfı öğesi ekleyerek slaytlarınıza resim yazıları ekleyin. Etiketleri, görüntüleme yardımcı programlarını kullanarak daha küçük cihazlarda gizlemek kolaydır. Başlangıçta .d-none sınıfı ile gizlenirler ve .d-md-block sınıfı ile orta cihazlarda tekrar gösterilirler.

İlk slayt etiketi

Nulla vitae elit libero, bir pharetra augue mollis interdum.

İkinci slayt etiketi

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Üçüncü slayt etiketi

En iyi komut dosyası, vel scelerisque nisl consectetur.

"carousel-caption d-none d-md-block">

...

kullanım

Nitelikler aracılığıyla

Data-slide özelliği, slaydın mevcut konumuna göre konumunu değiştiren prev veya next değerlerini alır. Veya dizindeki slayda gitmek için data-slide-to kullanın, örneğin 2: data-slide-to="2" , slayt dizinleri 0'dan başlar.

carousel animasyonunu oluşturmak için data-ride="carousel" özelliği kullanılır. JavaScript aracılığıyla açık döngü başlatma ile birleştirilemez.

JavaScript aracılığıyla

Döngüyü manuel olarak arayın:

$(".carousel"). atlıkarınca()

parametreler

Parametreler, nitelikler veya JavaScript aracılığıyla iletilebilir. Nitelikleri kullanmak için, parametre adını data- öğesine ekleyin, örneğin: data-interval="" .

İsim	Bir çeşit	Varsayılan olarak	Açıklama
Aralık	sayı	5000	Otomatik slayt değişiklikleri arasındaki gecikme süresi. Yanlışsa, döngü slaytları otomatik olarak değiştirmez.
tuş takımı	mantıksal	doğru	Döngünün klavye olaylarına yanıt verip vermeyeceği.
Duraklat	dizi \| mantıksal	üzerine gelin	"Hover" ayarlanmışsa, slayt değişikliği mouseenter ile yavaşlatılır ve değişiklik mouseleave ile başlar. Yanlışsa, karuselin üzerine gelmek slaytların değişmesini engellemez. Dokunmayla etkinleştirilen cihazlar: "hover" - dokunmatik uçta iki aralık için duraklatın (kullanıcı karuselle etkileşimi bitirdiğinde), ardından slaytları tekrar değiştirin. Bu davranışın yukarıda açıklanan fare davranışına ek olduğunu unutmayın.
sürmek	astar	YANLIŞ	Kullanıcı tarafından yapılan ilk manuel slayt değişikliğinden sonra carousel slaytlarını otomatik değiştir. Karusel - yüklemeden sonra otomatik değiştirme etkinleştirilirse.
paketlemek	mantıksal	doğru	Atlı karıncanın düzgün mü yoksa gizli bir şekilde mi değişeceği.

Yöntemler

Eşzamansız Yöntemler ve Geçişler

Tüm API Yöntemleri eşzamansız ve başlat geçiş. Geçiş başladığında onları çağıran işleve geri döndürülürler, ancak sonuna kadar. Artı, bir bileşen üzerinde bir yöntem çağırmak, geçişin yürütülmesi yoksayılacak.

.carousel(seçenekler)

Karusel nesnesini belirtilen seçeneklerle başlatır ve slayt geçişini başlatır.

$(".carousel"). atlıkarınca (( aralık : 2000 ))

.carousel("döngü")

Karusel slaytlarını soldan sağa değiştirir.

.carousel("duraklat")

Slayt geçişini durdurur.

.carousel(sayı)

Kaydırır, belirli bir noktaya kadar kaydırır (0 tabanlı, satırlara benzer).

.carousel("önceki")

Önceki slayda kaydırır. "Hedef" öğe gösterilmeden önceki işlev çağrısının değerini döndürür(yani slid.bs.carousel olayı tetiklenmeden önce).

.carousel("sonraki")

Bir sonraki slayda. "Hedef" öğe gösterilmeden önceki işlev çağrısının değerini döndürür(yani slid.bs.carousel olayı tetiklenmeden önce).

.carousel("elden çıkarın")

Öğenin karuselini yok eder.

Gelişmeler

Bootstrap'teki carousel, işlevselliği uygulamak için 2 olaya sahiptir. Her iki olay da aşağıdaki ek özelliklere sahiptir:

yön: Slaytların hareket ettiği yön ("sol" veya "sağ").
ile ilgiliTarget: "Flicked" slaydın konumuna hareket eden DOM öğesi.
from: Geçerli slaydın dizini
to: Bir sonraki slaydın dizini

Tüm döngü olayları doğrudan döngüde tetiklenir (ör.

$("#myCarousel" ). on ("slide.bs.carousel" , function () ( // bir şeyler yap… ))

Bootstrap çerçevesinin öğelerinden yeni bir şeyler öğrenmek isteyen herkese iyi günler. Bugünün konusu Bootstrap Carousel kaydırıcısı. Bu, hemen hemen her web sitesinde bulunan popüler bir öğedir.

Bu nedenle, size bir Carousel kaydırıcısının nasıl oluşturulacağını, bunun için hangi yerleşik araçların gerekli olduğunu, parametreleri nasıl yapılandırabileceğinizi anlatacağım ve makalenin sonunda belirli bir örneğin uygulanmasını göstereceğim. Ve şimdi işe koyulun!

Bootstrap Carousel Eklenti Araçları Hakkında Her Şey

Yeni teklifler, ürünler, mevcut promosyonların bir listesi, uygun portföy görüntüleme vb. sunmak için bir atlıkarınca fotoğraf galerisi kullanılır. Bu nedenle, bugün bu eklenti ile çalışabilmek önemlidir. resmi ad Bootstrap Carousel Eklentisi.

Açıklanan öğenin Internet Explorer 9 ve önceki sürümlerde uygun şekilde desteklenmediğine hemen dikkat edilmelidir. Ancak, harika çalışıyor (WordPress, Joomla! ve diğer motorlar için çerçeveyi bağlamak oldukça basittir).

Tüm parametrelerle kolayca çalışmak ve kaydırıcıyı hızlı bir şekilde özelleştirmek için Bootstrap 3'ün ana yerleşik sınıflarını öğrenmeniz gerekir.

Sınıf	amaç
atlıkarınca	Karusel kaydırıcısının kendisini oluşturur.
slayt	Slaytlar arasında geçiş yaparken css ile animasyon ve geçiş efekti ekler. Sınıf isteğe bağlıdır.
atlıkarınca göstergeleri	Her görüntünün altına, tabiri caizse, herhangi bir görüntüye hızlı bir şekilde geçebileceğiniz küçük noktalar şeklinde bir kontrol paneli ekler. Sınıf isteğe bağlıdır.
atlıkarınca-iç	Slaytları kendilerini galeriye ekler.
atlıkarınca yazısı	Grafik dosyalarının imzalanmasından sorumludur. İsteğe göre dahil edilebilir.
öğe	Her slayt için bir içerik kümesi tanımlar.
Sağ/sol carousel kontrolü	Çerçeveler arasında geçiş yapmak için isme göre sağ ve sol düğmeler ekler.

Ek olarak, bu tür galerilerin düzeninin diğer özelliklerini de bilmekte fayda var.

Yeni başlayanlar için Carousel bloğunun kendisinin oluşturulması bir bildirim gerektirir id="myCarousel" ikincisinin doğru çalışması için.

Aynı div'de, özelliği kaydetmeniz gerekir. data-ride="atlıkarınca" animasyonun sayfa yüklenir yüklenmez yüklenmesi gerektiğini belirtir.

Şimdi göstergelere geçelim. Her li etiketinin birkaç özelliği olmalıdır: veri hedefi belirli bir Karuselin kimliğine işaret eden ve veri kaydırma, hangi çerçeve numarasına gidileceğini belirler.

Görüntüleri ileri veya geri değiştiren düğmelere gelince, bunları uygulamak için, niteliği kaydetmeye değer veri slaydı"önceki" veya "sonraki" anahtar kelimesiyle.

Artık, kaydırıcının görüntüsünü belirli bir şekilde düzenleyebileceğiniz çerçevenin temel öğelerini biliyorsunuz. Doğal olarak, otomatik çerçeve kaydırmayı, resim yazılarını veya yan düğmeleri devre dışı bırakabilirsiniz.

Alternatif kontrol mekanizmaları

Bootstrap'in yerleşik sınıflarını kullanmanın yanı sıra, . Dolayısıyla, JS'de yalnızca $.carousel () aracı aracılığıyla aynı eylemleri uygulayan birçok yöntem ve seçenek vardır. Bunlar arasında aşağıdaki gibi listelenebilir:

bilgi testi

Pekala, şimdi materyali nasıl öğrendiğinizi kontrol etme ve edindiğiniz bilgileri pekiştirme zamanı. Bunu yapmak için, "Atlıkarınca" yaratma yolunda gerçekleştirmeniz gereken her eylemi açıklayacağım.

Öncelikle gerekli komut dosyalarını ve stilleri eklemeniz gerekir. Tercih ederim, ancak çerçeveyi resmi web sitesinden indirebilirsiniz ( http://getbootstrap.com/) ve indirilen dosyaları proje dizininin kök dizinine yerleştirin.

Benimle aynı fikirdeyseniz, belgenin başlığına şunu yazıyoruz:

1 2 3

İkinci yöntemin destekçisiyseniz, bağlantının ilk kısmı yerine dosyanın yolunu eklemeniz gerekir.

Şimdi kaydırıcıda uygulamaya devam ediyor. Bunu yapmak için, edindiğiniz bilgileri kullanın ve gerekli kod parçalarını sırayla yazın:

açıklanan araçtan sorumlu ortak bir bloğun açılması;
kontrol göstergelerini belirlemek için bir blok;
slaytların kendileri için blok;
yan düğmelerin uygulanması.

Yalnızca ikinci ve son div'ler bu listeden çıkarılabilir.

Artık kesinlikle kod yazmaya hazırsınız.

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 73 74 75 76

Dönen galeri örneği

/*Ana bloğu oluştur*/

/*Slaytları doldurma*/

Dönen galeri örneği

/*Ana bloğu oluştur*/

/*Görüntü sayısına göre 4 gösterge belirtin*/ /*Slaytları doldurun*/ /*Yan kontrol düğmeleri oluştur*/

Görüntü öğelerini veya dönen metin slaytlarını yinelemek için bir slayt gösterisi bileşeni. Sayfa Görünürlük API'sini destekleyen tarayıcılarda, web sayfaları kullanıcı tarafından görülemediğinde (örneğin, tarayıcı etkin olmadığında, tarayıcı penceresi simge durumuna küçültüldüğünde, vb.) döngü slaytları değiştirmekten kaçınacaktır. Yuvalanmış döngüler desteklenmez.

Örnek vermek

Animasyonlar Internet Explorer 9'da desteklenmez

Önyükleme animasyon için özel olarak CSS3 kullanır, ancak Internet Explorer 9 gerekli CSS özelliklerini desteklemez. Bu nedenle, bu tarayıcıyı kullanırken slayt geçiş animasyonu yoktur. Geçişler için kasıtlı olarak jQuery tabanlı yedekleri dahil etmemeyi seçtik.

İlk aktif eleman gerekli

.active sınıfı slaytlardan birine eklenmelidir. Aksi takdirde karuseller görünmez.

Ek başlıklar

Herhangi bir .carousel-item öğesindeki .carousel-caption öğesiyle slaytlarınıza kolayca altyazı ekleyin. Oraya fazladan HTML yerleştirin ve otomatik olarak hizalanacak ve biçimlendirilecektir.

ilk slayt etiketi

Nulla vitae elit libero, bir pharetra augue mollis interdum.

ikinci slayt etiketi

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

üçüncü slayt etiketi

En iyi komut dosyası, vel scelerisque nisl consectetur.

...

Erişilebilirlik sorunu

Karusel bileşeni, erişilebilirlik standartlarını hiç karşılamıyor. Uyumluluğa ihtiyacınız varsa, lütfen İçeriğinizi sunmanın başka yollarını düşünün.

kullanım

Birden fazla döngü

Döngüler, düzgün çalışması için döngüyü yönetmek üzere en dıştaki kapsayıcıda (.karusel'de) bir kimliğin kullanılmasını gerektirir. Birden çok döngü eklerken veya döngü kimliğini değiştirirken ilgili kontrolleri güncellediğinizden emin olun.

Bu niteliklerle

Veri özniteliklerini kullanarak karuselin konumunu kontrol etmek kolaydır. data-slide, kaydırıcının konumunu geçerli konumuna göre değiştiren prev veya next tarafından talep edilebilir. Alternatif olarak, ham karusel slaydının dizinini 0'dan başlayan dizin tanımlarıyla slaydın konumunu kaydıran data-slide-to="2" konumuna geçirmek için data-slide-to'yu kullanın.

data-ride="carousel" özniteliği, döngüyü sayfa yüklemeden başlayarak bir animasyon olarak belirlemek için kullanılır. Aynı döngünün (gereksiz yere) açık JavaScript başlatmasıyla birlikte kullanılamaz.