Glidebryter HTML CSS
Glidebrytere er en type lysbildefremvisning av data som kan inkludere bilder, tekst, symboler og hyperkoblinger, blant annet. Det er en websidekomponent som glir fremover-backward eller kanskje i alle retninger. Det er en metode for å presentere materiale på et nettsted i et enkelt område der materialet kan gli på plass, noe som gir mulighet for presentasjon av store mengder materiale på et enkelt sted.
For å øke JavaScripts funksjonalitet blir flere CSS -glidebrytere implementert ved siden av den. Imidlertid kan du av og til ha en grunnleggende og kompakt glidebryter som er opprettet som bare bruker HTML og CSS. Det er utrolig lett uten JavaScript og kjører betydelig raskere mens du surfer.
Opprette en glidebryter med CSS
For å lage en enkel responsiv tekstglidebryter ved hjelp av HTML og CSS, er det første trinnet vi vil ta å strukturere oppsettet på glidebryteren. Det vil skape plass for glidebryteren der den vil passe inn.
I forrige kode utøvde vi elementet. Denne taggen refererer til divisjons taggen. Inne i en HTML -fil spesifiserer den en inndeling eller segment. Det fungerer som en beholder som brukes til å gruppere HTML -komponenter. Etter det brukes CSS til å designe ting. "Glidebryteren" er komponenten på nettstedet der glidebryteren vil bli vist. "Glidebryteren" fungerer som visning eller vindu for å presentere alle lysbildene vi vil lage. Lysbildene blir holdt i "lysbilder". Denne "glidebryteren" er komponenten som ruller og genererer glidebryterutseendet på "glidebryteren". Mens "lysbilde" refererer til hvert eneste lysbilde som brukes i glidebryteren.
Husk at du må ha "lysbilde" -klassen og en distinkt "id" for hvert lysbilde du oppretter. I dette skriptet har vi laget fire "lysbilde" -klasser, hver med en unik "id" som: "lysbilde_1" for 1. lysbilde, "lysbilde_2" for 2. lysbilde, "lysbilde_3" for 3. lysbilde, og "lysbilde_4" for 4. lysbilde. Vi har også definert "Slide_text" som vises på hvert lysbilde, innenfor "Span" -merket.
Nå vil vi generere CSS -skriptet.
Du kan bruke alt du vil ha til en "glidebryter". Her har vi brukt flexbox. Du kan raskt style HTML med en CSS Flexbox -layout. Ved å bruke kolonner og rader, gjengir Flexbox den vertikale og horisontale plasseringen av objekter grei. For å fylle området, ville objekter "flex" i forskjellige størrelser. Du kan imidlertid bruke CSS -rutenett hvis du velger.
"Glidebryteren" vil ganske enkelt justere størrelsen på glidebryteren. Denne "bredde" -egenskapen vil justere glidebryterens bredde. "Maksimal bredde" for et objekt er spesifisert av "maks bredde" -attributtet. Objektets høyde justeres automatisk når innholdet overstiger grensebredden. Maks bredde attributt er ineffektiv når det medfølgende innholdet er mindre enn maksimal bredde. Plassering av et objekt med "posisjon: relativ;" er i forhold til den vanlige posisjonen.
Følgende lysbildeelement vil nå bli stylet i CSS:
Overflow-X-attributtet avgjør om innholdet i et blokknivåelement skal klippes, rulles eller vises overløpsdata. Alt som ikke passer lett i "glidebryteren", vil bare bli synlig via rulle når du gjør det mulig for "Overflow-X" å bla. Det neste vi gjorde var å sette "Scroll_behavior" til "glatt". Rullegarden-attributtet avgjør om rullebevegelsen er animert jevnt når personen treffer på en url inne i en rullbar beholder i stedet for et rett sprang. Vi har satt "Scroll_snap-typen" til "X obligatorisk", noe som betyr at når du bruker en hoppkobling på det barneobjektet i lysbilder, så vil nettleseren bla til det aktuelle objektet jevnt i stedet for å hoppe til det med en gang.
La oss designe lysbildene selv, som følger:
Det første og fremste å fokusere på i dette utdraget er å vurdere lysbildets størrelse til glidebryteren nøye. Nå er de aller siste tre attributtene ekstremt avgjørende: Transform-origin, Transform and Scroll-SNAP-ALIME. Posisjonen som en transformasjon utføres, kalles transformasjon-opprinnelsen. Du kan endre plassering av transformerte komponenter ved å bruke attributtet for transformasjon-opprinnelse. Enkel, to eller tre verdier kan brukes til å gi egenskapen til transformasjon, med hvert element som indikerer en forskyvning. Et transformasjons opprinnelse er konfigurert til sentrum som standard. Du kan snurre, endre størrelse, vippe eller oversette enhver komponent ved å bruke "transform" CSS -egenskapen. “Scale ()” CSS-metoden skalerer en komponent i det todimensjonale planet. Den rulle-snap-justerte attributtet definerer den faktiske snap-plasseringen av beholderen som en snap-regionjustering. De forsikrer at når du hopper til et visst lysbilde, vil det lysbildet "knipse" i glidebryteren Viewports sentrum.
Utgangsbildet som vi opprettet så langt fra forrige kode, vises nedenfor:
Du kan observere den sømløse rulle- og knipsfunksjonaliteten i drift ved å klikke inni glidebryteren og etterpå trykke på pilknappene.
Glidebryter med navigasjonsknapp
Du kan også inkludere navigasjonsknapper på glidebryteren hvis du vil. For denne intensjonen har vi lagt til to “A” -komponenter til hvert eneste lysbilde i HTML -skriptet.
"Slide_prev" -klassen er for å navigere tilbake, mens "Slide_Next" -klassen er for å navigere fremover. "Href" holder hyperkoblingen til lysbildet vi ønsker å hoppe. Disse må eksplisitt justeres. Denne egenskapen gir koblingssidenes URL. Elementet vil ikke utgjøre en lenke når "Href" -egenskapen ikke er inkludert.
Her takler vi CSS -delen av koden:
Disse knappene kan bli stylet og plassert på noen måte du vil. I vårt eksempel har vi lagt piler for å navigere fremover eller bakover.
Du kan se pilene i følgende utgangsbilde:
Fjerne rullefeltet fra glidebryteren
Nå, hvis du observerer, har vi pilene og navigasjonslinjen for å bla frem eller tilbake. Hvis du trenger å fjerne rullefeltet, kan du gjøre det i ett enkelt trinn.
I CSS -skriptet, inne i det første “.glidebryteren ”, bare sett“ Overflow-X ”til“ Skjult ”. Dette vil skjule rullefeltet.
Dette er utgangsglidebryteren:
Konklusjon
I dette emnet har du lært å legge en glidebryter til nettstedet ditt ved hjelp av HTML CSS. Vi introduserte deg for ideen om å legge til glidebrytere ved hjelp av CSS og hvilke glidebrytere som er. Etterpå begynte vi å lage en enkel glidebryter med tekst. Vi designet utformingen av glidebryteren som brukte HTML og stylet den med CSS i den sublime tekstredigereren. Ved hjelp av forskjellige elementer i CSS -skriptet laget vi glidebryteren vår med en rullebar. I neste trinn opprettet vi en navigasjonsknapp i glidebryteren med CSS. I sluttfasen viste vi deg hvordan du fjerner rullefeltet fra glidebryteren og la den navigere bare gjennom navigasjonsknappene. Øvelse og konsentrasjon vil hjelpe deg å ta tak i disse konseptene for å lage en enkel glidebryter med CSS.