Html5 klizač koji reagira. Kako napraviti responzivni klizač u css3? Responsive CSS3 Slider

Jedan od efikasne načine privlačenje pažnje korisnika na stranici web stranice je stvaranje pokretne animacije. Elementi animacije pomažu da se korisnicima jasnije ispriča i prikaže vaš proizvod. Nedavno su klizni paneli postali vrlo popularni, kao i brojni drugi efekti koji se pojavljuju pri pomicanju ili kliku na sliku. Poznati su i kao klizači, vrtuljci i klizne ploče. Ovaj će se članak fokusirati na stvaranje responzivnog klizača s rotirajućim izbornikom s glatkim efektom automatskog pomicanja.

Do danas na mreži postoji stotine pregleda s vezama na gotova rješenja, ali većina njih sadrži mnoge neiskorištene funkcije koje značajno smanjuju performanse klizača, kao i usporavaju učitavanje web stranice u cjelini. Profesionalni web programeri uvijek su nastojali stvoriti fleksibilno prilagođavanje softverskih proizvoda, sa niskim pragom za dodatne biblioteke i dodatke. Zato su minimalni zahtjevi za organizaciju takvog klizača uključeni u rad naše skripte. Funkcionalnost rada omogućuje vam postavljanje intervala prebacivanja, brzine, kao i izbor određenog slajda. Ispod je niz varijabli koje kontroliraju rad samog klizača.

timeList- brzina kliznog prebacivanja

TimeView- pokazi vrijeme

RadioBut- dugmad ispod klizača za brzu navigaciju. Zadana vrijednost je true, ako koristite false, tipke će nestati.

Sada počnimo! Kreirajmo i otvorimo datoteku index.htm

U predstavljenom kodu, kao što vidimo, nema ništa komplicirano, klizni omot definiše opšti položaj i poravnava klizač prema sredini ekrana. Parametar active-slide postavlja veličinu i visinu slike prema njenoj dužini. AND klizač prikazuje samo aktivnu sliku.

Sada kreirajmo i otvorimo datoteku style.css i tamo dodajte oznake koje nam trebaju:

@import url ("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); body (color: # 4f4f5a; font-family: "Roboto", sans-serif; font-size: 16px; padding: 0; margin: 0;) # slider-wrap (max-width: 800px; margin: 0 auto; margin-top: 80px;) # active-slide (width: 100%; display: table; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms- user-select: none; -o-user-select: none; user-select: none;) #klizač (pozicija: relativna; širina: calc (100% * 4); vrh: 0; lijevo: 0; margina: 0 ; padding: 0; -webkit-tranzicija: 1s; -o-prijelaz: 1s; prijelaz: 1s; -webkit-tranzicija-timing-funkcija: jednostavnost-u-izlazu; -o-prijelaz-vremenska funkcija: lakoća-u -out; funkcija prijelaza-vremena: jednostavnost-u-izlazu;). slajd (širina: calc (100% / 4); stil liste: nijedan; prikaz: inline; float: lijevo;). slid img (širina: 100%;) .Radio-But (margin-top: 10px; text-align: center;) .Radio-But .ctrl-select (margin: 2px; display: inline-block; width: 16px; height: 16px; overflow) : hidden; text -indent: -9999px; background: url (radioBg.p ng) središnje dno bez ponavljanja; ) .Radio-But .ctrl-select: hover (pokazivač: pokazivač; pozadinska pozicija: središte u centru;). Radio-But .ctrl-select.active (pozicija u pozadini: središte gore;) #prewbutton, #nextbutton (prikaz : blok; širina: 40px; visina: 100%; pozicija: apsolutna; vrh: 0; preljev: skriven; uvlačenje teksta: -999px; pozadina: url ("arrowBg.png") u lijevom centru bez ponavljanja; neprozirnost: 0,5 ; z-index: 3; outline: none! important;) #prewbutton (lijevo: 10px;) #slijedeće dugme (desno: 10px; pozadina: url (arrowBg.png) desno u centru no-repeat;) #prewbutton: hover, # nextbutton: hover (neprozirnost: 1;)

U stilu nekretnina klizni omot zapisati širina – maksimalna dužina vaše slike.

U stilu nekretnina #klizač (širina: calc (100% * 4);) i .slide (širina: calc (100% / 4);) odredite broj slika u klizaču. U našem primjeru ima ih 4.

Ako strelice naprijed / natrag ometaju vidljivost vašeg klizača, možete ih učiniti nevidljivima i pojavit će se pri mišu. Da biste to učinili, u parametrima prewBut i nextAli, postavite svojstvo neprozirnosti na 0.

Sada kreirajmo i otvorimo našu datoteku slider.js, koji će sadržati klizač. Ne zaboravite uključiti jQuery biblioteku.

$ (document) .ready (function () (var timeList = 700; var TimeView = 5000; var RadioBut = true; var slideNum = 1; var slideTime; slideCount = $ ("# slider .slide"). dužina; var animSlide = function (arrow) (clearTimeout (slideTime); if (arrow == "next") (if (slideNum == slideCount) (slideNum = 1;) else (slideNum ++) translateWidth = - $ ("# active -slide ") .width () * (slideNum - 1); $ ("# slider "). css ((" transform ":" translate (" + translateWidth +" px, 0) "));) else if (arrow = = "prew") (if (slideNum == 1) (slideNum = slideCount;) else (slideNum- = 1) translateWidth = - $ (" # active -slide"). width () * (slideNum - 1); $ ("#slider"). css (("transform": "translate (" + translateWidth + "px, 0)"));) else (slideNum = arrow; translateWidth = - $ (" # active -slide"). width () * (slideNum -1); $ ("# slider"). css (("transform": "translate (" + translateWidth + "px, 0)"));) $ (". ctrl -select. active ") .removeClass (" active "); $ (". ctrl -select "). eq (slideNum - 1) .addClass (" active ");) if (RadioBut) (var $ linkArrow = $ ("<>") .prependTo (" # active-slide "); $ (" # nextbutton "). kliknite (function () (animSlide (" next "); return false;)) $ (" # prewbutton "). click (function () (animSlide ("prew"); return false;))) var adderSpan = ""; $ (". slide"). svaki (funkcija (indeks) (adderSpan + = " " + indeks +""; }); $("

" + adderSpan +"
") .appendTo (" # slider-wrap "); $ (". ctrl-select: first "). addClass (" active "); $ (". ctrl-select "). click (function () (var goToNum = parseFloat ($ (this) .text ()); animSlide (goToNum + 1);)); var pause = false; var rotator = function () (if (! pause) (slideTime = setTimeout (function () (animSlide ("next")), TimeView);)) $ ("# slider-wrap"). hover (function () (clearTimeout (slideTime); pause = true;), function () (pause = false; rotator () ;)); var click = false; var prevX; $ (". slide"). mousedown (funkcija (e) (klik = tačno; prevX = e.clientX;)); $ (". slajd"). function () (klikom = false;)); $ (dokument) .mouseup (function () (klikom = false;)); $ (". slajd"). mousemove (funkcija (e) (ako (klik == true ) (if (e.clientX< prevX) { animSlide("next"); clearTimeout(slideTime); } if(e.clientX >prevX) (animSlide ("prew"); clearTimeout (slideTime);) click = false; ))); $ (". slide"). hover (). css ("cursor", "pointer"); rotator (); ));

Funkcija animSlide ima tri vrste vrijednosti: next, prew, numerička vrijednost. Sljedeći parametar prebacuje sljedeći slajd, prew vraća prethodni, a numerička vrijednost definitivno je navedeni slajd odabran putem radio dugmadi ispod slajda.

U prikazanom klizaču korištene su slike s web izvora https://pixabay.com/.

Ako trebate dodati visokokvalitetni klizač za slike jQuery na svoju web lokaciju, u ovom ćete članku pronaći opis potrebnih dodataka. Iako je jQuery znatno olakšao rad s JavaScriptom, još uvijek su nam potrebni dodaci za ubrzanje procesa web dizajna.

Možemo promijeniti neke od ovih dodataka i stvoriti nove klizače koji su mnogo više u skladu s ciljevima naše web stranice.

Za ostale klizače samo trebate dodati naslove, slike i odabrati efekte promjene slajda koji dolaze s klizačem. Sve ove dodatke prati detaljnu dokumentaciju pa im je lako dodavati nove efekte ili funkcije. Možete čak i promijeniti okidače zasnovane na događajima ako ste iskusan programer jQueryja.

Najnoviji trendovi poput adaptivni dizajn su vrlo važni za web projekte, bilo da implementirate dodatak ili skriptu. Svi ovi elementi čine svaki od ovih dodataka vrlo fleksibilnim. Sve što je izašlo 2014. godine uključeno je u ovu listu.

JQuery klizači slika

Jssor Responsive Slider

Nedavno sam naišao na ovaj funkcionalni jQuery klizač i iz prve ruke sam mogao vidjeti da vrlo dobro radi svoj posao. Sadrži beskrajne mogućnosti koje se mogu proširiti pomoću klizača otvorenog koda:

  • Adaptivni dizajn;
  • Više od 15 mogućnosti prilagođavanja;
  • Više od 15 efekata promjene slike;
  • Galerija slika, vrtuljci, podrška za cijeli ekran;
  • Okomiti rotator bannera, lista slajdova;
  • Video podrška.

Demo | Skinuti

PgwSlider je responzivni klizač zasnovan na JQuery / Zepto

Jedina svrha ovog dodatka je prikazivanje dijaprojekcija slika. Vrlo je kompaktan jer su jQuery datoteke veličine samo 2,5 KB, što ga čini vrlo brzim za učitavanje:

  • Responsive layout;
  • SEO optimizacija;
  • Podržavaju različiti pretraživači;
  • Jednostavni prijelazi slike;
  • Veličina arhive je samo 2,5 KB.

Demo | Skinuti

Jquery vertikalni klizač za vijesti

Fleksibilan i koristan jQuery klizač dizajniran za izvore vijesti sa popisom postova s ​​lijeve strane i slikom s desne strane:

  • Adaptivni dizajn;
  • Vertikalni stupac za promjenu vijesti;
  • Proširena zaglavlja.

Demo | Skinuti

Wallop klizač

Ovaj klizač ne sadrži JQuery, ali želim ga predstaviti jer je vrlo kompaktan i može značajno skratiti vrijeme učitavanja stranice. Javite mi ako vam se sviđa:

  • Responsive layout;
  • Jednostavan dizajn;
  • Razne opcije za promjenu slajdova;
  • Minimalni JavaScript kod;
  • Veličina je samo 3KB.

Demo | Skinuti

Polaroid galerija u ravnom stilu

Galerija u stilu dokumenata razbacanih po stolu s fleksibilnim rasporedom i prekrasan dizajn trebalo bi da zanima mnoge od vas. Pogodnije za tablete i velike zaslone:

  • Responsive klizač;
  • Ravan dizajn;
  • Nasumična promjena slajdova;
  • Potpuni pristup izvornom kodu.

Demo | Skinuti

A-klizač

Demo | Skinuti

HiSlider - klizač za slike HTML5, jQuery i WordPress

HiSlider je predstavio novi besplatni jQuery klizni dodatak koji vam omogućuje stvaranje raznih galerija slika sa fantastičnim prijelazima:

  • Responsive klizač;
  • Nije potrebno znanje programiranja;
  • Nekoliko sjajnih predložaka i skinova;
  • Prekrasni efekti prijelaza;
  • Podrška za različite platforme;
  • Kompatibilan sa WordPress, Joomla, Drupal;
  • Mogućnost prikaza sadržaja različite vrste: slike, YouTube video zapisi i Vimeo video zapisi;
  • Fleksibilno prilagođavanje;
  • Korisne dodatne funkcije;
  • Prikazan neograničen sadržaj.

Demo | Download

Wow slider

WOW klizač je responzivni jQuery-klizač za slike sa zadivljujućim vizuelni efekti (domine, okret, zamućenje, okretanje i blic, izlijetanje, rolete) i profesionalne predloške.

WOW Slider dolazi s čarobnjakom za instalaciju koji vam omogućuje stvaranje fantastičnih klizača u nekoliko sekundi bez potrebe za prolaženjem koda i uređivanjem slika. Dostupne za preuzimanje su i verzije dodatka za Joomlu i WordPress:

  • Potpuno odzivan
  • Podrška za sve preglednike i sve vrste uređaja;
  • Podrška za dodirne uređaje;
  • Laka instalacija na WordPress;
  • Fleksibilnost u prilagođavanju;
  • SEO optimiziran.

Demo | Download

Nivo Slider je besplatni dodatak za jQuery

Nivo Slider poznat je u cijelom svijetu kao najljepši i najjednostavniji klizač za slike. Dodatak Nivo Slider je besplatan i objavljen pod MIT licencom:

  • Zahtijeva JQuery 1.7 ili noviji;
  • Prekrasni efekti prijelaza;
  • Jednostavno i fleksibilno za prilagođavanje;
  • Kompaktan i prilagodljiv;
  • Open source;
  • Snažan i jednostavan;
  • Nekoliko različitih predložaka;
  • Automatsko obrezivanje slike.

Demo | Download

Jednostavan jQuery klizač sa tehničkom dokumentacijom

Ideja je inspirirana Appleovim klizačima u kojima može izletjeti nekoliko malih elemenata s različitim efektima animacije. Programeri su pokušali implementirati ovaj koncept uzimajući u obzir minimalni zahtevi za stvaranje jednostavan dizajn internetska trgovina u kojoj elementi „izlijetanja“ predstavljaju različite kategorije:

  • Responsive layout;
  • Minimalistički dizajn;
  • Razni efekti ispadanja i mijenjanja slajdova.

Demo | Download

JQuery klizač za sliku u punoj veličini

Vrlo jednostavan klizač koji zauzima 100% širine stranice i prilagođava se veličini ekrana mobilnih uređaja. Radi s CSS prijelazima, a slike su "naslagane" sidrima. Sidro se može zamijeniti ili ukloniti ako ne želite povezati vezu sa slikom.

Kada se instalira, klizač se proširuje na 100% širine ekrana. Također može automatski smanjiti veličinu slika slajdova:

  • Odgovarajući jQuery klizač;
  • Full-size;
  • Minimalistički dizajn.

Demo | Download

Klizač elastičnog sadržaja + vodič

Elastični klizač za sadržaj automatski podešava širinu i visinu na osnovu dimenzija roditeljskog elementa. Ovo je jednostavan jQuery klizač. Sastoji se od područja slajda pri vrhu i navigacijske kartice na dnu. Klizač podešava svoju širinu i visinu kako bi odgovarao dimenzijama roditeljskog kontejnera.

Kada se gledaju na dijagonalno malim ekranima, navigacijske kartice pretvaraju se u male ikone:

  • Adaptivni dizajn;
  • Pomeranje klikom miša.

Demo | Download

Besplatni 3D klizač za slaganje

Eksperimentalni klizač koji lista 3D slike. Dvije gomile nalikuju gomilama papira, s kojih se pri pomicanju slike prikazuju u sredini klizača:

  • Adaptivni dizajn;
  • Preokret;
  • 3D efekti.

Demo | Download

Klizač za prorez na cijelom ekranu koji podržava JQuery i CSS3 + vodič

Ovaj vodič će vam pokazati kako stvoriti klizač sa zaokretom: ideja je izrezati i prikazati trenutni slajd dok otvarate sljedeću ili prethodnu sliku. Koristeći jQuery i CSS animaciju možemo stvoriti jedinstvene efekte prijelaza:

  • Adaptivni dizajn;
  • Splitska tranzicija;
  • Klizač na cijelom ekranu.

Demo | Download

Unislider je vrlo mali jQuery klizač

Bez nepotrebnih zvona i zvižduka i oznaka, veličina je manja od 3KB. Koristite bilo koji HTML za slajdove, proširite ga pomoću koristeći CSS... Sve što se odnosi na Unslider hostirano je na GitHub -u:

  • Podrška za različite preglednike;
  • Podrška za tastaturu;
  • Podešavanje visine;
  • Adaptivni dizajn;
  • Podrška za unos dodirom.

Demo | Skinuti

Minimalno osjetljivi slajdovi

Jednostavan i kompaktan dodatak ( veličina je samo 1 Kb) koje stvara responzivni klizač pomoću elemenata unutar kontejnera. ResponsiveSLides.js radi s veliki iznos preglednici, uključujući sve verzije IE -a od IE6 i novije:

  • Potpuno odzivan
  • Veličina 1 KB;
  • CSS3 prijelazi s mogućnošću izvođenja putem JavaScripta;
  • Jednostavno označavanje pomoću označene liste
  • Mogućnost prilagođavanja efekata tranzicije i trajanja gledanja jednog slajda;
  • Podržava mogućnost stvaranja više slajdova;
  • Automatsko i ručno pomicanje.

Demo | Download

JQuery klizač bez kamere

Kamera je dodatak sa mnogim efektima prijelaza, responzivnim rasporedom. Jednostavno postavljanje, podržano mobilnim uređajima:

  • Potpuno odzivan dizajn
  • Potpisi;
  • Mogućnost dodavanja video zapisa;
  • 33 ikone u različitim bojama.

Demo | Download

SlidesJS, odgovarajući jQuery dodatak

SlidesJS je odgovarajući jQuery dodatak (1.7.1 i novije verzije) s podrškom za dodirne i CSS3 prijelaze. Eksperimentirajte s njim, isprobajte neke gotove primjere koji će vam pomoći da shvatite kako dodati SlidesJS u svoj projekt:

  • Adaptivni dizajn;
  • CSS3 prelazi;
  • Podrška za dodirne uređaje;
  • Jednostavno postavljanje.

Demo | Skinuti

BX Jquery klizač

Ovo je besplatni responzivni jQuery klizač:

  • Potpuno odzivan - prilagođava se bilo kojem uređaju;
  • Horizontalna, okomita promjena klizača;
  • Slajdovi mogu sadržavati slike, video zapise ili HTML sadržaj;
  • Proširena podrška za dodirne uređaje;
  • Korištenje CSS prijelaza za animacije slajdova ( hardversko ubrzanje);
  • API za povratni poziv i potpuno javne metode;
  • Mala veličina datoteke;
  • Lako za implementaciju.

Demo | Download

FlexSlider 2

Najbolji klizač koji reaguje. Nova verzija je izmijenjen kako bi se povećala brzina rada, kompaktnost.

Demo | Skinuti

Galleria - responzivna galerija fotografija zasnovana na JavaScript -u

Galleria se koristi milijunima web stranica za stvaranje visokokvalitetnih galerija slika. Broj pozitivnih kritika o njenom radu jednostavno je izvan ljestvice:

  • Potpuno besplatno;
  • Prikaz preko celog ekrana;
  • 100% responzivno;
  • Nije potrebno iskustvo u programiranju;
  • Podrška za iPhone, iPad i druge dodirne uređaje;
  • Flickr, Vimeo, YouTube i još mnogo toga;
  • Nekoliko tema.

Demo | Skinuti

Blueberry je jednostavan klizač za slike jQuery koji reagira

Predstavljamo jQuery klizač za slike napisan posebno za responzivni web dizajn. Blueberry je eksperimentalni dodatak klizača slika otvorenog koda koji je napisan posebno za rad s responzivnim predlošcima.

4. novembra 2019 Unos je ažuriran

Yuri Nemets

Klizači uključeni čisti CSS+ bonus klizač

CSS klizači imaju neke prednosti u odnosu na Javascript klizače. Jedna od takvih prednosti je brzina preuzimanja. Ne koriste se samo slike klizača velike veličine(ako nema optimizacije za različite zaslone), potrebno je i neko vrijeme za učitavanje skripti. Ali u članku ćete vidjeti samo čiste CSS klizače.

Evo što sam pronašao na web stranici o klizačima:

1. CSS3 klizač slike

CSS klizač koji koristi radio tipke za navigaciju kroz slajdove. Ovi radio dugmad nalaze se ispod klizača. Također, osim radio tipki, navigacija se vrši i pomoću strelica s lijeve i desne strane. Da biste pratili koja je slika trenutno prikazana, koriste se: označene pseudo-klase.

2. CSS3 klizač sličice

Za razliku od prethodnog CSS klizača, ovdje umjesto dugmadi za izbor nalaze se sličice svih slika pri dnu, što je također korisno pri stvaranju galerije slika. Slike se mijenjaju s neobičnim efektom: glatko nestaju pri povećanju.

3. CSS galerija

Ali ovaj CSS klizač je savršen za prodajne stranice. U pravilu, mnogi web programeri pri razvoju odredišnih stranica (prodajnih stranica) postavljaju klizač na samom početku tako da na prvom ekranu (bez pomicanja) posjetitelj može odmah vidjeti sve prednosti koje ova stranica ima za njega. Iznad svega, ovaj klizač reagira, što je također odlično.

4. CSS klizač bez veza

Samo želim napomenuti da ovaj klizač ne koristi veze! Prema zadanim postavkama, osim glavne slike (slajd), vidljiva su još 2 slajda. Nalaze se iza glavnog. Promjena slajdova odvija se u prekrasnom načinu rada: prvo se dva slajda razdvajaju i taj slajd postaje u centru, koji tada postaje glavni. Klizač se zatim povećava i postavlja ispred ostalih.

5. Odgovarajući klizač u CSS3

Još jedan klizni klizač sa kontrolama dugmadi za izbor. Da biste vidjeli kako će ovaj klizač izgledati različitih uređaja ah - možete sami promijeniti prozor preglednika ili na stranici s klizačem postoje posebne ikone za različite uređaje, klikom na koje ćete vidjeti da će klizač izgledati na vašem računaru, tabletu ili pametnom telefonu.

*** BONUS SLIDER ***

Pored svih klizača koji su gore prikazani, želim vas obradovati još jednim. Ovaj klizač je savršen za stvaranje galerije slika. Riječi ne mogu objasniti šta radi, pa bolje pogledajte sve na videu:

Zaključak

Uz pomoć klizača možete lijepo dizajnirati galerije slika, kompaktnije ih postaviti, umetnuti klizač u prvi ekran (dio stranice koji je vidljiv bez pomicanja) prodajne stranice kako biste posjetitelju odmah pokazali glavne prednosti koje on će primiti. Još uvijek možete pronaći mnogo načina gdje i kako možete koristiti klizače, ali jedno je jasno - oni su korisni kada se pravilno koriste.

Stavke o kojima je bilo riječi u članku.

Zdravo. Želim vašoj pažnji predstaviti vrlo kul klizač. Oooh ... vidim da si potpuno zaboravila na mene. Da, da, već sam nestao, vjerovatno na šest mjeseci ili godinu dana, i uopće ne znam kako se natjerati da objavim članak svaki dan (iako je to potpuno istinito). Pa, dobro, ne pričamo o tome sada. Klizač pruža Tympanus Codrops i radi u HTML5, CSS3 i TweenMax.js.

Klizač se ne rotira lijevo nadesno i ne odozgo prema dolje, već dijagonalno. Strelice za navigaciju nalaze se u gornjem lijevom kutu iu donjem desnom kutu. Također, navigacija se vrši klikom na sličicu s desne i lijeve strane. Sve animacije su vrlo glatke i rade ispravno savremeni pretraživači... Svi zaseban element klizač ima svoju stranicu koja se otvara kada kliknete na pregled. Stranica ima fotografiju, naslov i tekst.

Klizač je savršen za galeriju, portfolio umjetnika, fotografa, vajara, ukratko, svaku osobu koja se bavi kreativnim aktivnostima i ima djela koja želi prikazati na web mjestu. Galerija na mjestu muzeja ili izložbe izgledat će dobro.

Veza sa galerijom

Povezivanje galerije neće biti teško

Preuzimanje datoteka

Za početak, samo trebate preuzeti izvore s moje web stranice koristeći direktnu vezu. Iz arhive morate prenijeti mape img, css i js u korijen web lokacije

Uključujemo css i js datoteke

Zatim uključujemo skripte i stilove. Stilovi se povezuju dodavanjem u oznaku sledeći kod

i skriptira stranicu do završne oznake

Dodavanje klizača na web lokaciju

Prvo, dodajmo navigaciju na vrh stranice.

a zatim i sam klizač

Sjećanja i misli
1

Automatizacija

Nasumično lutanje
2

Mašine

Proizvoljne riječi
3

Suživot

Jedini vodič je vaše srce

Ukleti drift
4

Bellamio

Zabava se razilazi
5

Pašnjaci

Nada i snovi
6

Fokus

1

Automatizacija

Drvo mora biti vaš prijatelj ako ćete ga slikati

Samo neka se ovo dogodi. Pustili smo da ovo istekne iz naših misli. Samo se opustite i pustite da teče. Tako lako. Stavimo malo sretnih oblačića u naš svijet. To je vrlo hladna slika, možda ću morati otići po kaput. Uskoro će me smrznuti. Ovo će biti sretan mali morski pejzaž. Hajdemo gore i počnimo se zabavljati. Najmanje može toliko učiniti. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to unesite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je jako zabavno. Započinjem s njima i teško se zaustavljam.
2

Mašine

Ovo je vjerovatno najveća stvar koja mi se dogodila u životu

Ne pokušavamo vas naučiti kopirati. Ovdje smo samo da vas naučimo tehnici, a zatim vas pustimo da se otpustite u svijet. Sada ćemo raspršiti ovaj oblak. Ovdje nemamo ništa osim sretnog drveća. Učinimo to ponovo. Iskoristite ono što vidite, nemojte to planirati. Hajdemo gore i počnimo se zabavljati. Najmanje može učiniti toliko. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to unesite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je jako zabavno. Započinjem s njima i teško se zaustavljam.
3

Suživot

Jedini vodič je vaše srce

Hajdemo gore i počnimo se zabavljati. Najmanje može toliko učiniti. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to unesite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je toliko zabavno. Započinjem s njima i teško se zaustavljam. Ali još nismo tamo, pa ne moramo brini zbog toga. Sada stavimo ovdje nekoliko sretnih oblačića. Šta do đavola. Tanka boja će se zalijepiti za gustu boju. Pomešaću malo boje.
4

Bellamio

Jedini preduvjet je da vas čini sretnima

Vidi. Uzmemo kut četke i pustimo je da se igra naprijed-nazad. Ovo je neplanirano, zaista se jednostavno dogodi. Nekako sam sladak, nisam mogao snimiti Bambija osim kamerom. Pretpostavljam da sam malo čudan. Volim razgovarati sa drvećem i životinjama. To je u redu; Zabavljam se više od većine ljudi. Danas ćemo se igrati s oblacima. Zar niste znali da imate toliku moć? Možete pomicati planine. Možeš sve. Hajdemo gore i počnimo se zabavljati. Najmanje može toliko učiniti. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to unesite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je tako zabavno. Započinjem s njima i teško se zaustavljam.
5

Pašnjaci

Hajdemo gore i počnimo se zabavljati

Tako često izbjegavamo tekuću vodu, a tekuća voda je jako zabavna. Svako će na stvari gledati drugačije - i tako bi trebalo biti. Za veliko snažno drvo potrebni su veliki jaki korijeni. Steve želi refleksije, pa dajmo njemu razmišljanja. Ne moramo biti predani. Mi se samo igramo ovdje. Pravimo sve te male pahuljice koje žive u oblacima. Hajdemo gore i počnimo se zabavljati. Najmanje malo može učiniti toliko. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to uložite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je jako zabavno. Počinjem s njima i teško se zaustavljam.
6

Fokus

Ovo je neplanirano, zaista se jednostavno dogodi

Ali mi još nismo tamo, pa ne moramo brinuti o tome. Sada stavimo ovdje neke sretne male oblake. Šta dovraga. Tanka boja će se zalijepiti za gustu boju. Pomiješat ću malo boje. Koristit ćemo Van Dyke Brown, Permanent Red i malo prusko plave boje. Hajdemo gore i počnimo se zabavljati. Najmanje može toliko učiniti. Radite na jednoj stvari odjednom. Nemojte se zanositi - imamo dovoljno vremena. U to unesite svoja osjećanja, svoje srce, to je vaš svijet. Ovo drveće je jako zabavno. Započinjem s njima i teško se zaustavljam.

To je sve. Klizač je spreman! Sretno u poslu

Dobrodošli nazad na moj blog. Danas je u css -u, zahvaljujući novim selektorima, moguće stvoriti klizač bez skripti. Dakle, u ovom članku ću vam pokazati kako napraviti responzivni klizač u css3?

Plan lekcije

Dakle, danas ću vam detaljno pokazati kako stvoriti vlastiti klizač bez skripti, prilagoditi ga bilo kojem uređaju i lako ga promijeniti u budućnosti. izgled i takođe dodajte nove slajdove. Napravit ćemo samo 3 slajda, koji će se ručno prebaciti kada pritisnete tipke. Pa, počnimo!

Označavanje klizača

Prije svega, morate razumjeti koja će oznaka biti. Na ovom snimku zaslona možete vidjeti moj primjer označavanja, a ja ću s njim raditi danas.
Također ću sve ovo duplicirati s kodom kako biste mogli sami kopirati i zalijepiti.
Prvi korak je stvaranje kliznih prekidača. Budući da će postojati tri slajda, potreban je isti broj dugmadi:

Svaki dobiva svoj jedinstveni identifikator, a jedan je odabran prema zadanim postavkama.

Zadnji dio koda koji nam treba. Prikazuje naslove za gumbe, ali zapravo ih koristimo za skrivanje tipki prema zadanim postavkama (radio gumbi nisu stilizirani) i umjesto toga stavljamo ove naslove koji se mogu stilizirati. Oni će poslužiti kao radio tipke, a povezivanje radio tipkama vrši se putem posebnog atributa.

I sada sav ovaj kôd treba umotati u jedan zajednički spremnik. Neka to bude blok sa klasom prelamanja.

Početak rada s klizačem - početni stilovi za stranicu

Dakle, za početak ćemo postaviti opće stilove koji će pomoći u poništavanju svih zadanih margina, a u isto vrijeme pobrinuti se da se unutarnje margine i granice uzimaju u obzir u širini elemenata. Ovo se radi ovako:

* {
marža: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
veličina kutije: okvir-okvir;
}

Usput, * - označava sve selektore. Odnosno, takav univerzalni i globalni selektor.

Dizajniramo kontejner. To je sam blok koji sadrži sva tri naša važna dijela - dugmad, slajdove i potpise.

Zamotaj (
visina: 350px;
marža: 0 auto;
položaj: relativan;
širina: 600px;
}

Možete postaviti širinu i visinu ANY, ovisno o veličini fotografija slajdova. Unaprijed sam izrezao fotografije na 600 x 350 piksela, zbog čega navodim ove veličine. Margin: 0 auto će poravnati spremnik točno prema sredini stranice, a relativno pozicioniranje će vam omogućiti da kasnije precizno postavite gumbe u samom spremniku.

Dizajniranje klizača i slajdova

Prvo, ovo su stilovi:

Klizač (
boja pozadine: # 999;
visina: naslijedi;
prelivanje: skriveno;
položaj: relativan;
width: naslediti;
}

Dodijelite klizaču istu širinu i visinu kao i zajednički spremnik. Određujemo i boju i pozicioniranje te preljev: skriveno svojstvo siječe sve što ne spada u blok.

Sljedeći korak je dizajniranje samih slajdova:

Slajdovi (
visina: naslijedi;
neprozirnost: 0;
položaj: apsolutan;
width: naslediti;
z-indeks: 0;
}
.auto1 (slika u pozadini: url (bmw.jpg);)
.auto2 (slika u pozadini: url (audi.jpg);)
.auto3 (slika u pozadini: url (porshe.jpg);)

Također određujemo širinu i visinu kao i za slajd. Nasljedna vrijednost omogućava nasljeđivanje vrijednosti roditeljskog bloka. Koristit ćemo z-index i svojstva neprozirnosti da naše slike učinimo nevidljivima. Ispod jasno definiramo pozadinske slike.

Zasad nećemo vidjeti ništa, samo sivu pozadinu, jer su naše slike skrivene.

Ukrasni prekidači

Sada moramo ukloniti standardne radio tipke i umjesto toga oblikovati naslove.

Prelom> unos (
prikaz: nema;
}

Uklanjanje radio dugmadi.

Zamotaj .control (
položaj: apsolutan;
margin -left: -50px;
lijevo: 50%;
}

S ovim stilovima centrirat ćemo blok gumba.

Oznaka za omotavanje (
kursor: pokazivač;
prikaz: inline-block;
visina: 25px;
margina: 10px;
položaj: relativan;
širina: 25px;
obrub: 2px jednobojno siva;
border-radius: 30% / 10px;
}

Ovi stilovi rade vrlo važan posao - omogućuju nam oblikovanje dugmadi. Morate postaviti veličinu gumba, postaviti tip blok-linije za njih, uvlake i sivi obrub. Takođe možete dodati zaobljivanje uglova.

Sada imamo tri dugmeta centrirana ispod slajdova, to su samo sivi okviri. Učinimo tako da kada kliknete na dugme, u njemu se pojavi neka slika koja označava da je dugme aktivno ovaj trenutak... Usput, u ovom članku pokazujem istu tehniku, samo s potvrdnim okvirima.

Budući da smo ti i ja mijenjali slike automobila, pronašao sam ikonu upravljača na internetu, smanjio je na otprilike 20 za 20. Sada se zanemaruje - dodajte pozadinsku sliku gumbu ako ste kliknuli na nju.

# point1: označeno ~ .control label: nth-of-type (1),
# point2: označeno ~ .control label: nth-of-type (2),
# point3: označeno ~ .control label: nth-of-type (3) (
pozadina: url (wheel.png) bez ponavljanja 50% 50%;
}

To se radi pomoću ovakvih selektora. Šta oni rade? U stvari, ovo je složen birač, sadrži čitav uvjet. To je pomalo poput programiranja. To znači sljedeće: ako je odabran radio gumb, tada morate primijeniti stil na naslov koji ide negdje dalje u oznakama. Sada, kada pritisnete tipke, unutar njih se pojavljuje slika upravljača!

Najvažniji korak je da prekidač radi!

U stvari, imamo jako malo posla. Naime, kako bi bili sigurni da se umjesto sive zone u klizaču pojavljuju slike s automobilima koje bi uspješno preokrenuli. Da biste to učinili, morate primijeniti neke složenije selektore:

# point1: označeno ~. klizač> .auto1,
# point2: označeno ~. klizač> .auto2,
# point3: označeno ~. klizač> .auto3 (
neprozirnost: 1;
z-indeks: 1;
}

Šta se dešava? Sada, ako isprobate klizač na djelu, bit će potpuno funkcionalan. Ovim biračima označavamo sljedeće: ako je radio dugme pritisnuto, učinite željeni slajd vidljivim koji se nalazi negdje dalje u html kodu (izvan radio dugmadi).

Tako, kada pritisnete prvo dugme, prikazuje nam se BMW automobil, kada kliknete na drugo - Audi, kada kliknete na treće - Porshe. I cijelo to vrijeme, pri prebacivanju, ikona upravljača pojavljuje se u gumbu za koji je klizač aktivan.

Dakle, napravili smo klizač. Ostaje da se to prilagodi.

Prilagođavanje klizača za gledanje na mobilnim uređajima

Za sada, naš klizač ima fiksnu širinu od 600px. U skladu s tim, na ekranima manjim od ove širine počet će se pojavljivati ​​problemi. Konkretno, pojavit će se vodoravna pruga pomicanje. Da bismo to izbjegli, moramo prilično prilagoditi već napisani kod. Evo šta treba promijeniti:

  1. Za blok omotača, odnosno glavni spremnik, ne postavljajte širinu, već najveću širinu: 600 piksela. Ovo će omogućiti da se kontejner smanji ako se prozor smanji.
  2. Klizaču treba dati širinu: 100%;
  3. Za slajdove ne mijenjamo ništa.

Sve promjene mogu se vidjeti u ovom kodu:

Zamotaj (
max-širina: 600px;
}
.slider (
širina: 100%;
}

Odlično, sada ostaje da napišete nekoliko medijskih upita kako bi klizač bio potpuno odzivan, kao i da slike prilagodite novim ekranima. Eksperimentalno sam otkrio da slajd slika počinje da se ne uklapa u ekran širine oko 600 piksela. To znači da u ovoj oblasti morate promijeniti stilove. Da bismo to učinili, napišite prvi medijski upit.

Usput, u ovom sam članku detaljno pisao o upitima za medije i njihovoj primjeni. Savjetujem vam da ga pročitate za one koji nemaju pojma o responzivnom dizajnu.

U skladu s tim, kako bi se sve dobro prikazalo na širini od 650 piksela ili manje, predlažem promjenu stila ovako:

@medijski ekran i (maksimalna širina: 650px) (
.wrap (
max-širina: 480px;
visina: 280px;
}
. slajdovi (
veličina pozadine: omot;
}
}

Širina samog klizača će se smanjiti, a time i visina. Za same slajdove propisali smo svojstvo koje skalira slike tako da se one, uz zadržavanje proporcija, potpuno uklope u klizač, bez obrezivanja.

Odlično, sada možete provjeriti i uvjeriti se da se klizač kada je širina manja od 650 piksela transformira i izgleda dobro bez obrezivanja slike.

Posljednja tačka je široka oko 400 piksela. Na njemu naša slika opet počinje da se ne slaže i moramo poduzeti mjere. Da bih to učinio, napisat ću još jedan medijski upit:

@medijski ekran i (maksimalna širina: 400px) (
.wrap (
max-širina: 320px;
visina: 180px;
}
. slajdovi (
veličina pozadine: omot;
}
}

Sve je isto, samo opet smanjujemo širinu i visinu kontejnera. Odlično, sada naš klizač potpuno reagira! Čak i dalje mobilni telefon sa širinom od 320 piksela izgledat će sjajno. Međutim, uvjerite se sami:

Zahvaljujući medijskim upitima, slike se proporcionalno smanjuju uz zadržavanje proporcija.

Dodavanje efekata prijelaza klizaču

Pa, bonus.U ovom članku možete vidjeti nekoliko efekata koji se mogu primijeniti pri prelasku kursorom preko blokova. Dakle, samo odaberite bilo koji od njih i dodijelite ga slajdovima (.slides), a kad se slika pojavi, otkažite efekt. Da biste vidjeli rezultat, morate postaviti svojstvo prijelaza na slajdove tako da prijelazi budu glatki. Primjer efekta:

Slajdovi (
transformirati: rotirati (50 stepeni);
prijelaz: 1 s;
}

Sada je dovoljno da birač koji slajd učini vidljivim registrira poništavanje transformacije:

# point1: označeno ~. klizač> .auto1 (
transformirati: nema;
}

Učinite to za sve slajdove. U skladu s tim, u početku će se slika rotirati i bit će nevidljiva, a kada se pojavi, učinak glatkog povratka na početni položaj... U skladu s tim, možete smisliti vlastite efekte. Pa, napravili smo klizač, to je sve za mene. Ako imate bilo kakvih pitanja, čekam ih u komentarima.

Dodatak - kako biti siguran da kada kliknete na slajd, veza je povezana sa slajdom?

Drugim riječima, sada imamo samo slike, ali kako ih učiniti dostupnim za klik. Da biste to učinili, trebali biste već imati gotov klizač za ovu lekciju. Zatim morate pronaći dio u html kodu koji je odgovoran za same slajdove. Evo ga na snimku ekrana:

Kao što vidite, umetnuo sam veze unutar prvog i drugog slajda. Dakle, kada kliknete na prvi slajd, otići ćete na Google, kada kliknete na drugi, na Yandex. Želim napomenuti da će se veza otvoriti u istom prozoru, odnosno da će trenutna stranica s klizačem nestati u ovom slučaju. Ako trebate otvoriti veze sa slajdova u novom prozoru, u svakoj oznaci treba dodati atribut cilja= "_blank".

Ali to nije sve! Sada ništa ne funkcionira da bi slike postale klikanje, morate ovo dodati u css:

Slajdovi a (
prikaz: blok;
širina: 100%;
visina: 100%;
}

Odnosno, za sve slajdove vezu činimo blokovskim elementom i za nju određujemo širinu i visinu od 100%, tako da zauzima cijeli prostor slike. Sada bi sve trebalo funkcionirati, možete provjeriti. Samo zamijenite adrese na vezama i možete ih koristiti. Nadam se da sam to objasnio što je jasnije moguće.

Samo trenutak vaše pažnje: Svi želimo ugostiti naše web stranice na pouzdanom hostingu. Analizirao sam stotine hostinga i pronašao najbolje - HostIQ Postoje stotine pozitivne povratne informacije o njemu, prosječna ocjena korisnika je 4,8 od 5. Neka vaše web stranice budu dobre.

SLIČNI ČLANCI