Monet ihmiset omalla verkkosivustollaan haluavat nähdäLiukusäätimet ovat sellaisia lohkoja, jotka näyttävät yhden sisällön elementin näytöllä ja tietyn ajan kuluttua ne muuttavat tätä sisältöä toiseen. Luonnollisesti jokainen web-kehittäjä pystyy luomaan liukusäätimen itse käyttämällä HTML, CSS ja JavaScript, mutta tämä ei aina ole järkevää. Vietät melko paljon aikaa, vaikka Internetissä on melkein valmiita ratkaisuja, jotka helpottavat huomattavasti elämääsi ja tekevät sivustostasi paljon houkuttelevamman. Tässä artikkelissa keskustelemme yhdestä näistä ratkaisuista, joita kutsutaan Owl Carouseliksi. Tämän liukusäätimen käyttöönotto on uskomattoman helppoa, joten aloittelijalla on myös mahdollisuus selviytyä. Nyt näet, mitä tämä liukusäädin edustaa, samoin kuin muita tärkeitä yksityiskohtia. Owl Karusellin perustaminen tapahtuu vaiheittain, joten sinun pitäisi tutkia tätä materiaalia vain kunnossa.
Mikä se on ja miksi kannattaa valita tämä liukusäädin?
Owl Carousel, jonka asetus ontässä artikkelissa tarkasteltuna on erittäin tehokas plug-in, joka lisää sivuillesi mukavan ja kätevän liukusäätimen, joka helpottaa työskentelyäsi sivustolla, jolloin voit säästää paljon aikaa, vaivaa ja rahaa. Mitkä ovat tämän erityisen plug-inin edut, koska verkossa on paljon liukusäätimiä? Tosiasia on, että tämä liukusäädin tarjoaa sinulle useita kymmeniä räätälöintivaihtoehtoja, joiden avulla voit tehdä sivusi ainutlaatuiseksi ja toistamattomaksi. Tämä on mukautuva plugin, joka toimii kaikkien selainten versioiden kanssa, ja se voidaan helposti yhdistää WordPressiin ja muihin suosittuihin CMS: ään. Yleensä tämän liukusäätimen edut ovat erittäin suuret, joten sinun kannattaa ehdottomasti valita. Ennen kuin aloitat Owl Carousel -ohjelman käyttöönoton, tämä plug-in on ladattava.
download
Owl Carousel 2: n asettaminen ei ole mahdollista, jos et olelataa se tietokoneellesi, ja koska tämä on vaiheittainen ohje, kannattaa aloittaa alusta alkaen. Joten ohjelma voidaan ladata pakettien ylläpitäjien avulla, mutta nämä ovat kehittyneitä kehittäjävälineitä, joten tässä kerrotaan, miten saada tämä plugin tavalliseen tapaan. Sinun täytyy mennä plugin viralliselle sivustolle ja ladata sen uusin versio. Sen jälkeen kaikki ladatut tiedostot on siirrettävä sivustosi hakemistoon ja laadittava kätevä kansio, joka on sama kuin plugin itse. Huomaa, että tämä plugiini liittyy jQuery-ohjelmaan, joten kirjastoa on myös saatavilla. Kun lataat tämän laajennuksen, sinun on tehtävä seuraava vaihe, nimittäin Owl Carousel 2: n liukusäädin.
CSS
Owl Karusellissa 1.3 asetusta säilyy lähes samana kuin uudemmassa toisessa versiossa, vain uusia toimintoja lisätään. Perustiedot ovat kuitenkin samat, kun aloitat CSS: n lisäämisen dokumenttiin. Niinpä ensimmäinen vaihe on lisätä rivi HTML-koodiin . Mitä se antaa sinulle?Tämä on merkkijono, joka lataa tarvittavat tyylejä sivustolla näyttämään liukusäätimen. Tällöin voit viimeistellä itse tekemällä visuaalisen käsittelyn. On kuitenkin kätevämpi ja nopeampi ratkaisu. Voit myös lisätä rivin , joka myös lataa standarditeemanliukusäädin, joka tekee siitä heti käyttövalmis. Voit muokata joitain tyylejä tehdäksesi liukusäätimestä entistä ainutlaatuisemman ja epätavallisemman sekä sopivamman sisällöllesi. Luonnollisesti Owl Carousel -asetukset venäjäksi olisivat erittäin käteviä, mutta jokaisen sivustoja luoneen tulisi ymmärtää, että hän ei voi tehdä ilman englantia.
JavaScript-yhteys
Luonnollisesti liukusäädin ei toimi ilman JS: tä,siksi sinun on myös huolehdittava siitä, että sisällytät asianmukaisen tiedoston, joka sisältää tarvittavan koodin. Tätä varten sinun on lisättävä koodirivi dokumentaatiosta kuitenkin yhdellä ehdolla.Kaikki tietävät, että JS on ohjelmointikieli, joka suorittaa kaikki komennot järjestyksessä. Tässä tapauksessa sinun tulisi lisätä tämä koodirivi sen rivin jälkeen, joka lisää jQuery-kirjaston asiakirjaasi. Tämän liukusäätimen tapauksessa sinun ei tarvitse tehdä mitään muuta JS: n kanssa.
HTML-koodin asettelu
No, olet kiinnittänyt liukusäätimen, nyt on aikaantaa ja määrittää se. Ensinnäkin sinun on kirjoitettava HTML-koodi, jotta liukusäädin näkyy sivullasi. Voit tehdä tämän sinun täytyy luoda säilytyslokero, joka sisältää dioja. Voit tehdä tämän div-tunnisteella, joka on määritettävä pöllö-karuselli-luokka. Juuri tämä luokka varmistaa, että kaikki liukusäätimeen sovellettavat tyylit aktivoidaan. Voit myös rekisteröidä toisen luokan - pöllö-teema. Se on sinulle hyödyllistä, jos päätät käyttää oletussuunnittelua tai jos otit liukusäätimen vakioversion jatkotyön perustana.
Sitten sinun on lisättävä jokainen dio erilliseen säiliöön, jossa on div-tunniste. Voit luonnollisesti käyttää muita tunnisteita, mutta tämä tunniste sopii parhaiten liukusäätimille.
Plugin-puhelu
Viimeinen asia, joka sinun on tehtävä saadaksesi valmis liukusäädin näkymään sivustossasi, on käyttää tätä koodilohkoa:
$ (asiakirja). jo (toiminto () {
$ (". pöllökaruselli"). pöllökaruselli ();
});
Se varmistaa, että liukusäädin käynnistyy-toiminto eli selaa sisältöä, kun sivu latautuu. Samalla koodilla voit yhdistää Owl Carousel -sovelluksen WordPressiin. Tämän laajennuksen asetukset ovat lukuisia ja erilaisia, ja nyt opit tärkeimmistä kohdista.
Liukusäätimen ulkoasun ja toiminnallisuuden asettaminen
Joten mitä komentoja voit käyttää,muokataksesi liukusäädintä? Ensinnäkin, sinun on muistettava kohteet -komento, koska sen avulla voit asettaa tietyn määrän dioja liukusäätimeesi. Silmukka-komento antaa sinun valita, siirretäänkö liukusäädin tai lopetetaan viimeisen kohteen vieritys. Siellä on myös Vedä-komento, jolla on useita vaihtoehtoja, esimerkiksi hiiri ja kosketus. Ensimmäisessä tapauksessa voit tehdä sen niin, että liukusäätimen elementtejä voidaan kääntää kiinnitetyllä hiirellä, ja toisessa tapauksessa koskettamalla (tämä komento sopii mobiililaitteille). Toinen tärkeä komento on nav, joka mahdollistaa navigointinuolien näyttämisen. Yhdessä sen kanssa voit käyttää navText-komentoa lisäämällä kuvatekstejä navigointipainikkeisiin. Älä myöskään unohda automaattisen toiston komentoa, jonka avulla voit kytkeä päälle ja pois automaattisen käynnistyksen liukusäätimen diojen kääntämisestä sivun latautuessa. Tämän komennon lisäksi voit käyttää myös autoplayTimeout-toimintoa, jolle voit asettaa tietyn arvon millisekunteina, joka määrittää ajan, joka kuluu automaattisen selauksen välillä kunkin diojen välillä.
Jos käytät reagoivaa web-suunnittelua, niinJos sivusi ulkoasu muuttuu automaattisesti sen mukaan, mitä laitetta sitä tarkastellaan, sinun on ehdottomasti muistettava reagoiva komento, jonka avulla voit asettaa näytettyjen diojen määrän sen näytön leveyden mukaan, jota sivua katsellaan.
