Jquery otomatik kaydırmalı atlıkarınca. Bootstrap kullanan carousel. BxSlider duyarlı jQuery içerik kaydırıcısı

Son zamanlarda biraz sınırlayıcı olan bir CMS kullanan bir site üzerinde çalışıyoruz. Ekleyebiliriz yerel HTML ve siteye CSS, ancak JavaScript değil.

Çalıştığımız projelerde bir atlıkarınca vardı. CSS animasyonlarını ve dönüştürme özelliğini kullanarak bunu nasıl yapabileceğimize dair fikirlerimiz vardı, ancak bu, atlı karıncanın otomatik olarak kaydırılmasını sağlar ve buna izin vermez kullanıcı girişiannelerin ihtiyacı yoktu. Biraz düşündükten sonra, karuselimizin z-endeksini ve opaklığını değiştirmek için mutlak konumlandırma ve: target sözde-seçici kullanan bir çözüm geliştirdik.

Bunu oluşturalım!

Yapısı

Atlı karıncamızın yapısı şuna benzer: Atlı karıncaya boyutu veren bir ana div.carousel-wrapper'ımız var. Kabuğumuzun içinde span.hidden-target öğeleriyle benzersiz tanımlayıcılaratlıkarınca kontrollerimiz ve atlıkarınca öğelerinin her birinin içeriğini içeren div.carousel-item öğelerimiz için hedef görevi gören.

Div.carousel-item öğelerinin her biri içeriğe ve atlı karınca öğeleri arasında geçiş yapmak için kullandığımız a.arrow-prev ve a.arrow-next olmak üzere iki bağlantıya sahip olacaktır.

Çünkü bizim bireysel unsurlar atlı karıncalar konum: mutlak olacaktır (bunları üst üste istifleyebiliriz), div.carousel-wrapper'ın yüksekliğini manuel olarak ayarlamamız gerekir. CSS'yi harici stil sayfamıza yüklemeyi deneyeceğiz, ancak atlı karıncamızı kullanılabilir ve ölçeklenebilir hale getirmek için bazı noktaları yazmamız gerekecek.

Daha renkli hale getirmek için iki div.carousel-item öğelerimizden bir arka plan resmi ayarlamak için CSS de kullanacağız, ancak işaretlememizi daha okunaklı hale getirmek için bunu aşağıda tutacağız.

Hepsi HTML. Şaşırtıcı derecede hafif. CSS'de (bu durumda SCSS), sihrin gerçekleştiği yer burasıdır.

Stilleri

Tamamen işlevsel ve% 100 HTML ve CSS olan bir atlı karıncaya sahipsiniz! Üç öğeli bir döngü oluşturduk, ancak öğeleri eklemeye devam edebilir, daha fazla hedeflenen öğe eklediğinizden ve bağlantılarınızı doğru şekilde bağladığınızdan emin olabilirsiniz.

/ * Atlı karıncamızın başladığı yer, ana sarmalayıcı göreceli olarak konumlandırılır, böylece kesinlikle konumlandırılmış öğelerimiz doğru yerde olur. Ok bağlantılarını kullanarak aralarında geçiş yaptığımızda görünmeleri için onları varsayılan olarak saydam yapıyoruz. * / .carousel-item (position: absolute; top: 0; bottom: 0; left : 0; sağ: 0; dolgu: 25px 50px; opaklık: 0; geçiş: tümü 0.5 sn'lik kolay giriş; / * Yukarıda 50 piksel sol, sağ dolguyu fark ettiniz mi? Okumuzu konumlandırabilmemiz için bağlantılar! Her biri 50 piksel genişliğinde olacak. Ayrıca, bağlantıların oklara benzemesi için arka plan resmine sahip boş bağlantılar kullanıyorum. Ok bağlantılarınızın sadece şeffaf olmaması için bu URL'yi gerçek bir URL ile değiştirdiğinizden emin olun dikdörtgenler. * / .arrow (konum: mutlak; üst: 0; ekran: blok; genişlik: 50px; yükseklik:% 100; -webkit-dokunun-vurgulama-rengi: r gba (0,0,0,0); background: url ("/ carousel-arrow-dark.png")% 50% 50 / 20px yineleme yok; / * Sola geri gitmek için okumuzu koyalım. * / & .Arrow-prev (left: 0;) / * Ve sağda ilerlemek için okumuz. Aynı ok resmini kullandığım için her iki okum da, bunu doğru yönü gösterecek şekilde 180 derece döndürüyorum * / & .arrow-next (sağ: 0; -webkit-transform: rotate (180deg); transform: rotate (180deg); )) / * Bu atlıkarınca öğelerinin karanlık bir resim arka planında nasıl göründüğünü gerçekten çok seviyorum, bu nedenle, bir .carousel-item div "light" sınıfına sahipse, metin rengini beyaz yapacağız ve beyaz bir ok ve a koyu gri bir. Yine, bu ok görüntüsünün * / & .light (color: white; .arrow (background: url ("/ carousel-arrow-light.png")% 50% 50 / 20px no-again;)) / * Daha küçük cihazlarda okları yeniden boyutlandırmak için bazı medya sorgularını kullanalım. * / @Media (max-width: 480px) (.arrow, & .light .arrow (background-size: 10px; background-position: 10px 50 %;))) / * Atlama bağlantısı hedeflerimizi gösterelim: yok; böylece, bir kullanıcı ok bağlantılarımızdan birini tıkladığında tarayıcının atlı karıncanın üstüne atlamasını sağlamıyoruz. Bu özellik seçici, kimliği "hedef-öğe" ile başlayan tüm öğeleri hedefleyecektir. * / (display: none ;) / * Yukarıda, tüm atlıkarınca öğelerimizi şeffaf yaptık, bu da sayfa yüklemede, atlı karıncamızın olması gereken yerde büyük bir boş kutumuz olacağı anlamına geliyor. Onun yerine görüntülenmesi için ilk öğemizin opaklığını 1 olarak ayarlayalım. Ayrıca, diğer karusel öğelerinin üstüne yerleştirilmesi için z-endeksini 2 olarak ayarlıyoruz. * / .item-1 (z-endeksi: 2; opaklık: 1;) / * Ancak ALAWYS için ilk öğenin opaklık olmasını istemiyoruz: 1; aksi takdirde, iki ve üstü öğeler arasında gidip gelirken göz atardı. * / *: target ~ .item-1 (opaklık: 0;) / * ... ama eğer # target-item-1 hedeflenirse, ilk öğenin görünmesini istiyoruz, bu yüzden onu " ~ kardeş seçici ve opaklığını tekrar 1'e ayarlamak :-) * / # target-item-1: target ~ .item-1 (opacity: 1;) / * Eğer başka bir hedef-öğe- # hedeflenirse, "s" kardeş seçiciyi kullanarak seçin, solmasını sağlayın ve z-endeksini kullanarak yığının üstüne yerleştirin: 3. Atlı karıncanızda üçten fazla öğe varsa, daha fazla hedef öğe ekleyeceğiniz yer burasıdır. hemen 10 öğe eklemeye değer. * / # target-item-2: target ~ .item-2, # target-item-3: target ~ .item-3 (z-index: 3; opacity: 1; ))

Sizin için yüksek dönüşümler!

1.jQuery "clickCarousel" atlı karınca

Kaydırmalı haber duyurularıyla engelleyin. Sol / sağ oklar bloklar arasında gezinmek için kullanılır. İkide arşivlenmiş atlıkarınca stilleri: Aydınlık ve karanlık.

1.jQuery carousel eklentisi "carouFredSel"

Düzgün taze atlıkarınca jQuery ile görüntüler.

4. jQuery eklentisi: Elastislide carousel

5. "TinyCarousel" Eklentisi

JQuery kullanarak bir görüntü atlı karınca biçiminde harika içerik kaydırıcıları. Demo sayfası, bu atlı karıncayı sitenize nasıl ekleyeceğinizi açıklar.

Slider Kit eklentisi, çeşitli kaydırma yöntemlerine sahip hafif karusel.

7. javascript atlıkarınca

8. jQuery eklentisi "Grid Navigasyon Efektleri"

Küçük resimler arasında orijinal gezinme. Demo sayfasının sağ tarafındaki efekti görüntülemek için Yukarı ve Aşağı düğmelerine tıklayın. Bu jQuery çözümü, bir küçük resmin üzerine gelip fare tekerleği ile kaydırırken de bir etki sağlar.

9. Hafif atlıkarınca

10. Kolay Sayfalandırma bloklarından atlı karınca

jQuery eklentisi "Kolay Sayfalandırma". Her dikdörtgen blok normal bir liste öğesi li'yi temsil eder ve üçten fazla öğe varsa, hepsini görüntülemek için kaydırıcı benzeri gezinme kullanmanız gerekir ("ileri", "geri" okları kullanarak ve aşağıdaki gezinme düğmelerini kullanarak alt).

11. Dikey döndürücü "Dikey Ticker"

JQuery dikey döndürücü: bir sayfadaki içeriğin otomatik olarak kaydırılması. Gezinme düğmelerinin yanı sıra dönüşü durdurma ve yeniden başlatma yeteneği sağlanmıştır. Farenin üzerine geldiğinizde hareket durur. Seviyesinde HTML işaretlemesi kaydırma blokları olağan li liste öğeleri ile temsil edilir.

12. javascript css kaydırılabilir alan

dIV kabına sarılmış kaydırılabilir bir alan oluşturmak için javascript "TinyScroller" çözümü.

13. jQuery eklentisi "Smooth Div Scroll"

Uygulama için eklenti yatay kaydırma belirli bir alandaki içerik. Fare imlecini alanın sol veya sağ kenarının üzerine getirdiğinizde, kaydırma başlar.

İçeriği olan slaytlar arasında gezinme, oklar kullanılarak veya bir küçük resme tıklanarak yapılabilir. Alt kısımda küçük resimleri gizlemek / göstermek için bir Göster düğmesi vardır veya tam tanım kaymak.

15. "Döngüsel İçerik Atlı Karıncası" içerik döndürücü

17. Kaydırma Çubuğu

Fareyle üzerine gelindiğinde görünen kaydırma çubuğuna sahip bir blok. Hem kaydırma çubuğunu hem de fare tekerleğini kullanarak içerikte gezinebilirsiniz.

Bu jQuery çözümü, Apple'ın web sitesinde benzer bir etkiden esinlenmiştir. Bu şirketin geliştiricileri her zaman dünyanın her yerinden web yöneticilerine ilham veren ilginç çözümler bulmuşlardır. Eklentiyi göstermek için listeden herhangi bir kategoriden seçim yapın.

19. Harika kaydırıcı

Kaydırıcı otomatik olarak oluşturulur. Ürün adı, açıklaması, bağlantısı ve resim adresi içeren veriler slider.db.txt dosyasından alınır. Kullanılan teknolojiler: CSS, PHP, jQuery.

20. jQuery kullanarak blokları döndürme

Blok dönüşünün etkisini görmek için demo sayfasındaki küçük dikdörtgenlerden birine tıklayın.

Örneğin, bir içerik kaydırma eklentisi, en son haberleri göstermek veya bir sitede Twitter broşürlerini göstermek için kullanılabilir.

22. Dinamik blok "Müşteri incelemeleri"

Blok içeriğinin otomatik rotasyonu. Kullanılan teknolojiler: PHP, XML, CSS, jQuery.

Bu eklenti liste öğelerini (ul li) jQuery carousel öğelerine eşler.

26. javascript ImageFlow carousel

Resimler, fare tekerleği ile kolayca kaydırılabilir.

27. Kaydırma içeriği

Sitedeki en son materyallerin veya haberlerin duyurulduğu kompakt bir blok. Sol sütun, en son haberlerin kısa duyurularından oluşan sayfalara ayrılmış bir liste görüntüler. Bunlardan birini seçtiğinizde, daha ayrıntılı bir açıklama ve onu okumak için bir bağlantı sağ sütunda görüntülenir. tam metin yayınlar. JQuery ile uygulandı.

Bağlantılı resimler kaydırılır, fareyle üzerine gelindiğinde kaydırma durur ve gezinme çubuğu görüntülenir. Fareyi resmin üzerine getirdiğinizde, adı da kontrol düğmeleri arasında görüntülenir. Sayfada çok güzel görünüyor

33. Kaydırma içeriği, Mootools eklentisi "Scrollbar"

Kaydırma, hem kaydırma çubuğu hem de fare tekerleği ile gerçekleştirilir.

11.01.15 308976

Şu anda, kaydırıcı - atlıkarınca - bir işletme, web sitesi - portföy veya diğer herhangi bir kaynak için bir web sitesinde ihtiyacınız olan işlevsellik. Tam ekran görüntü kaydırıcılarının yanı sıra, yatay karusel kaydırıcılar her web tasarımına iyi uyum sağlar.

Bazen kaydırıcının site sayfasının üçte birini kaplaması gerekir. Burada atlıkarınca kaydırıcısı, geçiş efektleriyle ve duyarlı düzenler... E-ticaret siteleri, tek tek gönderilerde veya sayfalarda birden çok fotoğrafı sergilemek için bir kaydırıcı atlıkarınca kullanır. Kaydırıcı kodu, ihtiyaçlarınıza göre serbestçe kullanılabilir ve değiştirilebilir.

JQuery'yi HTML5 ve CSS3 ile birlikte kullanarak, benzersiz efektler sağlayarak sayfalarınızı daha ilginç hale getirebilir ve ziyaretçilerin dikkatini belirli alan site.

Slick - modern slider eklentisi - carousel

Slick, geliştiricilerinin çözümlerinin tüm kaydırıcı gereksinimlerinizi karşılayacağını iddia ettiği ücretsiz bir jquery eklentisidir. Duyarlı atlıkarınca kaydırıcı, mobil cihazlar için döşeme modunda ve masaüstü sürümü için sürükle ve bırak modunda çalışabilir.

Solmaya geçiş efekti içerir, ilginç fırsat "Merkezde mod", otomatik kaydırmalı resimlerin tembel yüklenmesi. Güncellenen işlevsellik, slayt ekleme ve bir slayt filtresi içerir. Eklentiyi gereksinimlerinize göre özelleştirebilmeniz için her şey.

Demo Modu | İndir

Owl Carousel 2.0 - jQuery - dokunmatik eklenti

Bu eklentinin cephaneliğinde hem yeni başlayanlar hem de deneyimli geliştiriciler için uygun geniş bir özellik yelpazesi vardır. o güncellenmiş versiyon kaydırıcı - atlıkarınca. Selefi tamamen aynı şekilde adlandırıldı.

Kaydırıcı, genel işlevselliği iyileştirmek için bazı yerleşik eklentiler içerir. Animasyon, video oynatma, kaydırıcı otomatik oynatma, yavaş yükleme, otomatik yükseklik ayarı Owl Carousel 2.0'ın ana özellikleridir.

Sürükle desteği ve bırak eklentinin daha rahat kullanımı için dahildir mobil cihazlar.
Eklenti, mobil cihazların küçük ekranlarında bile büyük resimleri görüntülemek için mükemmeldir.

Örnekler | İndir

jQuery Silver Track eklentisi

Oldukça küçük ama işlevsellik açısından zengin jquery eklentisi, sayfaya bir kaydırıcı yerleştirmenize izin verir - küçük bir çekirdeğe sahip olan ve çok fazla site kaynağı tüketmeyen bir atlıkarınca. Eklenti, dikey ve yatay kaydırıcıları, animasyonları görüntülemek ve galeriden resim setleri oluşturmak için kullanılabilir.

Örnekler | İndir

AnoSlide - Ultra kompakt duyarlı jQuery kaydırıcısı

Aşırı yoğun jQuery kaydırıcısı - işlevselliği normal bir kaydırıcıdan çok daha fazla olan bir atlıkarınca. Onlar içerir Ön izleme tek resim, bir atlı karınca ve başlığa dayalı kaydırıcıda birden çok görüntü görüntüleyin.

Örnekler | İndir

Baykuş Atlıkarınca - Jquery Kaydırıcısı - Atlıkarınca

Owl carousel, HTML koduna kolayca yerleştirilebilen, dokunmatik ekran destekli bir sürükle ve bırak kaydırıcısıdır. Eklenti şunlardan biridir: en iyi kaydırıcılarözel olarak hazırlanmış işaretleme olmadan güzel atlı karıncalar oluşturmanıza olanak tanır.

Örnekler | İndir

3D galeri - atlıkarınca

CSS stillerine ve bazı Javascript kodlarına dayalı 3B geçişler kullanır.

Örnekler | İndir

TweenMax.js ve jQuery kullanarak 3B atlı karınca

Muhteşem 3D atlıkarınca. Görünüşe göre bu hala bir beta sürümü, çünkü şu anda onunla birkaç sorun keşfettim. Kendi kaydırıcılarınızı test etmek ve oluşturmakla ilgileniyorsanız, bu atlıkarınca çok yardımcı olacaktır.

Örnekler | İndir

Önyükleme kullanarak atlı karınca

Yeni web siteniz için doğru olan önyükleme teknolojisini kullanan duyarlı bir atlıkarınca kaydırıcısı.

Örnekler | İndir

Bootstrap - Moving Box carousel kaydırıcı çerçevesine göre

En çok portföy ve iş sitelerinde aranıyor. Bu tür karusel kaydırıcı, genellikle her tür sitede bulunur.

Örnekler | İndir

Tiny Circleslider

Bu küçük kaydırıcı, herhangi bir ekran çözünürlüğüne sahip cihazlarda çalışmaya hazırdır. Kaydırıcı hem dairesel hem de atlı karınca modlarında çalışabilir. Küçük daire, diğer benzer kaydırıcılara alternatif olarak sunulur. IOS ve Android işletim sistemleri için yerleşik destek vardır.

Kaydırıcı dairesel modda oldukça ilginç görünüyor. Sürükle ve bırak desteği ve otomatik slayt kaydırma sistemi mükemmel bir şekilde uygulanmıştır.

Örnekler | İndir

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

Güçlü, duyarlı, atlıkarınca kaydırıcı, modern bir web sitesi için mükemmeldir. Herhangi bir cihazda doğru şekilde çalışır. Yatay ve dikey modlara sahiptir. Boyutu sadece 1 KB'ye kadar küçültülmüştür. Ultra kompakt eklenti ayrıca mükemmel pürüzsüz geçişlere sahiptir.

Örnekler | İndir

Vay - kaydırıcı - atlıkarınca

Web siteniz için orijinal bir kaydırıcı oluşturmanıza yardımcı olabilecek 50'den fazla efekt içerir.

Örnekler | İndir

BxSlider duyarlı jQuery içerik kaydırıcısı

Kaydırıcının nasıl uyum sağladığını görmek için tarayıcı penceresini yeniden boyutlandırın. Bxslider, 50'den fazla özelleştirme seçeneğiyle birlikte gelir ve özelliklerini çeşitli geçiş efektleriyle sergiler.

Örnekler | İndir

jCarousel

jCarousel, resim önizlemenizi düzenlemenize yardımcı olacak bir jQuery eklentisidir. Örnekte gösterilen tabandan kolayca özel resim karuselleri oluşturabilirsiniz. Kaydırıcı duyarlıdır ve mobil platformlarda çalışmak üzere optimize edilmiştir.

Örnekler | İndir

Scrollbox - jQuery eklentisi

Scrollbox, kaydırıcı - atlıkarınca veya metin kaydırma satırı oluşturmak için kompakt bir eklentidir. Anahtar özellikler arasında farenin üzerine gelindiğinde duraklama ile dikey ve yatay kaydırma bulunur.

Örnekler | İndir

dbpasCarousel

Basit kaydırıcı - atlıkarınca. Hızlı bir eklenti istiyorsanız, bu% 100 iyidir. Yalnızca kaydırıcının çalışması için gereken temel işlevlerle birlikte gelir.

Örnekler | İndir

Flexisel: Duyarlı JQuery Slider Eklentisi - Atlı Karınca

Flexisel'in yaratıcıları, bir kopya hedefleme yaparak eski tarz jCarousel eklentisinden ilham aldı doğru iş mobil ve tablet cihazlarda kaydırıcı.

Flexisel'in duyarlı düzeni, mobil cihazlarda çalışırken, tarayıcı penceresinin boyutuna yönelik düzenden farklılık gösterir. Flexisel, hem düşük hem de yüksek çözünürlüklü ekranlarda çalışmak üzere mükemmel bir şekilde uyarlanmıştır.

Örnekler | İndir

Elastislide - duyarlı kaydırıcı - atlıkarınca

Elastislide, cihazın ekran boyutuna mükemmel uyum sağlar. Belirli bir çözünürlükte görüntülenecek minimum görüntü sayısını ayarlayabilirsiniz. Dikey kaydırma efekti ile birlikte sabit bir sarma kullanan bir resim galerisi atlı karınca kaydırıcısı olarak iyi çalışır.

Örnek | İndir

FlexSlider 2

Woothemes'ten serbestçe yeniden dağıtılabilir kaydırıcı. En iyi duyarlı kaydırıcılardan biri olarak kabul edilir. Eklenti birkaç şablon içerir ve hem acemi kullanıcılar hem de uzmanlar için yararlı olacaktır.

Örnek | İndir

İnanılmaz atlıkarınca

Amazing Carousel, duyarlı bir jQuery görüntü kaydırıcısıdır. WordPress, Drupal ve Joomla gibi birçok site yönetim sistemini destekler. Ayrıca, herhangi bir uyumluluk sorunu olmaksızın Android ve IOS ve masaüstü işletim sistemlerini destekler. Yerleşik harika karusel şablonları, kaydırıcıyı dikey, yatay ve dairesel modlarda kullanmanıza olanak tanır.

Bu konuyu araştırmaya başladığımda, bir 3D atlı karıncaya ihtiyacım yoktu, ancak daha çok ilgilendim teknik detaylar uygulaması. Tabii ki, kullanılan ana teknikler elbette CSS Dönüşümleri Modülü Seviye 1'dir, ancak CSS, Sass ve istemci tarafı JavaScript'teki çeşitli konuları kapsayan bir dizi başka ön uç geliştirme teknolojisi uygulanmaktadır.

Demo

CSS 3B dönüştürmelerini özelleştirmeyi göstermek için size bileşenin yalnızca CSS sürümünü göstereceğim. Sonra sana bunu nasıl geliştireceğini göstereceğim javaScript kullanarakbasit bir bileşen komut dosyası geliştirerek.

Sekiz resimli döngü işaretlemesi

İşaretleme için, bir bileşenin içindeki görüntüler

temel iskeleti sağlayan eleman:

Bu bizim temelimiz olacak.

Atlıkarınca geometrik yapısı

CSS'ye bakmadan önce, ilerleyen bölümlerde geliştirilecek plana bir göz atalım.

Bunlar öğeler, atlıkarınca tarafından belirtilen bir daire şeklinde düzenlenmelidir. Bu daireye, sınırlı düzgün çokgeni ve yanlarda bulunan resimlerle yaklaşılabilir:

Bu nedenle, böyle bir çokgenin kenarlarının sayısı, atlı karıncadaki görüntülerin sayısı ile aynıdır:
Üç resimle, çokgen bir eşkenar üçgendir;
Dört imge ile bir karedir;
Beş beşgen ile; vb:

Atlı karıncada üçten az resim varsa ne olur?

Poligon belirlenemiyor ve aşağıdaki prosedür olduğu gibi uygulanamıyor. Her neyse, tek görüntü durumu oldukça işe yaramaz; İki görüntü biraz daha olasıdır ve daire üzerinde taban tabana zıt iki noktaya yerleştirilmiş olabilirler. Basit olması için, bu özel durumlar ele alınmaz ve en az üç görüntü varsayılır. Bununla birlikte, göreceli kod değişiklikleri zor olmayacaktır.

Bu hayali referans çokgen, görüntü alanı düzlemine dik üç boyutlu uzayda yer alacak ve merkezi, çokgenin kenarının merkezinden uzaklığına eşit bir mesafede ekrana geri itilecektir, Şekil 2'de gösterildiği gibi. Atlı karıncanın bu yukarıdan aşağı görünümü:

Böylece, izleyiciye şu anda bakan taraf z \u003d 0'da ekran düzleminde olacak ve ön kısaltmanın perspektifine maruz kalmayan ön görüntü, normal 2D boyutuna sahip olacaktır. d Resimdeki harf, CSS perspektif özelliğinin değerini temsil eder.

Atlıkarınca geometrisini oluşturma

Bu bölümde, adım adım ilerleyeceğim temel CSS kurallarını göstereceğim.

Aşağıdaki kod parçacıklarında bazı değişkenler Sass bir bileşeni daha özelleştirilebilir hale getirmek için kullanılır. Atlı karıncadaki resim sayısını belirtmek için $ n ve resmin genişliğini belirtmek için $ item-width kullanacağım.

Bir öğe, ilk görüntü için bir kapsayıcı pencere ve etrafına diğer görüntülerin konumlandırılıp dönüştürüleceği bir referans öğesidir.
Şimdilik atlı karıncanın sergilenecek tek bir resmi olduğunu varsayarsak, boyutlandırma ve hizalama ile başlayabilirim:

Atlı karınca (display: flex; flex-direction: column; align-items: center;\u003e * (flex: 0 0 auto;) .figure (width: $ item-width; transform-style: preserve-3d; img (genişlik: % 100; &: not (: ilk-türü) (görüntü: yok / * Şimdilik * /))))

Öğenin belirli bir döngü genişliği vardır ve görüntülerle aynı yüksekliğe sahiptir (farklı boyutlarda olabilirler, ancak aynı en boy oranına sahip olmaları gerekir). Bu şekilde, karusel kabının yüksekliği görüntünün yüksekliğine uyarlanır. Dışında,

karusel kabında yatay olarak ortalanmış.

İlk görüntü herhangi bir ek dönüştürmeye ihtiyaç duymaz çünkü zaten hedef konumunda, yani karuselin ön tarafında bulunmaktadır.

Atlı karınca, bir döndürme dönüşümü uygulanarak 3B alanda döndürülebilir.

öğesi. Bu dönüş, çokgenin merkezi etrafında olmalıdır, bu yüzden dönüşümün orijinal kökenini değiştireceğim

:

Atlı karınca figürü (dönüşüm kaynağı:% 50% 50 (- $ apothem);)

Bu değer olumsuzlanır çünkü CSS pozitif yönde z ekseni ekran dışında, izleyiciye doğru. Önlemek için parantezler gereklidir sözdizimi hataları Sass... Poligon ifadesinin hesaplanması daha sonra açıklanacaktır.

Referans çerçevesinin tercümesi

öğesi, tüm karusel (yeni) y ekseninde döndürülerek döndürülebilir:

Atlı karınca figürü (dönüşüm: rotateY (/ * burada bir miktar * / rad);)

Bu dönüşün ayrıntılarına daha sonra döneceğim.

Diğer görüntüler için dönüşümlere geçelim. Mutlak konumlandırmayla, görüntüler içeride yığılır

:

Atlı karınca şekil img: değil (: türünün ilki) (konum: mutlak; sol: 0; üst: 0;)

Bu z-endeksi değerleri göz ardı edilir çünkü bu, sonraki dönüşümler için yalnızca bir ön adımdır. Aslında, artık her görüntü, görüntünün atandığı çokgenin yanına bağlı olan bir döndürme açısı ile atlı karıncanın y ekseni boyunca döndürülebilir. Birincisi, nasıl yapılır

öğesi, varsayılan olarak görüntülerin orijinal başlangıç \u200b\u200bnoktasını değiştirerek onu çokgenin ortasına taşır:

Img: not (: ilk-türün) (dönüşüm kaynağı:% 50% 50 (- $ apothem);)

Görüntüler daha sonra döndürülebilir. yeni eksen y belirtilen miktara göre ($ i - 1) * $ teta radyan nerede $ i görüntünün indeksi (birinden başlayarak) ve $ teta \u003d 2 * $ PI / $ n, $ PI matematiksel sabiti temsil eden pi ... Dolayısıyla ikinci resim döndürülecek $ theta üçüncü 2 * tetavb., döndürülecek son görüntüye kadar ($ n - 1) * $ teta.

Görüntülerin bu göreceli konumu, karuselin dönüşleri sırasında korunacaktır (yani, değiştirilmiş y ekseni etrafında dönme

) iç içe yerleştirilmiş CSS dönüşümlerinin hiyerarşik yapısı nedeniyle.

Her görüntünün bu döndürme miktarı, kullanılarak atanabilir @için yönetim direktifleri Sass:

Atlı karınca figürü img (@ için 2'den $ n'ye kadar $ i (&: nth-child (# ($ i)) (dönüşüm: rotateY (# (($ i - 1) * $ teta) rad);))

Bu for ... through yapısını kullanır ve for ... to çünkü for ... yerine dizin değişkenine atanan son değere kadar kullanır. $ i, olacak n-1 yerine n.

Sass interpolasyon sözdiziminin iki örneğine # () dikkat edin. İlk durumda, indeks için kullanılır: seçicinin nth-child ();
İkinci durumda, rotation özelliğinin değerini ayarlamak için kullanılır.

Hesaplama Apothem

Çokgenin özünün hesaplanması, kenarların sayısına ve kenarın genişliğine, yani $ n ve $ öğe genişliğideğişkenler.
Formül:

$ görüntü genişliği / (2 * tan ($ PI / $ n))

Nerede tan ()- teğet trigonometrik fonksiyon.

Bu formül bazı geometri ve trigonometri ile elde edilebilir. Kalem kaynağında, bu formül yazıldığı gibi uygulanmaz çünkü Sass'ta teğetsel fonksiyon yoktur, bu nedenle onun yerine bir sabit değer kullanılır. Formül bunun yerine JavaScript demosunda tam olarak uygulanacaktır.

Atlı karınca öğeleri arasındaki mesafe

Bu noktada, döngü görüntüleri yan yana "dikilir" ve gerekli çokgen şekli oluşturur. Ancak burada sıkıca paketlenmişlerdir ve genellikle üç boyutlu atlı karıncalarda aralarında boşluk vardır. Bu mesafe, karuselin arkasındaki ters görüntüleri görmenize izin verdiği için 3B alanın algılanmasını artırır.

Bu boşluğu, başka bir yapılandırma değişkeni $ öğe ayırma ekleyerek ve her biri için yatay bir boşluk bırakıcı olarak kullanarak görüntüler arasına daha fazla ekleyebilirsiniz. öğesi. Daha doğrusu, sol ve sağ dolgu için bu değerin yarısını almak:

Atlı karınca şekil img (dolgu: 0 $ öğe ayrımı / 2;)

Atlı karıncanın yapısını daha iyi göstermek için resimler opaklık özelliğiyle yarı saydam yapılır ve kök öğe atlıkarınca, onu görünüm alanında dikey olarak ortalamak için kullanıldı.

Atlı karınca rotasyonu

Atlı karıncanın dönüşünü test etmeyi kolaylaştırmak için, görüntüler arasında gezinmek için bir UI kontrolü ekleyeceğim. Bu kontrolü uygulayan HTML, CSS ve JavaScript için CodePen Demosuna bakın; Burada sadece rotasyonla ilgili kodu açıklayacağım.

Atlı karıncanın önünde hangi görüntünün olduğunu belirtmek için currImage bir tamsayı değişkeni kullanıyoruz. Kullanıcı önceki / sonraki düğmelerle etkileşim kurduğunda bu değişken bir artar veya azalır.

CurrImage'ı güncelledikten sonra, karuselin döndürülmesi şu şekilde yapılır:

Figure.style.transform \u003d `` rotateY ($ (currImage * -theta) rad) `;

(Burada ve aşağıdaki parçacıklarda, dizelerdeki ifadeleri enterpolasyon için ES6 şablon değişmezleri kullanılır, isterseniz geleneksel "+" birleştirme işlecini kullanmaktan çekinmeyin)

Nerede tetaöncekinin aynısı:

NumImages \u003d figure.childElementCount; theta \u003d 2 * Math.PI / numImages;

Rotasyon gerçekleşir - teta bir sonraki öğeye gitmek için saat yönünün tersine döndürmenin gerekli olması ve bu tür döndürme değerlerinin CSS dönüşümlerinde negatif olması nedeniyle.

Bu currImage değerinin aralıkla sınırlı olmadığını, bunun yerine hem pozitif hem de negatif yönde sonsuza kadar büyüyebileceğini unutmayın. Aslında, ön resim son resimse (yani currImage \u003d\u003d n-1) ve kullanıcı tıklarsa sonraki düğmesiKaruselin ilk görüntüsüne gitmek için currImage'ı 0'a sıfırlarsak, (n-1) * teta'dan 0'a Döndürme Açısı oluşacak ve bu, karuseli önceki tüm görüntülerde ters yönde döndürecektir. İlk görüntü ilk olduğunda önceki düğmesine tıklandığında da benzer bir sorun ortaya çıkabilir.

Seçici olmak için olası taşmaları bile kontrol etmem gerekiyor geçerli resimçünkü Number veri türü rastgele büyük değerler alamaz. Bu kontroller demo kodunda uygulanmaz.

Görmek temel CSSAtlı karıncanın temelini oluşturan JavaScript artık bileşeni çeşitli şekillerde geliştirmek için kullanılabilir, örneğin:

• Keyfi sayıda görüntü
• Yüzde Genişlik Resimleri
• Sayfa başına birden çok döngü örneği
• Boşluk boyutu ve arka taraf görünürlüğü gibi her örnek için konfigürasyonlar
• HTML5 veri özelliklerini kullanarak yapılandırma *

İlk olarak, stil sayfasından dönüşüm orijini ve rotasyonlarla ilgili değişkenleri ve kuralları kaldırıyorum, çünkü bu, javaScript kullanarak:

$ öğe genişliği:% 40; // Artık yüzdeleri kullanabiliriz $ öğe ayırma: 0px; // Bu şimdi Js $ viewer-distance: 500px; .carousel (padding: 20px; perspektif: $ viewer-distance; overflow: hidden; display: flex; flex-direction: column; align-items: center;\u003e * (flex: 0 0 auto;) şekil (margin: 0; genişlik: $ öğe genişliği; dönüştürme stili: koruma-3d; geçiş: 0.5s dönüşümü; img (genişlik:% 100; kutu boyutlandırma: kenarlık kutusu; dolgu: 0 $ öğe ayırma / 2; &: değil ( : türünün ilki) (konum: mutlak; sol: 0; üst: 0;))))

İşlev atlıkarınca (kök) (// yakında ...)

kökArgüman, karuseli içeren DOM öğesine başvurur.

Genellikle bu işlev, sayfadaki her karusel için bir nesne oluşturmak için bir kurucu olacaktır, ancak burada bir döngü kitaplığı yazmıyorum, bu nedenle basit bir işlev yeterlidir.

Aynı sayfada birden çok bileşen oluşturmak için kod, load olayı için pencere nesnesine bir dinleyici kaydederek tüm görüntülerin yüklenmesini bekler ve ardından atlıkarınca () atlıkarınca sınıfına sahip her öğe için:

Window.addEventListener ("load", () \u003d\u003e (var carousels \u003d document.querySelectorAll (". Carousel"); for (var i \u003d 0; i< carousels.length; i++) { carousel(carousels[i]); } });

atlıkarınca () Üç ana görevi yerine getirir:

• Gezinme özelleştirme.
• Dönüşümleri kurma
• Atlıkarınca geri bildirimini korumak için yeniden boyutlandırma penceresine sahip bir dinleyici kaydedin ve onu yeni görüntü alanı boyutuna uyarlayın

Dönüşümü yapılandırmak için kodun üzerinden geçmeden önce, bazı temel değişkenlerin ve bunların örnek yapılandırmasına göre nasıl başlatıldıklarının üzerinden geçeceğim:

Var şekil \u003d root.querySelector ("şekil"), resimler \u003d figür.çocuk, n \u003d resimler.uzunluk, gap \u003d root.dataset.gap || 0, bfc \u003d "bfc" root.dataset içinde;

Görüntü sayısı (n)çocuk sayısına göre başlatıldı

öğesi. Slaytlar arasında bölme (boşluk), ayarlanmışsa, HTML5 veri boşluğu özelliğinden başlatılır. Arka taraf görünürlük bayrağı (bfc) HTML5 veri kümesi API'sini kullanarak okuyun. Bu, daha sonra karuselin arkasındaki resimlerin görünür olup olmayacağını belirlemek için kullanılacaktır.

CSS dönüşümlerini özelleştirme

CSS dönüştürmeleriyle ilgili özellikleri ayarlayan kod, setupCarousel () içinde kapsüllenir. Bu iç içe geçmiş işlev iki argüman alır. Birincisi, atlı karıncadaki öğelerin sayısıdır, yani n, yukarıda sunulan değişkendir. İkinci parametre s, karusel çokgeninin kenarının uzunluğudur. Daha önce de bahsettiğim gibi, bu resimlerin genişliğine eşittir, dolayısıyla içlerinden birinin mevcut genişliği okunabilir getComputedStyle ():

SetupCarousel (n, parseFloat (getComputedStyle (görüntüler) .width));

Böylece, görüntünün genişliği yüzde değerleri kullanılarak belirtilebilir.

Window.addEventListener ("resize", () \u003d\u003e (setupCarousel (n, parseFloat (getComputedStyle (görüntüler) .width));));

Basitlik uğruna, yeniden boyutlandırma dinleyicisine aşina değilim.

İlk şey setupCarousel () Yapmanız gereken şey, geçirilen parametreleri ve daha önce tartışılan formülü kullanarak çokgenin özünü hesaplamaktır:

Apothem \u003d s / (2 * Math.tan (Math.PI / n));

Bu değer daha sonra atlı karınca için yeni bir dönüş ekseni elde etmek üzere şeklin dönüşümünün başlangıcını değiştirmek için kullanılır:

Figure.style.transformOrigin \u003d `50% 50% $ (- apothem) px`;

Ardından görüntülere stiller uygulanır:

(Var i \u003d 0; i için< n; i++) { images[i].style.padding = `${gap}px`; } for (i = 1; i < n; i++) { images[i].style.transformOrigin = `50% 50% ${- apothem}px`; images[i].style.transform = `rotateY(${i * theta}rad)`; } if (bfc) { for (i = 0; i < n; i++) { images[i].style.backfaceVisibility = "hidden"; } }

İlk döngü, karusel öğeleri arasında bir boşluk atar. İkinci döngü, 3B dönüştürmeleri ayarlar. Karusel konfigürasyonunda karşılık gelen bayrak belirtilmişse, son döngü arka yüzleri işler.

En sonunda, rotateCarousel ()transfer için çağrıldı geçerli resim öne getirmek. Bu, görüntülenen görüntünün indeksi verildiğinde, hedef görüntüyü ileri hareket ettirmek için şekli Y ekseni boyunca döndüren küçük bir yardımcı işlevdir. Ayrıca gezinme kodu tarafından ileri geri gezinmek için kullanılır:

İşlev rotateCarousel (imageIndex) (figure.style.transform \u003d `rotateY ($ (imageIndex * -theta) rad)`;)

İşte nihai sonuç, her biri farklı bir konfigürasyona sahip birden fazla karuselin oluşturulduğu bir demo.