Lory Carousel Slider sisältää CSS-animaatio- ja kosketustuen

Kaikesta carousel-laajennukset verkossa Minun täytyy tiputtaa hattu Lory. Se on sellainen yksinkertainen käsite mutta se on helposti yksi tehokkaimmat liukusäätimet verkossa.

pienennetty versio yhteensä noin 7 kilotonnia, mikä ei ole pieni, mutta varmasti ei ole huono kosketussuojattu karuselli-liukusäädin.

Voit lisätä tämän laajennuksen mihin tahansa verkkosivustoon sen jälkeen kulkee jQuery: llä tai tavallisella vanilla JS: llä. Se voi ajaa ei ole riippuvuuksia mikä on hyvä yhteensopivuuden kannalta.

Lory on myös yksi harvoista lisäosista ei hajoa vanhemmissa selaimissa. Sen tuettu täysin IE10: ssä+, ja vanhemmat versiot voivat silti ajaa liukusäädintä ilman animaatioita ja pieniä lisäosia.

Sinun täytyy tee kaikki ohjelmallinen koodaus itse jos haluat lisätä sisältöä, mutta se on yllättävän yksinkertainen. Voit määrittää, kuinka suuri kullekin paneelille, kuinka kauan animoida ja miten käsitellä reagoivia selaimia.

Tutustu Loryn kotisivuille lähdekoodi ja tiedot asetuksista.

Aloita lisäämällä Lory JS -kirjasto sivustosi pää jakso, joko jQuery-laajennuksena tai vanilja-kirjastona. Kaikki versiot ovat tällä hetkellä Cloudflare CDN: ssä, joten se on erittäin helppoa sisällyttää kopio ilman latauksia.

Kun JavaScript-tiedosto on asennettu, haluat luoda HTML-järjestämättömän luettelon diaesityksen kanssa, mutta Lory mukana muutama ennalta määritelty luokka joten se on hyvä kiinni mallistaan.

Tässä muutamia näytekoodi otettu Lory GitHubin tärkeimmästä reposta:

Nyt jQueryssä (tai tavallisessa JS: ssä) voit määritä toimintopuhelu. Sen pitäisi näyttää tältä:

 $ ('. js_slider'). lory (infinite: 1);

Huomaa ääretön vaihtoehto on vain yksi monista ominaisuuksista, joita voit muokata. Ja voit aina muuttaa .js_slider luokka tarpeisiisi.

Kun kehität tämän pluginin, sinulla on todennäköisesti tonnia räätälöintikysymyksiä. Suosittelen kovasti selaaminen joka on GitHub-sivun alareunassa.

Luultavasti ei paras paikka dokumenteille, mutta onneksi he ovat melko pieniä. Sinulla on vain noin 10 vaihtoehtoa muokata ja ehkä 10-12 erilaista tapahtumaa voit tinkerata. Tämä tieto löytyy myös Lory-verkkosivuston alaosasta, mutta GitHubissa on paljon helpompi lukea.

Päivitykset eivät ole yhtä usein, mutta voit aina kynän antamista koskeva pyyntö GitHubissa, jos sinulla on ongelmia. Jos sinulla on todellakin ongelmia koodin kanssa, sinulla on todennäköisesti helpompi ratkaista ne Stack Overflow -palvelussa.

Joko niin, voit aloita melko nopeasti käyttämällä Cloudflare CDN: tä ja GitHub-tiedostoja. Ja jos etsit a live-esittely koodilla tutustu tähän CodePen-merkintään.