Moltes persones al seu propi lloc volen veure els controls lliscants: són blocs que mostren un element de contingut a la pantalla i, després d'un cert període de temps, canvien aquest contingut per un altre. Naturalment, cada desenvolupador web és capaç de crear un control lliscant de manera independent amb HTML, CSS i JavaScript, però això no sempre té sentit. Passareu molt de temps, malgrat que hi ha moltes solucions ja fetes a Internet que us faciliten la vida i fan que el vostre lloc sigui molt més atractiu. Aquest article es centrarà en una d'aquestes solucions anomenada Owl Carousel. Configurar aquest control lliscant és increïblement senzill, de manera que fins i tot un principiant pot gestionar-ho. Ara aprendràs què és aquest control lliscant, així com altres detalls importants. Configurar Owl Carousel és un procés pas a pas, de manera que hauríeu d'estudiar aquest material només per ordre.
Què és i per què hauríeu de triar aquest control lliscant en concret?
Owl Carousel, la configuració del qual es tractarà en aquest article, és un connector molt eficaç que afegeix un control lliscant bonic i còmode a la vostra pàgina, que us facilitarà molt el treball al lloc.estalviant molt de temps, esforç i diners. Quins són els avantatges d'aquest complement en particular, perquè hi ha bastants controls lliscants al web? El cas és que aquest control lliscant us ofereix desenes d'opcions de personalització, que us permetran fer que la vostra pàgina sigui única i inimitable. És un connector responsiu que funcionarà en totes les versions del navegador i es pot connectar fàcilment a WordPress i altres CMS populars. En general, aquest control lliscant té molts avantatges, per la qual cosa hauríeu de triar definitivament al seu favor. Tanmateix, abans de començar a configurar Owl Carousel, aquest connector encara s'ha de carregar.
Baixa
La configuració de Owl Carousel 2 no és possible si no l'heu baixat al vostre ordinador i, com que es tracta d'una instrucció pas a pas, hauríeu de començar des del principi. Per tant, el programa es pot descarregar mitjançant gestors de paquets, però aquestes són eines de desenvolupament avançades, així que aquí us explicarem com obtenir aquest connector de la manera estàndard. Heu d'anar al lloc web oficial del connector i descarregar-ne la darrera versió. Després d'això, tots els fitxers descarregats s'han de transferir al directori del vostre lloc, després d'haver preparat una carpeta convenient, que s'anomena igual que el propi complement. Tingueu en compte que aquest connector s'inclou amb jQuery, de manera que també heu de tenir aquesta biblioteca disponible. Bé, un cop hàgiu descarregat aquest connector, haureu de fer-vos càrrec del següent pas que és configurar el control lliscant Owl Carousel 2.
CSS
BLa configuració de Owl Carousel 1.3 segueix sent gairebé la mateixa que a la versió 2 més recent, només s'afegeixen funcions noves. Tanmateix, la informació bàsica serà la mateixa, començant per afegir CSS al vostre document. Així que el primer pas és afegir la línia. Què et regala? Aquesta és una cadena que carrega els estils necessaris al lloc per mostrar el control lliscant. Aquí és on podeu acabar fent el processament visual vos altres mateixos. Tanmateix, hi ha una solució més còmoda i ràpida. També podeu afegir una línia que també carregui el tema predeterminat del control lliscant, fent-lo a punt per utilitzar-lo a l'instant. Podeu editar alguns dels estils per fer que el control lliscant sigui més únic i diferent, i més adequat per al vostre contingut. Naturalment, la configuració de Owl Carousel en rus seria molt convenient, però tota persona que creï llocs web hauria d'entendre que no pot prescindir de coneixements d'anglès.
Connexió JavaSpript
Per descomptat, el control lliscant no funcionarà sense JS, així que també hauríeu de tenir cura d'incloure el fitxer adequat que contingui el codi necessari. Per fer-ho, cal inserir una línia de codi de la documentació, però s'ha de complir una condició. Tothom sap que JS és un llenguatge de programació que executa totes les ordres en ordre, així que en aquest cas hauríeu d'afegir aquesta línia de codi després de la línia que afegeix la biblioteca jQuery al vostre document. Més amb JS en el cas d'aquest control lliscant, no teniu res a fernecessita.
Codificació HTML
Bé, has connectat el control lliscant, ara és el moment de dissenyar-lo i personalitzar-lo. En primer lloc, heu d'escriure el codi HTML perquè el control lliscant aparegui a la vostra pàgina. Per fer-ho, heu de crear un contenidor que contindrà les diapositives. Això es pot fer utilitzant l'etiqueta div, a la qual cal assignar la classe mussol-carrusel. És aquesta classe la que garanteix que s'activaran tots els estils relacionats amb el control lliscant. També podeu escriure una altra classe: el tema del mussol. Serà útil si decidiu utilitzar el disseny predeterminat o prendre la versió estàndard del control lliscant com a base per seguir treballant.
A continuació, heu d'afegir cada diapositiva en un contenidor independent amb una etiqueta div. Per descomptat, podeu utilitzar altres etiquetes, però aquesta etiqueta és la millor per als controls lliscants.
Connexió de trucada
I l'últim que heu de fer per tenir un control lliscant ja preparat al vostre lloc és utilitzar aquest bloc de codi:
$(document).preparat(funció(){
$(".carrusel de mussol"). Carrusel de mussol();
});
Assegura que el control lliscant comenci a funcionar, és a dir, desplaçar-se pel contingut, quan es carregui la pàgina. Amb el mateix codi, podeu connectar Owl Carousel a WordPress. La configuració d'aquest connector és nombrosa i variada, i ara coneixeràs els punts més clau.
Configuració de l'aspecte i la funcionalitat del control lliscant
Quines ordres podeu utilitzar per personalitzar el control lliscant? En primer lloc, heu de recordar l'ordre d'elements, ja que amb ell podeu establir un nombre específic de diapositives al control lliscant. L'ordre de bucle us permetrà triar si voleu obrir el control lliscant o deixar de desplaçar-vos a l'últim element. També hi ha l'ordre Arrossegar, que té diverses opcions, com ara el ratolí i el tacte. En el primer cas, podeu fer que els elements del control lliscant es puguin lliscar amb el ratolí premut, i en el segon cas, amb l'ajuda d'un toc (aquesta ordre és adequada per a dispositius mòbils). Una altra ordre important és nav, que permet la visualització de les fletxes de navegació. Juntament amb ell, podeu utilitzar l'ordre navText per afegir etiquetes als botons de navegació. A més, no us oblideu de l'ordre de reproducció automàtica, que us permet activar i desactivar l'inici automàtic de girar les diapositives del control lliscant quan es carrega la pàgina. Amb aquesta ordre, també podeu utilitzar autoplayTimeout, per al qual podeu establir un valor específic en mil·lisegons, que determinarà el temps entre el gir automàtic de cadascuna de les diapositives.
Si utilitzeu un disseny web responsive, és a dir, el disseny de la vostra pàgina canvia automàticament en funció del dispositiu on es visualitzi, haureu de recordar definitivament l'ordre responsive, que us permet establir el nombre de diapositives. per mostrar en funció de l'amplada de la pantalla on es visualitzi la pàgina.
