Monet ihmiset omalla sivustollaan haluavat nähdä liukusäätimiä – nämä ovat lohkoja, jotka näyttävät yhden sisältöelementin näytöllä ja muuttavat tietyn ajan kuluttua tämän sisällön toiseksi. Luonnollisesti jokainen verkkokehittäjä pystyy itsenäisesti luomaan liukusäätimen HTML:n, CSS:n ja JavaScriptin avulla, mutta tämä ei aina ole järkevää. Vietät melko paljon aikaa huolimatta siitä, että Internetissä on melko paljon valmiita ratkaisuja, jotka helpottavat elämääsi paljon ja tekevät sivustostasi paljon houkuttelevamman. Tämä artikkeli keskittyy yhteen näistä ratkaisuista nimeltä Owl Carousel. Tämän liukusäätimen asentaminen on uskomattoman helppoa, joten jopa aloittelija pystyy käsittelemään sitä. Nyt opit, mikä tämä liukusäädin on, sekä muita tärkeitä yksityiskohtia. Pöllökarusellin asettaminen on vaiheittainen prosessi, joten sinun tulee tutustua tähän materiaaliin vain järjestyksessä.
Mikä se on ja miksi sinun pitäisi valita tämä liukusäädin?
Owl Carousel, jonka kokoonpanosta keskustellaan tässä artikkelissa, on erittäin tehokas laajennus, joka lisää kauniin ja kätevän liukusäätimen sivullesi, mikä helpottaa huomattavasti työtäsi sivustolla,säästää paljon aikaa, vaivaa ja rahaa. Mitkä ovat tämän lisäosan edut, koska verkossa on melko paljon liukusäätimiä? Tosiasia on, että tämä liukusäädin tarjoaa sinulle kymmeniä mukautusvaihtoehtoja, joiden avulla voit tehdä sivustasi ainutlaatuisen ja jäljittelemättömän. Se on responsiivinen laajennus, joka toimii kaikissa selainversioissa ja voidaan helposti yhdistää WordPressiin ja muihin suosittuihin sisällönhallintajärjestelmiin. Yleensä tällä liukusäätimellä on paljon etuja, joten sinun tulee ehdottomasti tehdä valinta sen hyväksi. Tämä laajennus on kuitenkin ladattava, ennen kuin aloitat Owl Carouselin määrityksen.
Lataa
Owl Carousel 2:n määrittäminen ei ole mahdollista, jos et ole ladannut sitä tietokoneellesi, ja koska tämä on vaiheittainen ohje, sinun tulee aloittaa alusta. Joten ohjelman voi ladata paketinhallinnalla, mutta nämä ovat edistyneitä kehittäjätyökaluja, joten tässä kerromme, kuinka saat tämän laajennuksen normaalilla tavalla. Sinun on mentävä laajennuksen viralliselle verkkosivustolle ja ladattava sen uusin versio. Sen jälkeen kaikki ladatut tiedostot on siirrettävä sivustosi hakemistoon, kun olet valmistellut kätevän kansion, jonka nimi on sama kuin itse laajennus. Huomaa, että tämä laajennus toimitetaan jQueryn mukana, joten myös kyseisen kirjaston on oltava saatavilla. No, kun olet ladannut tämän laajennuksen, sinun on suoritettava seuraava vaihe, joka on Owl Carousel -liukusäätimen 2 määrittäminen.
CSS
BOwl Carousel 1.3:n asetukset pysyvät lähes samoina kuin uudemmassa versiossa 2, vain uusia ominaisuuksia lisätään. Perustiedot ovat kuitenkin samat, alkaen CSS:n lisäämisestä asiakirjaan. Joten ensimmäinen askel on lisätä rivi. Mitä hän antaa sinulle? Tämä on merkkijono, joka lataa tarvittavat tyylit sivustolle liukusäätimen näyttämiseksi. Tässä voit lopettaa tekemällä visuaalisen käsittelyn itse. On kuitenkin olemassa kätevämpi ja nopeampi ratkaisu. Voit myös lisätä rivin, joka lataa myös liukusäätimen oletusteeman, jolloin se on heti käyttövalmis. Voit muokata joitain tyylejä tehdäksesi liukusäätimestäsi ainutlaatuisemman ja erilaisemman sekä sopivamman sisältöösi. Luonnollisesti Owl Carousel -asetukset venäjäksi olisivat erittäin käteviä, mutta jokaisen verkkosivustoja luovan henkilön tulisi ymmärtää, ettei hän voi tulla toimeen ilman englannin kielen taitoa.
JavaSpript-yhteys
Liukusäädin ei tietenkään toimi ilman JS:ää, joten sinun tulee myös huolehtia siitä, että sisällytät tarvittavan koodin sisältävän tiedoston. Tätä varten sinun on lisättävä koodirivi dokumentaatiosta, mutta yhden ehdon on täytyttävä. Kaikki tietävät, että JS on ohjelmointikieli, joka suorittaa kaikki komennot järjestyksessä, joten tässä tapauksessa sinun tulee lisätä tämä koodirivi sen rivin jälkeen, joka lisää jQuery-kirjaston dokumenttiin. Enemmän JS:llä tämän liukusäätimen tapauksessa sinulla ei ole mitään tekemistätarve.
HTML-koodaus
No, olet liittänyt liukusäätimen, nyt on aika suunnitella ja mukauttaa se. Ensinnäkin sinun on kirjoitettava HTML-koodi, jotta liukusäädin näkyy ollenkaan sivullasi. Tätä varten sinun on luotava säilö, joka sisältää diat. Tämä voidaan tehdä div-tunnisteen avulla, jolle on määritettävä pöllö-karuselliluokka. Tämä luokka varmistaa, että kaikki liukusäätimeen liittyvät tyylit aktivoituvat. Voit myös kirjoittaa toisen luokan - pöllö-teeman. Siitä on hyötyä, jos päätät käyttää oletusmuotoilua tai ottaa liukusäätimen vakioversion pohjaksi jatkotyölle.
Sitten sinun on lisättävä jokainen dia erilliseen säilöön div-tunnisteella. Voit tietysti käyttää muita tunnisteita, mutta tämä tunniste on paras liukusäätimille.
Soita laajennus
Ja viimeinen asia, joka sinun on tehtävä, jotta sivustollasi olisi valmis liukusäädin, on käyttää tätä koodilohkoa:
$(asiakirja).ready(function(){
$(".owl-carousel").owlCarousel();
});
Se varmistaa, että liukusäädin alkaa toimia, eli selata sisältöä, kun sivusi latautuu. Samalla koodilla voit yhdistää Owl Carouselin WordPressiin. Tämän laajennuksen asetukset ovat lukuisia ja vaihtelevia, ja nyt opit tärkeimmistä kohdista.
Liukusäätimen ulkoasun ja toiminnallisuuden asettaminen
Millä komennoilla voit mukauttaa liukusäädintä? Ensinnäkin, sinun on muistettava items-komento, koska sillä voit asettaa tietyn määrän dioja liukusäätimessäsi. Silmukkakomennon avulla voit valita, kierrätetäänkö liukusäädintä vai lopetetaanko vieritys viimeisen elementin kohdalla. On myös Vedä-komento, jossa on useita vaihtoehtoja, kuten hiiri ja kosketus. Ensimmäisessä tapauksessa voit tehdä sen niin, että liukusäätimesi elementtejä voidaan pyyhkäistä hiirellä painettuna, ja toisessa tapauksessa kosketuksen avulla (tämä komento sopii mobiililaitteille). Toinen tärkeä komento on nav, joka mahdollistaa navigointinuolien näyttämisen. Sen lisäksi voit käyttää navText-komentoa lisätäksesi tunnisteita navigointipainikkeisiin. Älä myöskään unohda automaattisen toiston komentoa, jonka avulla voit ottaa käyttöön ja poistaa käytöstä liukusäätimen diojen kääntämisen automaattisen käynnistyksen sivun latautuessa. Tällä komennolla voit käyttää myös automaattista toiston aikakatkaisua, jolle voit asettaa tietyn arvon millisekunteina, mikä määrittää ajan kunkin dian automaattisen kääntämisen välillä.
Jos käytät responsiivista verkkosuunnittelua, eli sivusi ulkoasu muuttuu automaattisesti sen mukaan, millä laitteella sitä katsotaan, sinun on ehdottomasti muistettava responsive-komento, jonka avulla voit asettaa diojen määrän näyttää riippuen näytön leveydestä, jolla sivua tarkastellaan.
