Pogled na instaliranje glatkog klizača ispod jQuery biblioteke. Ovaj dodatak zauzima jedno od najviših mjesta u ocjeni dodataka za izradu dijaprojekcija.
Pjevajući, nakon što je zasluženo zauzeo ovo mjesto, trebali biste stupiti u kontakt s njim i staviti ga u svoju riznicu web-snimača. Početna stranica dodatka s opisom instalacije raznih aplikacija nalazi se ovdje - slick Demos. Dodatak nema sve - ima sve funkcije upravljanja u svom skladištu, lagan je i jednostavan za instalaciju, HTML izgled za njegovu izradu je jednostavan i semantički. Glatki dodatak dolazi s novim skupom postavki koje se lako mogu povezati s konfiguracijskom datotekom.
Povezivanje glatkog dodatkaProces povezivanja slick dodatka u projekt koji radi vrlo je jednostavan, samo trebate provjeriti jesu li postavke točne.
Izrada oznaka pod glatkomHTML izgled za gladak dodatak je semantičan i jednostavan. Dovoljno je kreirati popis prikladnih naziva klasa. Korisnik Getting Started na službenoj stranici slick dodatka prikazuje sljedeće HTML oznake:
Moj pokušaj stvaranja klizača na temelju HTML rasporeda u obliku osnovnog popisa s grafičkim oznakama:
... nije donio uspjeh - gladak dodatak nije zarađen! Možda možete promijeniti elemente koristeći CSS stilove
| 1 | ul |
| 1 | li |
U sljedećem koraku dohvatit ćemo arhivu glatkog dodatka. Novac možete zaraditi na više načina. Prvi je da vas privuče s ove stranice Go Get It. Ili idite na autorovu GitHub stranicu i nabavite zip arhive dodatka – zgodni GitHub. U oba slučaja uklanjaju se arhive s imenima
Moguće je povezati gotove CSS stilove slick plugina s HTML dokumentom:Tijelo HTML dokumenta prije oznake koja se zatvara
| 1 |
Zapravo, u prva dva retka biblioteka jQuery-1.11.0 i dodatak jQuery Migrate 1.2.1 preuzeti su putem CDN-a. Treći dodatak
Uključujemo skriptu za inicijalizaciju dodatka: $(dokument). spreman (funkcija ()( $ (".klizač") . glatko (( točkice : istinito )); ));Podsumkov HTML izgled i povezivanje CSS tablica i JS skripti izgledat će ovako:
Želio bih znati nešto o tako bogatoj stvari kao što je konzola preglednika Google Chrome. Zašto postoji korisna? Jer i meni odjednom radi (prije svega, to je bilo s dodatkom jqFancyTransitions - jqFancyTransitions Slider) i pomaže u otkrivanju grešaka pri povezivanju skripti s HTML dokumentom. Nezamjenjiva stvar!
Kako bih ilustrirao korištenje preglednika i funkcionalnost Chrome konzole, pokrećem datoteku index.html u pregledniku koji sam ranije izradio.
I što?! Oprostite, a ovdje je gladak dodatak - klizač, kreacije za vašu pomoć? Kakve su to ljepote tako zorno prikazane na službenoj stranici projekta – Demos?! Divno je - ali nema ih!
Heh, jesam li se ispravno prijavio za povezivanje skripte? Dobro, proći ću dokumentaciju još jednom... Sve je točno, ali meni ne ide... Možda da ponovno prepišem indeksnu stranicu? Moguće je, ali može postojati veliki broj takvih “ili možda”, s različitim varijacijama.
Otvorimo konzolu preglednika Google Chrome i idimo na karticu "Mreža":
Ovo je glavni razlog zašto gladak dodatak ne radi na mojoj stranici! Samo što jQuery 1.11.0 biblioteka i jQuery Migrate 1.2.1 dodatak nisu mogli biti preuzeti u pregledniku Chrome putem CDN-a. Koliko bih sati i živaca potrošio da “znanstvenom metodom” utvrdim uzrok “kvara”, ako ne i same konzole, ne zna se.
Jedva čekam ni minutu da shvatim zašto preglednik nije mogao preuzeti datoteke putem CDN-a. Dakle, samo ću preuzeti datoteke "ručno" i povezati ih lokalno:
Opet pokrećem indeksnu stranicu index.html u pregledniku Google Chrome i... o Čudu! Glatki dodatak radi:
Slike se automatski pomiču i na dnu možete vidjeti paginaciju koju je generirala glatka skripta, očito prije podešavanja:
točkice: istina, autoplay: istina... u konfiguracijskoj datoteci. Osim toga, generirane su strelice za "ručno" premotavanje slike naprijed-natrag (nije vidljivo na bijeloj pozadini HTML stranice). Ostale postavke slick dodatka možete pogledati na službenoj stranici - Postavke.
NAPOMENA: Toplo preporučujem da svoju inicijalizacijsku skriptu stavite u vanjsku JS datoteku.
Ovaj članak nisam napisao iz jednog jednostavnog razloga - zbog preciznosti kundaka i fluidnosti njegove izrade.
Uređivanje glatkog dodatkaSada sam malo izgubio na desnoj strani - nakon što sam stvorio inspektor elemenata stranice (na primjer, Firebug), "izvukao" sam iz DOM stabla naše stranice nazive klasa elemenata koji su nam potrebni i možemo ih lako uređivati putem CSS pravila:
tijelo (boja pozadine: posvijetli (#ccc, 5%); .klizač(širina: 300px; margina: 10px auto; padding: 5px; boja pozadine: #ccc; obrub: 3px solid #000; @uključi bord (3px) ); .slick-dots( bottom : -30px ; ) ) )Stvaram za tijelo HTML dokumenta
Dodat ću podstavu, kordon sa zaobljenim rubovima i ispunu pozadine; Centrirati ću ga sa strane i malo spustiti. I također malo uz brdo| 1 | .slick-dots |
Rezultat je nevjerojatan:
Dodatak slick me definitivno je bio uspješan. Lako se instalira i povezuje, generira elemente prikazivanjem slajdova i ima veliki broj različitih postavki. Za razne opcije za prilagodbu novog izgleda možete i morat ćete otići na stranicu aplikacije - Demos. I prilagoditi se potrebnim specifičnim umovima prema potrebi.
Zbogom kodiranju!
Pozdrav, želim vam reći o glatkom klizaču za web mjesto, koji se pokazao laganim, univerzalnim i jednostavnim za instalaciju. Ovdje možete implementirati sve što se odnosi na klizače i vrtuljke. Kao što kreator dodatka navodi, "posljednji vrtuljak koji ćete ikada trebati", što se može protumačiti kao jedinstveni univerzalni vrtuljak koji je prikladan za bilo koju vašu ideju. I to je istina. Ima puno toga u njemu, od osnovnog klizača do prilagodljivog vrtuljka sa slajdovima u nekoliko redova.
Dodatak mogu sigurno koristiti i početnici i napredni čitači weba. Ovo je vrlo jak konkurent svemu što znamo. Iz kutije možemo izvaditi i alat s bogatom zadaćom.
Da biste instalirali klizač/vrtuljak na svoju web stranicu, sve što trebate učiniti je ispuniti 3 jednostavna koraka.
Instaliranje glatkog klizačaAplikacija br. 1 (Slider)1. Krok - Povezivanje stilova skripte i dodatka.
html stranice.
$(dokument).spreman(funkcija())( $(".vaš-razred").slick(); ));
Morate se povezati između oznaka vaše html stranice, a ne nakon koda koji ste ubacili za rad br.
U ovom smo primjeru pokazali kako instalirati glatki klizač poput vrtuljka s jednim glavnim toboganom.
Ispod se možete diviti prednjoj stražnjici gore opisanih.
Kundak br. 2 (Vrtuljak)Za postavljanje vrtuljka potrebno je učiniti sve isto kao u prethodnom opisu, osim što su stavka br. 2 i stavka br. 3 malo promjenjive.
2. Croc - umetanje HTML koda samog slajdera.
Ovaj kod je potrebno umetnuti između oznaka ako želite prikazati sam klizač.
3. Croc – inicijalizacija klizača.
$(document).ready(function())( $(".your-class").slick(( infinite: true, slidesToShow: 3, slidesToScroll: 3 )); ));
I u ovoj smo aplikaciji vicorizirali gladak klizač kao vrtuljak (s 3 glavna slajda) i za koji smo vicorizirali neke parametre dodatka.
Možete se diviti radu ovog vrtuljka u donjem primjeru.
Nakon što dobijete ukupno 3 komada, možete odabrati vrtuljak ili klizač za svoje potrebe. Postoji mnogo više mogućnosti za ovaj slajder. Ako imate poteškoća ili problema s prehranom, pitajte ih u komentarima i pokušat ću brzo odgovoriti.
Dobili smo skriptu klizača od prošlotjednog tima
$ bower i slick.js
Ovo možete saznati i na Googleu - prvo pitajte slicka http://kenwheeler.github.io/slick/
Prednosti klizača: podržava dodirne događaje, možete ih gledati na telefonu prstom- podržava responzivnost - možete postaviti broj slajdova prema veličini ekrana: na velikim ekranima možete pogledati 4 slajda, na srednjim 2-3, na telefonima jedan po jedan
Dobra je praksa uključiti skripte iz mape bower_components
Također, kada ažurirate skriptu s programom Bower, nećete morati prepisivati broj verzije u kodu, tako da Bower daje skriptama trajna imena, koja se neće mijenjati prilikom ažuriranja.
Koji se stilovi nalaze u slick mapi: slick.css, slick.less, slick.theme.less, bolje ih je kopirati u mapu sa css-om i uključiti. Ako ih lišite njihovog mjesta i napravite promjene u stilu klizača, tada će se sve promjene izgubiti kada se skripta ažurira.
Za razliku od drugih klizača, okviri se ne postavljaju na popis, već u blokove:
1 2 3 4 5 6
Klik bez parametara Kada kliknete na dodatak bez parametara, možete odabrati jednostavnu opciju s jednim slajdom sa strane i navigacijskim strelicama.$(".pojedinačna stavka"). gladak();
Prikazivanje više slajdova U aplikaciji smo postavili parametre “slick slider” za kružno pomicanje, omogućili prikaz navigacijskih točaka i odredili broj slajdova koji se prikazuju i pomiču.$(".više stavki"). glatko ((
beskonačno: istina,
// petlja klizača - nakon preostalog slajda prvi ide s točkama: true,
// točkice ispod klizača za prikaz aktivnog slajda
slidesToShow: 3,
//broj slajdova za prikaz na ekranu slidesToScroll : 1
//koliko je slajdova odjednom snimljeno
)); Način centriranja U načinu centriranja aktivni slajd se postavlja u središte.
$(".centar"). glatko ((
centerMode: istina,
slidesToShow: 3,
});
Središnji tobogan ima klasu "slick-center", što znači da se može drugačije dizajnirati. Prilagodljivost U klizaču možete prilagoditi prilagodljivi dizajn broja slajdova ovisno o širini zaslona. Na primjer, trebate prikazati samo 2 slajda kada je širina zaslona manja od 600 piksela i miješati ih jedan po jedan. Ova će palača izgledati ovako
$(".uncycle" ) . slick(( infinite: false, speed: 350, // označava fluidnost izgorjelih slajdova slidesToShow: 4, // broj slajdova za prikaz slidesToScroll: 2, // koliko će slajdova pregorjeti u trenutku responsive: [ ( breakpoint: 600 , // označava koju širinu zaslona, trebate omogućiti postavke podešavanja: (slidesToShow: 2, slidesToScroll: 1, infinite: true,))))));
Glatko prebacivanje U standardnom postavljanju klizača dolazi do iznenadne promjene slajdova. Osim toga, funkcija Slick omogućuje glatku promjenu slajdova. Da biste to učinili, morate ići na data-lazy atribut, u kojem je napisan put do slike. Atribut ne treba priložiti samoj slici, već samoj oznaci slike. To omogućuje da js kod bude jedinstven. Alternativa bi bila momčadLazyLoad: "na zahtjev"
Napišite atribut traga ovako
< img data- lazy = " images/slaid.jpg" >
Osobitost takvog klizača leži u činjenici da postoji samo jedan slajd na zaslonu, koji se, kada se prebaci, pomiče korak po korak. Učinak se temelji na principu glatkog povećanja vidljivosti. Zatim se odabire segment prvog sata, tijekom kojeg se vidljivost prvog slajda mijenja od 0% do 100%, tijekom čega sljedeći slajd postaje vidljiv. Skripta za takav klizač izgleda ovako$(".fade") . glatko(( beskonačno: istinito, brzina: 400, blijeđenje: istinito, cssEase: "linearno" )) ;
Slick je najsvestraniji i najjednostavniji klizač koji je danas dostupan. Široki interval podešavanja klizača pogoduje odluka o ugradnji klizača, što je svakako najvažnija prednost ovog klizača. Podešavanje glatkog klizača- Pristupačnost – početna vrijednost ovog parametra postavljena je na true, označavajući vezu navigacijskih tipki za klizač – strelice naprijed i natrag, a tipke pokazuju kao točku.
- adaptiveHeight – ograničen je samo na jedan klizač, u kojem se visina originalnog spremnika mijenja ovisno o visini klizača. Umovi kob veze nemaju.
- autoplay – podešava reprodukciju slajdova u automatskom načinu rada bez pomoći nastavnika. Standardna vrijednost ovog parametra je false.
- autoplaySpeed – ovaj parametar je komplementaran automatskoj reprodukciji i postavlja količinu vremena prije nego što se slajd automatski pokrene. Početna vrijednost za ovo je 3000 milisekundi.
- strelice – povezuje strelice naprijed i nazad na klizač. Pomoću dodatne tablice vanjskih stilova možete promijeniti položaj i izgled ovih strelica.
- asNavFor – umeće navigacijsku vezu između dva klizača koristeći dodatni identifikator i klasu. U kukuruznim ljuskama parametar ima nultu vrijednost.
- prevArrow – omogućuje vam promjenu izgleda standardne navigacijske strelice koja ide gore na prednjem slajdu.
- nextArrow – slično funkciji prethodnog parametra, ali djeluje kao strelica koja pomiče slajd prema naprijed.
- centerMode – popravlja trenutni slajd kao središte Očevog spremnika, počevši od parametra uključivanja.
- centerPadding – kada je slajd toka prikazan u središnjem načinu rada (prednji parametar), postavlja unutarnje padding za taj slajd, što vizualno omogućuje povećanje slajda toka.
- cssEase - pruža animaciju za miješanje slika, koje može biti glatko ili naglo. Donosi standardnu vrijednost "lakoća".
- customPaging – omogućuje umetanje prilagođenog predloška u prikaz klizača.
- točkice – povezuje točke premošćavanja i ostaje u stanici za pranje.
- draggable - omogućuje mogućnost povlačenja slajdova prilikom stiskanja medvjeda. Zatim, ako pomaknete kursor miša preko klizača, stisnete ga i pomaknete, slajd će se prebaciti na onaj koji napreduje.
- fade – stvara efekt blijeđenja slajda tijekom miksanja, efekt animacije.
- focusOnSelect – fokusira zadatke na element klizača.
- easing – omogućuje vam postavljanje posebnog načina animacije kada se slike mijenjaju.
- edgeFriction – vibrira miješanje slajdova na preostalom elementu. To je osobito istinito jer se klizač ne vrti u petlju.
- beskonačno – ponavlja dijaprojekciju. To znači da će se početi pojavljivati kada remiksate preostale slike dijaprojekcije.
- initialSlide – označava sliku od koje će započeti dijaprojekcija. Nakon toga, klizač za početak odabire prvu sliku.
- lazyLoad – omogućuje vam postavljanje načina za učitavanje sljedećih slajdova. Postoje samo 2 vrijednosti dostupne za prilagodbu: "ondemand" i "progressive", a preostale vrijednosti su za prilagodbu.
- pauseOnHover – pauzira pomicanje slajdova kada kursor miša lebdi iznad tijela klizača. To je zato što je naznačeno automatsko miješanje slajdova.
- pauseOnDotsHover - pauzira pomicanje slajdova kada kursor miša lebdi iznad točkastih skakača. To je zato što je naznačeno automatsko miješanje slajdova.
- respondTo – pokreće reakciju promjene širine prozora preglednika. Dostupne su tri vrijednosti: "prozor", "klizač" ili "min".
- responsive – omogućuje prilagodbu postavki klizača širini zaslona. Razlikuje se od prethodne prilagodbe po tome što su granice širine dodijeljene točnim vrijednostima piksela. Vikorist za prilagodljivi izgled za mobilne uređaje.
- slidesToShow – omogućuje vam postavljanje broja slika koje će biti prikazane u vidljivom području. Prvo se prikazuje jedan slajd, a ostale vrijednosti se mogu mijenjati.
- slidesToScroll – obavještava klizač koliko slika treba promijeniti prilikom prebacivanja.
- brzina – popravlja brzinu koja uzrokuje miješanje slajdova.
- variableWidth – prilagođava širinu spremnika klizača širini slike kože koja se prikazuje.
Dodat ću još.
1. Provjerite repozitorij ovdje https://github.com/kenwheeler/slick
2. U datoteku index.html, prije one koja se otvara, dodajte stilove klizača:
Prije zatvaranja uključujemo skripte
Ovaj klizač će zahtijevati fontove. Mapa fontova iz mape klizača mora se smjestiti u css mapu projekta.
A u slider folderu treba znati mali ajax-loader.gif i u slick-theme.css fajlu napisati put do novog
3. Sada je divi omota klizača dodijeljena klasa, na primjer, više stavki
I u datoteci script.js pišemo kod
$(dokument).spreman(funkcija())(
$(".multiple-items").slick((
autoplay: false,
Brzina automatske reprodukcije: 6000,
strelice: istina,
beskonačno: istina,
točkice: istina,
CenterMode: istina,
slidesToShow: 3,
slajdovi za pomicanje: 1
});
});
4. Klizač već radi. Ne vidi se samo os strelica, jer se iza granica klizača osjeća smrad, a širina klizača pokriva cijeli zaslon. Strelice se nalaze u datoteci slick-theme.css i ulazi se mijenjaju tako da se strelice nalaze u sredini klizača, a ne u sredini.
5. Dobro. Sada, po mom mišljenju, središnji klizač klizača je kriv za ometanje.
napišite ono što je dovoljno napisati u kodu
$(".sredina").slick((
CenterMode: istina,
//Centrirajte slajd protoka
centerPadding: "50px",
// malo precizniji slajd
slidesToShow: 3
//vidljiva 3 slajda za pregled
});
Za povećanje veličine središnjeg klizača. U stvarnosti, ova metoda ne funkcionira
Poboljšan središnji klizač sa stilom
.slick-center(
boja pozadine: #8cc63f;
transformacija: mjerilo (1.3);
}
Pozdrav svima i danas vam govorim o vrlo cool i jednostavnom slajderu - slicku.
Idi na stranicu http://kenwheeler.github.io/slick/ Tamo možete pronaći puno primjena robota slick slider. Ovaj klizač zapravo ima puno različitih efekata i također se pomiče pomoću miša. Tobto. Lijevom tipkom miša možete kliknuti bilo koji element u klizaču i pomoću miša premotati klizač lijevom ili desnom rukom. Ova funkcija nije sasvim korisna za računala, ali na pametnim telefonima i tabletima – jednako!
Dakle, da biste ga povezali, preuzmite datoteke s ove stranice. Sada možemo stvoriti HTML i uključiti potrebne komponente, koristeći jquery, jer... Klizač vikory sadrži ovu biblioteku za svoj rad.
vaš sadržaj
vaš sadržaj
vaš sadržaj
Povežite stilove
Í omogućite skripte
Da biste pokrenuli klizač, napišite sljedeće u oznaku skripte:
$(".vaš-razred").slick((
naziv-postavke: vrijednost-postavke
});
});
Kada završite, vaša html datoteka izgledat će otprilike ovako:
Gladak
vaš sadržaj
vaš sadržaj
vaš sadržaj
$(dokument).spreman(funkcija())(
$(".vaš-razred").slick((
naziv-postavke: vrijednost-postavke
});
});
Ovaj klizač ima niz postavki koje možete sami postaviti. Sve ih možete pronaći upravo na tom mjestu na dnu stranice u tablici. Postavite njihove upute za inicijalizaciju u objektu.
$(document).ready(function())( $(".your-class").slick(( autoplay: true; )); ));
Čijim je opušcima rečeno da mogu automatski spaliti dijapozitive.
Također, kao što vidite, klizač je vrlo jednostavan za instalaciju i konfiguraciju, ali vam omogućuje da održite sjajne govore. Hvala na poštovanju i Šveđaninu!
slick - sveobuhvatnije rješenje funkcionalnosti vrtuljka, u različitim pojavnim oblicima. Demo snimke, tipične opcije i publikacije mogu se pogledati/dobiti.
Pošaljite svoju prijavuOsnovna konfiguracija slicka uključuje brojne skripte, brojne stilove i jednostavan font. Koristim skraćenu verziju:
- slick.min.js (minimizacija)
- slick.css (+ stilovi se mogu čistiti)
- slick-theme.css (+ stilovi se mogu čistiti)
Stilovi, jer se torba može kombinirati u jednu.
Zamjenjujem glatki font s većim FontAwesome
Glavnu funkcionalnost karusela postavlja div class="multiple-items". div class="carousel" je potreban samo za definiranje unosa vrtuljka.
Skripta za inicijalizaciju skripte
$(document).ready(function() ( $(".multiple-items").slick(( //beskonačno: istina, //automatska reprodukcija pomicanja: istina, slidesToShow: 3, slidesToScroll: 3 )); ) );
Slick-slider (širina: 100%; float: lijevo;).slick-slide (kursor: pointer;).multiple-items .slick-slide (margina: 0 15px;).carousel (padding: 0 3%; float: left;width:100%;box-sizing:border-box;) /* za woocommerce proizvode */ .carousel .woocommerce ul.products li.product (margina: 1em 0 1,992em 0; širina: 100%;)
Vrtuljak za woocommerce proizvode
Nekoliko minuta nakon prikazivanja proizvoda za vrtuljak (! Nije univerzalno rješenje, različite opcije izgleda mogu se pojaviti drugačije):
Pri korištenju vrtuljkih skripti dolazi do izobličenja izgleda. Možemo stvoriti stilove klipa koji skraćuju vrtuljak unutar rasporeda toka:
Multiple-items (display: flex !important; flex-wrap: wrap; margin-bottom: 25px;).multiple-items img ( -moz-backface-visibility: vidljivo; -webkit-backface-visibility: vidljivo; backface-visibility : vidljivo; ) .slick-list (margina: 0 -1px 0 0 !važno; padding: 0 1px 0 0 !važno; širina: 100%;) .slick-track (obrub: čvrsti #e9eaec; širina obruba: 0 0 0 1px; display: flex !important; padding-bottom: .1rem;).carousel .product ( border: solid #e9eaec; border-width: 1px 1px 1px 0; background: #fff; : none, text-align: centar; pozicija: relativna; margina-dno: -.1rem; visina: automatski; ) .više stavki > .proizvod (širina: 25%;
Power backface za sliku naznakom, jer Ako želite lišiti skrivene onda kada premotavate smrad naljepnica hodnika.
Prilagodljivost karuselaSkripta se može konfigurirati za različite veličine zaslona. U tu svrhu, odgovarajući parametri navedeni su u postavkama
Responzivno: [ ( prijelomna točka: 1280, postavke: ( slidesToShow: 4, slidesToScroll: 4, ) ), ( prijelomna točka: 1024, postavke: ( slidesToShow: 3, slidesToScroll: 3, ) ) ( ( prijelomna točka: : 2, slidesToScroll: 2 ) ), ( prijelomna točka: 480, postavke: ( slidesToShow: 1, slidesToScroll: 1 ) ) ]
Ili ga jednostavno uključite odvojeno - postavke: "unslick"
Glatki klizačOstatak vremena gradim glavni klizač na temelju slicka. To nije veliki problem - kada se klikne stranica, svi slajdovi se prikazuju na nekoliko sekundi, a zatim se presavijaju. Maskirala sam to ovako:
Sve osim jednog slajda je nevidljivo:
Slick-track > div:nth-child(2) img (display: block !important;) #index-slider img (display: none;)
A kada se stranica privuče, čut će se još nešto:
JQuery(document).ready(function())( jQuery("#index-slider img").css("display", "block"); ));
Poboljšanje slajdova
Slick dodaje još jednu korisnu funkciju, lazyload(). Vi samo trebate dodati snagu lazyLoad: 'ondemand' skripti. Mijenjam prednji plan slike:
Ili to možete reći i ovako:
">
A da bi slajdovi odmah postali zadivljujući, potrebno je napisati power lazyLoad: 'progressive'
Standardna slika ne radi sasvim ispravno, preporučujem da provjerite vezu s lazyloadom.
Mobilna verzija klizača
Možete dobiti više od mobitela. verzija, visina klizača, zbog koje će se pojaviti rubovi slike, a slika će biti veća:
@medijski zaslon i (max-device-width: 480px) ( #index-slider, .hotel-photos (height: 200px;).slick-list, .slick-track (height: 100%;) #index-slider img , .hotel-photos img (visina: 100%; prilagodba objekta: naslovnica;) )
pristajanje objekta: naslovnica; - Snažni CSS 3, podržan od većine preglednika
GalerijaNedavno sam na jednom od sajtova dobio respekt za Slick vikoristan u galeriji. Posebnost je u tome što se galerijske slike protežu do rubova ekrana (milju od mjesta na cijelom ekranu).
Da biste to implementirali, trebate postaviti klizač (#index-slider) na spremnik (.s2) i dodati sljedeće stilove:
S2 (overflow: hidden; display: block;) #index-slider (max-width: 1000px; margin: 0 auto;) .s2 .slick-list (overflow: visible;) #index-slider .slick-slide img ( max-width: 800px; margina: 0 auto;)
ili još jednostavnije:
Za izradu takve galerije trebate samo unijeti 2 stila:
#index-slider (max-width: 1280px; margin: 0 auto;) #index-slider .slick-list (overflow: visible;)
Prijenosna računala
