Automatický posuvný karusel Jquery. Kolotoč pomocou bootstrapu. Responzívny posúvač obsahu jQuery bxSlider

V poslednej dobe pracujeme na stránke, ktorá používa CMS, čo je trochu obmedzujúce. Môžeme pridať naše natívny HTML a CSS na stránku, ale nie JavaScript.

Projekty, s ktorými sme pracovali, mali kolotoč. Mali sme nápady, ako by to mohlo fungovať pomocou animácií CSS a vlastnosti transform, ale to by umožnilo rolovanie karuselu automaticky a neumožňovalo by to užívateľský vstup ktoré mamičky nepotrebovali. Po krátkom premýšľaní sme vytvorili riešenie, ktoré využíva absolútne umiestnenie a: cieľový pseudoselektor na zmenu z-indexu a nepriehľadnosti nášho karuselu tak, aby sa cez ne pretočil.

Poďme vytvoriť toto!

Štruktúra

Naša štruktúra kolotoča vyzerá takto: máme hlavný div.carousel-wrapper, ktorý dáva nášmu kolotoču veľkosť. Vo vnútri našej škrupiny máme span.hidden-target prvky s jedinečné identifikátory ktoré fungujú ako ciele pre naše ovládacie prvky karuselu a prvky div.carousel-item, ktoré obsahujú obsah každej z položiek karuselu.

Každý z prvkov div.carousel-item bude mať obsah a dva odkazy, a.arrow-prev a a.arrow-next, ktoré používame na zacyklenie medzi položkami karuselu.

Pretože náš jednotlivé prvky kolotoče budú poloha: absolútna (môžeme ich naskladať na seba), výšku div.kolotoča-zavinovačky musíme nastaviť ručne. Pokúsime sa presunúť CSS do našej externej šablóny so štýlmi, ale budeme musieť napísať niektoré body, aby bol náš karusel použiteľný a škálovateľný.

CSS tiež použijeme na nastavenie obrázka na pozadí našich dvoch prvkov div.carousel-item, aby boli farebnejšie, ale ponecháme to nižšie, aby bolo naše označenie čitateľnejšie.

To je všetko HTML. Je prekvapivo ľahký. V CSS (v tomto prípade SCSS) dochádza k mágii.

Štýly

Máte karusel, ktorý je plne funkčný a je 100% HTML a CSS! Vytvorili sme kolotoč s tromi položkami, ale môžete pokračovať v pridávaní položiek, uistite sa, že pridávate viac zacielených položiek a správne prepájate svoje odkazy.

/ * Tu začína náš karusel, pričom hlavný obal je relatívne umiestnený, takže naše absolútne umiestnené položky sú na správnom mieste. * / .Carousel-wrapper (pozícia: relatívna; šírka a výška nadradenej položky. V predvolenom nastavení ich robíme priehľadnými, aby sa stmavli, keď ich budeme prechádzať pomocou odkazov so šípkami. * / .carousel-item (position: absolute; top: 0; bottom: 0; left : 0; vpravo: 0; výplň: 25 pixelov 50 pixelov; nepriehľadnosť: 0; prechod: všetkých 0,5 s uvoľnenie-von-out; / * Všimli ste si 50 pixelov vľavo a vpravo hore hore? Je to preto, aby sme mohli umiestniť našu šípku odkazy! Každý z nich bude mať šírku 50 pixelov. Tiež používam prázdne odkazy s obrázkom na pozadí, aby odkazy vyzerali ako šípky. Uistite sa, že ste túto adresu URL vymenili za skutočnú adresu URL, aby vaše odkazy na šípky neboli iba priehľadné obdĺžniky. * / .šípka (pozícia: absolútna; hore: 0; zobrazenie: blok; šírka: 50px; výška: 100 %; -webkit-tap-highlight-color: r gba (0,0,0,0); pozadie: url ("/ carousel-arrow-dark.png") 50 % 50 % / 20px bez opakovania; / * Dajme našu šípku, aby sme sa vrátili späť doľava. * / & .Arrow-prev (vľavo: 0;) / * A našu šípku, ktorou sa posunieme dopredu doprava. Keďže ja“ používam rovnaký obrázok šípky na obe moje šípky, otočím túto o 180 stupňov tak, aby ukazovala správnym smerom * / & .arrow-next (vpravo: 0; -webkit-transform: otočiť (180 stupňov); transformovať: otočiť (180 stupňov); )) / * Veľmi sa mi páči, ako tieto položky karuselu vyzerajú na tmavom pozadí obrázka, takže ak má prvok div .carousel-item triedu „light“, farbu jeho textu zmeníme na bielu a namiesto značky použijeme bielu šípku tmavo-sivá jeden. Opäť sa uistite, že tento obrázok šípky niekde existuje * / & .light (farba: biela; .šípka (pozadie: url ("/ carousel-arrow-light.png") 50 % 50 % / 20px no-repeat;)) / * Použime niektoré mediálne dopyty na zmenu veľkosti šípok na menších zariadeniach. * / @Media (maximálna šírka: 480 pixelov) (.arrow, & .light .arrow (veľkosť pozadia: 10 pixelov; poloha na pozadí: 10 pixelov 50 % ;))) / * Nastavme zobrazenie cieľových odkazov na skok: žiadne; aby prehliadač „neprinútil preskočiť na začiatok karuselu vždy, keď používateľ klikne na jeden z našich odkazov so šípkou. Tento selektor atribútu zacieli na akýkoľvek prvok, ktorého id začína reťazcom „cieľová položka“. * / (zobrazenie: žiadne ;) / * Vyššie sme teda spriehľadnili všetky naše položky karuselu, čo znamená, že pri načítaní stránky by sme mali veľký prázdny box, kde by mal byť náš karusel. Nastavme nepriehľadnosť našej prvej položky na 1, aby sa namiesto toho zobrazila. Tiež "nastavujeme jeho z-index na 2, takže" je umiestnený nad ostatnými položkami karuselu. * / .item-1 (z-index: 2; nepriehľadnosť: 1;) / * Nechceme však, aby prvá položka VŽDY bola nepriehľadnosť: 1; inak by prekukla pri prepínaní medzi položkami dva a vyššie. * / *: target ~ .item-1 (nepriehľadnosť: 0;) / * ... ale ak je zacielený # target-item-1, chceme, aby sa zobrazila prvá položka, takže ju vyberáme pomocou ~ selektor súrodenca a nastavenie jeho nepriehľadnosti na 1 znova :-) * / # target-item-1: target ~ .item-1 (opacity: 1;) / * Ak je zacielená akákoľvek iná cieľová-položka- #, nech "s vyberte ho pomocou súrodeneckého selektora, nechajte ho zoslabnúť a umiestnite ho na vrch kôpky pomocou z-indexu: 3. Tu "ste" pridajte ďalšie cieľové položky, ak má váš kolotoč viac ako tri položky. stojí za to pridať hneď 10 položiek. * / # target-item-2: target ~ .item-2, # target-item-3: target ~ .item-3 (z-index: 3; nepriehľadnosť: 1; ))

Vysoké konverzie pre vás!

1.jQuery clickCarousel

Blok s posúvajúcimi sa správami. Šípky doľava / doprava sa používajú na posúvanie blokov. Archivovaný kolotoč na dve časti štýlov: svetlo a tma.

1.jQuery carousel plugin "carouFredSel"

Čistý čerstvý kolotoč obrázky s jQuery.

4. jQuery Plugin: Elastislide Carousel

5. Plugin "TinyCarousel"

Skvelé posúvače obsahu v podobe kolotoča obrázkov pomocou jQuery. Ukážková stránka popisuje, ako pripojiť tento karusel k vašej lokalite.

Zásuvný modul Slider Kit, ľahký kolotoč s rôznymi metódami posúvania.

7.javascriptový kolotoč

8. Doplnok jQuery „Efekty navigácie v mriežke“

Originálna navigácia medzi miniatúrami obrázkov. Ak chcete zobraziť efekt na pravej strane ukážkovej stránky, kliknite na tlačidlá Hore a Dole. Toto riešenie jQuery tiež poskytuje efekt na umiestňovanie miniatúr a posúvanie kolieskom myši.

9. Svetelný kolotoč

10. Kolotoč z blokov Easy Paginate

Plugin jQuery „Easy Paginate“. Každý obdĺžnikový blok predstavuje bežnú položku zoznamu li, a ak sú tam viac ako tri položky, potom na ich zobrazenie potrebujete použiť posúvačovú navigáciu (pomocou šípok „dopredu“, „dozadu“ a pomocou navigačných tlačidiel na dno).

11. Vertikálny rotátor "Vertical Ticker"

Vertikálny rotátor JQuery: automatické posúvanie obsahu na stránke. K dispozícii sú navigačné tlačidlá, ako aj možnosť zastaviť rotáciu a znova ju spustiť. Keď prejdete myšou, pohyb sa zastaví. Na úrovni HTML značky rolovacie bloky sú reprezentované obvyklými položkami li zoznamu.

12.javascript css rolovacia oblasť

javascriptové riešenie „TinyScroller“ na vytvorenie rolovateľnej oblasti zabalenej v kontajneri DIV.

13. Doplnok jQuery "Smooth Div Scroll"

Plugin na implementáciu horizontálne rolovanie obsah v konkrétnej oblasti. Keď umiestnite kurzor myši na ľavý alebo pravý okraj oblasti, začne rolovanie.

Navigáciu medzi snímkami s obsahom je možné vykonať pomocou šípok alebo kliknutím na miniatúru. V spodnej časti sa nachádza tlačidlo „Zobraziť“, ktoré umožňuje skryť/zobraziť miniatúry resp Celý popisšmykľavka.

15. Rotátor obsahu „Kruhový kolotoč obsahu“

17. Posúvač

Blok s posúvačom, ktorý sa zobrazí pri umiestnení kurzora myši. V obsahu sa môžete posúvať pomocou posúvača alebo kolieska myši.

Toto riešenie jQuery bolo inšpirované podobným efektom na webovej stránke spoločnosti Apple. Vývojári tejto korporácie vždy našli zaujímavé riešenia, ktoré inšpirovali webmasterov z celého sveta. Ak chcete doplnok predviesť, vyberte si z ľubovoľnej kategórie zo zoznamu.

19. Úžasný posúvač

Posuvník sa generuje automaticky. Údaje s názvom produktu, popisom, odkazom a adresou obrázka sú prevzaté zo súboru slider.db.txt. Použité technológie: CSS, PHP, jQuery.

20. Otáčanie blokov pomocou jQuery

Ak chcete vidieť účinok rotácie bloku, kliknite na jeden z malých obdĺžnikov na stránke ukážky

Doplnok na posúvanie obsahu možno napríklad použiť na zobrazenie najnovších správ alebo na zobrazenie letákov na Twitteri na stránke.

22. Dynamický blok „Zákaznícke recenzie“

Automatické otáčanie obsahu bloku. Použité technológie: PHP, XML, CSS, jQuery.

Tento doplnok mapuje položky zoznamu (ul li) na prvky karuselu jQuery.

26. javascriptový kolotoč ImageFlow

Obrázky sa dajú jednoducho posúvať kolieskom myši.

27. Rolovanie obsahu

Kompaktný blok s oznamovaním najnovších materiálov na stránke alebo noviniek. Ľavý stĺpec zobrazuje stránkovaný zoznam krátkych oznámení o najnovších správach. Po výbere jedného z nich sa v pravom stĺpci zobrazí podrobnejší popis a odkaz na jeho prečítanie plné znenie publikácií. Implementované pomocou jQuery.

Obrázky s odkazmi sa posúvajú, keď podržíte myš, posúvanie sa zastaví a zobrazí sa navigačná lišta. Po prejdení myšou na obrázok sa medzi ovládacími tlačidlami zobrazí aj jeho názov. Na stránke to vyzerá veľmi pekne

33. Posúvanie obsahu, doplnok Mootools "Scrollbar"

Posúvanie sa vykonáva pomocou posuvnej lišty aj kolieska myši.

11.01.15 308976

Momentálne posuvník – karusel – funkcionalita, ktorú stačí mať na webe pre firmu, webe – portfóliu alebo akomkoľvek inom zdroji. Spolu s posúvačmi obrázkov na celej obrazovke sa horizontálne posúvače karuselu dobre hodia do akéhokoľvek webového dizajnu.

Niekedy by mal posuvník zaberať jednu tretinu stránky lokality. Tu sa posuvník kolotoča používa s prechodovými efektmi a s responzívne rozloženia... Stránky elektronického obchodu používajú posuvný posuvník na zobrazenie viacerých fotografií v jednotlivých príspevkoch alebo stránkach. Posuvný kód je možné voľne používať a meniť podľa vašich potrieb.

Použitím jQuery v spojení s HTML5 a CSS3 môžete urobiť svoje stránky zaujímavejšie, poskytnúť im jedinečné efekty a upozorniť návštevníkov na konkrétnu oblasť stránky.

Slick - moderný posuvný plugin - kolotoč

Slick je freeware plugin jquery, ktorého vývojári tvrdia, že ich riešenie uspokojí všetky vaše požiadavky na slider. Responzívny posúvač kolotoča môže fungovať v režime dlaždíc pre mobilné zariadenia a v režime presunutia myšou pre počítačovú verziu.

Obsahuje prechodový efekt vyblednutia, zaujímavá príležitosť„Režim v strede“, lenivé načítavanie obrázkov s automatickým rolovaním. Aktualizované funkcie zahŕňajú pridávanie snímok a filter snímok. Všetko preto, aby ste si plugin mohli prispôsobiť podľa svojich požiadaviek.

Demo režim | Stiahnuť ▼

Owl Carousel 2.0 - jQuery - dotykový doplnok

Tento plugin má vo svojom arzenáli širokú škálu funkcií, ktoré sú vhodné pre začiatočníkov aj skúsených vývojárov. to aktualizovaná verzia posúvač - kolotoč. Jeho predchodca sa volal úplne rovnako.

Posuvník obsahuje niektoré vstavané doplnky na zlepšenie celkovej funkčnosti. Animácia, prehrávanie videa, automatické prehrávanie posuvníka, lenivé načítanie, automatické nastavenie výšky sú hlavné funkcie Owl Carousel 2.0.

Podpora ťahania a klesnúť zahrnuté pre pohodlnejšie používanie pluginu mobilné zariadenia.
Plugin je ideálny na zobrazovanie veľkých obrázkov aj na malých obrazovkách mobilných zariadení.

Príklady | Stiahnuť ▼

Plugin jQuery Silver Track

Pomerne malý, ale na funkčnosť bohatý doplnok jquery, ktorý vám umožňuje umiestniť na stránku posuvník - kolotoč, ktorý má malé jadro a nespotrebováva veľa zdrojov stránky. Plugin je možné použiť na zobrazenie vertikálnych a horizontálnych posuvníkov, animácií a vytváranie sád obrázkov z galérie.

Príklady | Stiahnuť ▼

AnoSlide – Ultra kompaktný responzívny posúvač jQuery

Ultra kompaktný posúvač jQuery- kolotoč, ktorého funkčnosť je oveľa viac ako u bežného posúvača. Zahŕňajú Náhľad jeden obrázok, zobrazenie viacerých obrázkov v karuseli a posúvači podľa názvu.

Príklady | Stiahnuť ▼

Kolotoč sova - Jquery Slider - Kolotoč

Owl carousel je posuvný posúvač s dotykovými obrazovkami, ktorý možno jednoducho vložiť do kódu HTML. Plugin je jedným z najlepšie posúvače ktoré vám umožňujú vytvárať krásne kolotoče bez špeciálne pripraveného označenia.

Príklady | Stiahnuť ▼

3D galéria - kolotoč

Používa 3D prechody založené na štýloch CSS a niektorých kódoch Javascript.

Príklady | Stiahnuť ▼

3D kolotoč pomocou TweenMax.js a jQuery

Skvelý 3D kolotoč. Zdá sa, že toto je stále beta verzia, pretože som s ňou práve teraz objavil niekoľko problémov. Ak máte záujem o testovanie a vytváranie vlastných sliderov, tento kolotoč vám veľmi pomôže.

Príklady | Stiahnuť ▼

Kolotoč pomocou bootstrapu

Responzívny posuvný posuvník využívajúci technológiu bootstrap vhodný pre váš nový web.

Príklady | Stiahnuť ▼

Založené na ráme posuvného kolotoča Bootstrap - Moving Box

Najžiadanejšie na portfóliových a obchodných stránkach. Tento typ posúvača kolotoča sa často nachádza na akomkoľvek type stránok.

Príklady | Stiahnuť ▼

Malý kruhový jazdec

Tento malý posúvač je pripravený pracovať na zariadeniach s akýmkoľvek rozlíšením obrazovky. Posuvník môže pracovať v kruhovom aj karuselovom režime. Malý kruh je prezentovaný ako alternatíva k inému podobnému typu posuvníkov. Zabudovaná je podpora operačných systémov IOS a Android.

Posuvník vyzerá celkom zaujímavo v kruhovom režime. Podpora drag and drop a automatický posuvný systém sú vynikajúco implementované.

Príklady | Stiahnuť ▼

Posuvník obsahu Thumbelina

Výkonný, responzívny posuvný posuvník je ideálny pre moderné webové stránky. Funguje správne na akomkoľvek zariadení. Má horizontálne a vertikálne režimy. Jeho veľkosť je minimalizovaná len na 1 KB. Ultra kompaktný plugin má tiež vynikajúce plynulé prechody.

Príklady | Stiahnuť ▼

Wow - posuvník - kolotoč

Obsahuje viac ako 50 efektov, ktoré vám môžu pomôcť vytvoriť originálny posuvník pre váš web.

Príklady | Stiahnuť ▼

Responzívny posúvač obsahu jQuery bxSlider

Zmeňte veľkosť okna prehliadača, aby ste videli, ako sa posúvač prispôsobuje. Bxslider prichádza s viac ako 50 možnosťami prispôsobenia a predvádza svoje funkcie s rôznymi prechodovými efektmi.

Príklady | Stiahnuť ▼

jCarousel

jCarousel je doplnok jQuery, ktorý vám pomôže usporiadať náhľad obrázka. Môžete jednoducho vytvoriť vlastné obrázky kolotoča z rámca zobrazeného v príklade. Posuvník reaguje a je optimalizovaný na prácu na mobilných platformách.

Príklady | Stiahnuť ▼

Scrollbox - doplnok jQuery

Scrollbox je kompaktný plugin na vytváranie posúvača - karuselu alebo riadku posúvania textu. Medzi kľúčové funkcie patrí vertikálne a horizontálne rolovanie s pauzou pri prejdení myšou.

Príklady | Stiahnuť ▼

dbpasCarousel

Jednoduchý posuvník - kolotoč. Ak potrebujete rýchly plugin, tento to urobí na 100%. Dodáva sa len so základnými funkciami potrebnými na fungovanie posúvača.

Príklady | Stiahnuť ▼

Flexisel: Responzívny doplnok JQuery Slider – kolotoč

Tvorcovia Flexisel sa inšpirovali starou školou doplnku jCarousel vytvorením zacielenia na kópie správna práca posúvač na mobilných zariadeniach a tabletoch.

Responzívne rozloženie Flexisel sa pri práci na mobilných zariadeniach líši od rozloženia orientovaného na veľkosť okna prehliadača. Flexisel je dokonale prispôsobený na prácu na obrazovkách s nízkym aj vysokým rozlíšením.

Príklady | Stiahnuť ▼

Elastislide - responzívny posúvač - kolotoč

Elastilide sa dokonale prispôsobí veľkosti obrazovky zariadenia. Môžete nastaviť minimálny počet obrázkov, ktoré sa majú zobraziť pri konkrétnom rozlíšení. Funguje dobre ako posuvný posuvník v galérii obrázkov s použitím pevného obalu v spojení s efektom vertikálneho posúvania.

Príklad | Stiahnuť ▼

FlexSlider 2

Voľne redistribuovateľný slider od Woothemes. Je považovaný za jeden z najlepšie reagujúcich posúvačov. Plugin obsahuje niekoľko šablón a bude užitočný pre začínajúcich používateľov aj odborníkov.

Príklad | Stiahnuť ▼

Úžasný kolotoč

Amazing Carousel je citlivý posúvač obrázkov jQuery. Podporuje mnoho systémov na správu stránok, ako sú WordPress, Drupal a Joomla. Podporuje tiež verzie operačných systémov Android a IOS a desktopové verzie bez akýchkoľvek problémov s kompatibilitou. Vstavané úžasné šablóny kolotoča vám umožňujú používať posúvač vo vertikálnom, horizontálnom a kruhovom režime.

Keď som začal skúmať túto tému, nepotreboval som 3D kolotoč, ale viac ma zaujal technické detaily jeho realizácii. Samozrejme, hlavné použité techniky sú, samozrejme, z modulu CSS Transforms Module Level 1, ale ako množstvo iných front-end vývojových technológií sa používa, ktoré pokrývajú rôzne témy v CSS, Sass a JavaScript na strane klienta.

Demo

Na ilustráciu prispôsobenia transformácií CSS 3D vám ukážem verziu komponentu iba v CSS. Potom vám ukážem, ako to zlepšiť pomocou JavaScriptu vývojom jednoduchého komponentného skriptu.

Značka pre kolotoč s ôsmimi obrázkami

Pri značkovaní sú obrázky vo vnútri komponentu zabalené dovnútra

prvok, ktorý poskytuje základnú kostru:

Toto bude náš základ.

Geometrická štruktúra kolotoča

Predtým, ako sa pozrieme na CSS, pozrime sa na osnovu, ktorá bude vypracovaná v nasledujúcich častiach.

Títo prvky by mali byť usporiadané v kruhu vyznačenom kolotočom. Tento kruh možno aproximovať jeho obmedzeným pravidelným mnohouholníkom a obrázkami umiestnenými po stranách:

Počet strán takéhoto mnohouholníka je teda rovnaký ako počet obrázkov v karuseli:
Pri troch obrázkoch je mnohouholník rovnostranný trojuholník;
So štyrmi obrázkami je to štvorec;
S piatimi päťuholníkmi; atď:

Čo ak sú v kolotoči menej ako tri obrázky?

Polygón nemožno určiť a nasledujúci postup nemožno použiť tak, ako je. Každopádne, puzdro na jeden obrázok je dosť zbytočné; Tieto dva obrázky sú o niečo pravdepodobnejšie a mohli by byť umiestnené na dvoch diametrálne opačných bodoch na kruhu. Pre jednoduchosť sa tieto špeciálne prípady neriešia a predpokladajú sa aspoň tri obrázky. Relatívne úpravy kódu by však neboli zložité.

Tento imaginárny referenčný polygón bude umiestnený v trojrozmernom priestore kolmom na rovinu výrezu a jeho stred bude zatlačený späť do obrazovky vo vzdialenosti rovnajúcej sa jeho apotému, teda vzdialenosti strany mnohouholníka od jeho stredu, ako je znázornené na obr. Tento pohľad zhora na kolotoč:

Strana, ktorá je momentálne otočená k divákovi, bude teda v rovine obrazovky pri z = 0 a predný obrázok, ktorý nie je vystavený perspektíve skrátenia, bude mať svoju obvyklú 2D veľkosť. d Písmeno na obrázku predstavuje hodnotu pre vlastnosť perspektívy CSS.

Budovanie geometrie karuselu

V tejto sekcii vám ukážem kľúčové pravidlá CSS, ktoré prejdem krok za krokom.

V nasledujúcich úryvkoch kódu sú niektoré premenné Sass sa používajú na prispôsobenie komponentu. Použijem $ n na označenie počtu obrázkov v karuseli a $ item-width na označenie šírky obrázku.

Prvok je okno obsahujúce prvý obrázok a referenčný prvok, okolo ktorého budú umiestnené a transformované ďalšie obrázky.
Za predpokladu, že karusel mal zatiaľ len jeden obrázok na prezentáciu, môžem začať nastavením veľkosti a zarovnaním:

Carousel (displej: flex; flex-direction: column; align-items: center;> * (flex: 0 0 auto;) .figure (width: $ item-width; transform-style: zachování-3d; img (šírka: 100 %; &: nie (: prvý typ) (zobrazenie: žiadne / * Zatiaľ * /))))

Prvok má danú šírku karuselu a má rovnakú výšku obrázkov (môžu byť rôzne veľké, ale musia mať rovnaký pomer strán). Výška karuselu sa tak prispôsobí výške obrazu. okrem toho

vodorovne vycentrované v karuselovom kontajneri.

Prvý obrázok nepotrebuje žiadne ďalšie transformácie, pretože je už vo svojej cieľovej polohe, teda na prednej strane karuselu.

Kolotoč je možné otáčať v 3D priestore použitím rotačnej transformácie

element. Toto otočenie by malo byť okolo stredu mnohouholníka, takže zmením pôvodný pôvod transformácie

:

Figúrka kolotoča (transformácia-pôvod: 50 % 50 % (- $ apothem);)

Táto hodnota je negovaná, pretože v CSS je kladný smer os z je mimo obrazovky smerom k divákovi. Je potrebné vyhnúť sa zátvorkám syntaktické chyby Sass... Výpočet polygónového apotému bude vysvetlený neskôr.

Prekladom referenčného rámca

prvok, celý karusel sa dá otáčať s rotáciou na (novej) osi y:

Figúrka kolotoča (transformácia: otočteY (/ * nejaké množstvo tu * / rad);)

K detailom tejto odbočky sa vrátim neskôr.

Prejdime k transformáciám pre ďalšie obrázky. Pri absolútnom umiestnení sú obrázky naskladané vo vnútri

:

Obrázok karuselu: nie (: prvý typ) (pozícia: absolútna; vľavo: 0; hore: 0;)

Tieto hodnoty z-indexu sa ignorujú, pretože ide len o predbežný krok pre ďalšie transformácie. V skutočnosti je teraz možné každý obrázok otáčať pozdĺž osi y karuselu o uhol natočenia, ktorý závisí od strany mnohouholníka, ku ktorej je obrázok priradený. Po prvé, ako sa to robí s

element štandardne zmení pôvodný pôvod obrázkov a presunie ho do stredu polygónu:

Img: not (: first-of-type) (transform-origin: 50% 50% (- $ apothem);)

Obrázky je potom možné na nich otáčať nová os y o uvedenú sumu ($ i - 1) * $ theta radiány kde $ i index (začínajúci na jednej) obrázka a $ theta = 2 * $ PI / $ n, $ PI predstavujúce matematickú konštantu pi... Preto bude druhý obrázok otočený $ theta tretí 2 * $ theta a tak ďalej, až kým sa nezobrazí posledný obrázok, ktorý sa má otočiť ($ n - 1) * $ theta.

Táto relatívna poloha obrázkov sa zachová počas otáčania karuselu (t. j. otáčania okolo upravenej osi y

) kvôli hierarchickej povahe vnorených transformácií CSS.

Toto množstvo otočenia každého obrázka možno priradiť pomocou @pre manažérske smernice Sass:

Obrázok kolotoča img (@pre $ i od 2 do $ n (&: n-té dieťa (# ($ i)) (transformácia: otočiťY (# (($ i - 1) * $ theta) rad);)))

Toto používa konštrukciu for ... through a nie pre ... to, pretože namiesto for ... na poslednú hodnotu priradenú indexovej premennej $ i, bude n-1 namiesto n.

Všimnite si dva príklady # () syntaxe interpolácie Sass. V prvom prípade sa používa pre index: n-té dieťa () selektora;
V druhom prípade slúži na nastavenie hodnoty vlastnosti rotácie.

Computing Apothem

Výpočet apotému mnohouholníka závisí od počtu strán a šírky strany, to znamená od $ n a $ šírka položky premenné.
Vzorec:

$ šírka obrázka / (2 * opálenie ($ PI / $ n))

Kde opálenie ()- tangens goniometrická funkcia.

Tento vzorec je možné získať pomocou určitej geometrie a trigonometrie. V zdroji pera nie je tento vzorec implementovaný tak, ako je napísaný, pretože tangenciálna funkcia nie je dostupná v Sass, takže sa namiesto toho používa tvrdá hodnota. Vzorec bude namiesto toho plne implementovaný v ukážke JavaScriptu.

Vzdialenosť medzi položkami karuselu

V tomto bode sú obrázky kolotočov šité vedľa seba a vytvárajú požadovaný polygonálny tvar. Ale tu sú pevne zbalené a často v trojrozmerných kolotočoch je medzi nimi priestor. Táto vzdialenosť zlepšuje vnímanie 3D priestoru, pretože vám umožňuje vidieť inverzné obrázky v zadnej časti kolotoča.

Túto medzeru môžete ďalej pridať medzi obrázky zavedením ďalšej konfiguračnej premennej $ item-separation a jej použitím ako horizontálnej medzery pre každý element. Presnejšie povedané, ak vezmeme polovicu tejto hodnoty pre ľavú a pravú výplň:

Obrázok kolotoča (výplň: 0 $ oddelenie položiek / 2;)

Obrázky sú polopriehľadné s vlastnosťou opacity, aby lepšie ilustrovali štruktúru karuselu a flexibilné rozloženie na koreňový prvok kolotoč sa použil na vertikálne vycentrovanie vo výreze.

Rotácia kolotoča

Na uľahčenie testovania rotácie karuselu pridám ovládací prvok používateľského rozhrania na navigáciu medzi obrázkami. Pozrite si ukážku CodePen pre HTML, CSS a JavaScript, ktoré implementujú tento ovládací prvok; Tu popíšem iba kód súvisiaci s rotáciou.

Na označenie toho, ktorý obrázok sa nachádza pred karuselom, používame currImage celočíselnú premennú. Keď používateľ interaguje s predchádzajúcimi / nasledujúcimi tlačidlami, táto premenná sa zvýši alebo zníži o jednu.

Po aktualizácii currImage sa otáčanie karuselu vykoná pomocou:

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

(Tu a v nasledujúcich úryvkoch sa literály šablóny ES6 používajú na interpoláciu výrazov v reťazcoch, ak chcete, môžete použiť tradičný operátor zreťazenia „+“).

Kde theta to isté ako predtým:

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

Rotácia sa deje - theta kvôli skutočnosti, že na prechod na ďalšiu položku je potrebné otáčanie proti smeru hodinových ručičiek a takéto hodnoty otáčania sú v transformáciách CSS záporné.

Všimnite si, že táto hodnota currImage nie je obmedzená rozsahom, ale namiesto toho môže rásť donekonečna v pozitívnom aj negatívnom smere. V skutočnosti, ak je predný obrázok posledný (takže currImage == n-1) a používateľ klikne ďalšie tlačidlo ak nastavíme currImage na 0, aby sme prešli na prvý obrázok karuselu, nastane uhol rotácie od (n-1) * theta po 0, čo spôsobí otočenie karuselu opačným smerom naprieč všetkými predchádzajúcimi obrázkami. Podobný problém môže nastať pri kliknutí na tlačidlo predchádzajúci, keď je prvý obrázok prvým.

Aby som bol vyberavý, musím dokonca kontrolovať potenciálne pretečenia aktuálnyObrázok pretože dátový typ Number nemôže nadobúdať ľubovoľne veľké hodnoty. Tieto kontroly nie sú implementované v demo kóde.

Vidieť základné CSS Základom karuselu je teraz JavaScript, ktorý možno použiť na vylepšenie komponentu niekoľkými spôsobmi, ako napríklad:

• Ľubovoľný počet obrázkov
• Obrázky s percentuálnou šírkou
• Viacnásobné výskyty karuselu na stránku
• Konfigurácie pre každú inštanciu, ako je veľkosť medzery a viditeľnosť zadnej strany
• Konfigurácia pomocou atribútov údajov HTML5 *

Najprv odstránim zo šablóny so štýlmi premenné a pravidlá súvisiace s pôvodom transformácie a rotáciami, pretože to urobím pomocou JavaScriptu:

$ šírka položky: 40 %; // Teraz môžeme použiť percentá $ item-separation: 0px; // Toto je teraz nastavené s Js $ viewer-distance: 500px; .kolotoč (výplň: 20px; perspektíva: $ vzdialenosť diváka; pretečenie: skryté; zobrazenie: ohyb; smer ohybu: stĺpec; zarovnanie položiek: stred;> * (flex: 0 0 auto;) číslo (okraj: 0; šírka: $ item-width; transform-style: zachování-3d; prechod: transformácia 0,5 s; img (šírka: 100 %; box-sizing: border-box; padding: 0 $ item-separation / 2; &: not ( : prvý typ) (pozícia: absolútna; zľava: 0; hore: 0;))))

Karusel funkcií (root) (// už čoskoro ...)

koreň Argument sa týka prvku DOM, ktorý obsahuje karusel.

Zvyčajne bude táto funkcia konštruktorom na vygenerovanie jedného objektu pre každý karusel na stránke, ale nepíšem tu knižnicu karuselu, takže stačí jednoduchá funkcia.

Na vytvorenie viacerých komponentov na tej istej stránke kód očakáva načítanie všetkých obrázkov registráciou poslucháča na objekte okna pre udalosť načítania a potom zavolá kolotoč () pre každú položku s triedou karuselu:

Window.addEventListener ("načítať", () => (var carousels = document.querySelectorAll (. Carousel"); for (var i = 0; i< carousels.length; i++) { carousel(carousels[i]); } });

kolotoč () Vykonáva tri hlavné úlohy:

• Prispôsobenie navigácie.
• Nastavenie transformácií
• Zaregistrujte poslucháča s oknom na zmenu veľkosti, aby ste zachovali spätnú väzbu karuselu a prispôsobili ho novej veľkosti výrezu

Predtým, ako sa pustím do kódu na konfiguráciu transformácie, prejdem si niektoré kľúčové premenné a spôsob ich inicializácie na základe konfigurácie inštancie:

Var figúrka = root.querySelector („figúrka“), obrázky = figúra.deti, n = obrázky.dĺžka, medzera = root.dataset.gap || 0, bfc = "bfc" v root.dataset;

Počet obrázkov (n) inicializované na základe počtu detí

element. Rozdelenie medzi snímky (medzera), inicializovaný z atribútu data-gap HTML5, ak je nastavený. Vlajka viditeľnosti na zadnej strane (bfc)čítať pomocou rozhrania API množiny údajov HTML5. To sa neskôr použije na určenie, či majú byť obrázky na zadnej strane karuselu viditeľné alebo nie.

Prispôsobenie transformácií CSS

Kód, ktorý nastavuje vlastnosti súvisiace s transformáciami CSS, je zapuzdrený v setupCarousel (). Táto vnorená funkcia má dva argumenty. Prvým je počet položiek v karuseli, to znamená, že n je premenná uvedená vyššie. Druhý parameter s je dĺžka strany mnohouholníka karuselu. Ako som už spomenul, rovná sa šírke obrázkov, takže je možné prečítať aktuálnu šírku jedného z nich getComputedStyle ():

SetupCarousel (n, parseFloat (getComputedStyle (images) .width));

Šírka obrázka sa teda dá určiť pomocou percentuálnych hodnôt.

Window.addEventListener ("zmena veľkosti", () => (setupCarousel (n, parseFloat (getComputedStyle (images) .width));));

Pre jednoduchosť nepoznám poslucháč zmeny veľkosti.

Prvá vec setupCarousel ()čo je potrebné urobiť, je vypočítať apotém polygónu pomocou odovzdaných parametrov a predtým diskutovaného vzorca:

Apotém = s / (2 * Math.tan (Math.PI / n));

Táto hodnota sa potom použije na zmenu začiatku transformácie tvaru, aby sa získala nová os rotácie pre karusel:

Figure.style.transformOrigin = `50 % 50 % $ (- apotém) px`;

Potom sa na obrázky použijú štýly:

Pre (var i = 0; i< 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"; } }

Prvá slučka priraďuje medzeru medzi položky karuselu. Druhá slučka nastaví 3D transformácie. Posledná slučka spracováva zadné hrany, ak bol v konfigurácii karuselu špecifikovaný zodpovedajúci príznak.

nakoniec otočiť kolotoč () vyzvaný k prevodu aktuálny obrázok priviesť do Popredia. Ide o malú pomocnú funkciu, ktorá vzhľadom na index zobrazeného obrázku otáča tvar pozdĺž osi Y, aby sa cieľový obrázok posunul dopredu. Používa ho aj navigačný kód na navigáciu tam a späť:

Funkcia rotationCarousel (imageIndex) (figure.style.transform = `rotateY ($ (imageIndex * -theta) rad)`;)

Tu je konečný výstup, demo, v ktorom je vytvorených viacero karuselov, každý s inou konfiguráciou.