Suwak HTML CSS

Jednym z najważniejszych aspektów każdej strony jest jej projekt. Jeśli chodzi o zwiększenie funkcjonowania uczestnictwa w Internecie, potrzebujesz dobrze zaprojektowanej strony internetowej. Zastosowanie suwaka CSS na stronę główną jest jednym z najskuteczniejszych sposobów poprawy wyglądu strony internetowej. CSS Slider jest jednym z najbardziej spektakularnych generatorów slajdów na stronie internetowej w branży.

Suwniki to rodzaj slajdów danych, który może zawierać między innymi zdjęcia, tekst, symbole i hiperłącze. Jest to komponent strony internetowej, który ślizga się z przodu lub być może w dowolnym kierunku. Jest to metoda prezentacji materiału na stronie internetowej w jednym regionie, w którym materiał może przesunąć się na pozycję, umożliwiając prezentację dużych woluminów materiału w jednym miejscu.

Aby zwiększyć funkcjonalność JavaScript, obok niego zaimplementowano kilka suwaków CSS. Jednak czasami możesz potrzebować podstawowego i kompaktowego suwaka stworzonego wyłącznie z wykorzystaniem HTML i CSS. Jest niesamowicie lekki bez JavaScript i działa znacznie szybciej podczas przeglądania.

Tworzenie suwaka z CSS

Aby utworzyć prosty responsywny suwak tekstowy za pomocą HTML i CSS, pierwszym krokiem, jaki zrobimy, jest konstrukcja układu suwaka. Stworzy miejsce dla suwaka, w którym się zmieści.

W poprzednim kodzie ćwiczyliśmy element. Ten tag odnosi się do tagu dywizji. W pliku HTML określa podział lub segment. Działa jako kontener wykorzystywany do grupowania komponentów HTML. Następnie CSS jest używany do projektowania rzeczy. „Container Slider” jest komponentem na stronie internetowej, na której zostanie wyświetlony suwak. „Suwak” służy jako wyświetlacz lub okno, aby przedstawić wszystkie slajdy, które stworzymy. Slajdy będą przechowywane w „slajdach”. Ten „suwak” jest komponentem, który przewija i generuje wygląd suwaka w „Container Slider”. Podczas gdy „slajd” odnosi się do każdego slajdu używanego w suwaku.

Pamiętaj, że będziesz musiał mieć klasę „slajd” i wyraźny „id” dla każdego tworzonego slajdu. W tym skrypcie utworzyliśmy cztery klasy „slajd”, każda z unikalnym „id” jako: „Slides_1” dla 1. slajdu, „Slajdes_2” dla 2. slajdów, „Slajdes_3” dla trzecie. Zdefiniowaliśmy również „Slide_text” wyświetlony odpowiednio na każdym slajdzie, w znaczniku „Span”.

Teraz wygenerujemy skrypt CSS.

Możesz użyć wszystkiego, co chcesz dla „slidera-containera”. Tutaj wykorzystaliśmy FlexBox. Możesz szybko stylizować HTML z układem CSS Flexbox. Wykorzystując kolumny i wiersze, Flexbox renderuje pionowe i poziome pozycjonowanie obiektów prosto. Aby wypełnić obszar, obiekty „zgięłyby się” do różnych rozmiarów. Możesz jednak użyć siatki CSS, jeśli chcesz.

„Suwak” po prostu dostosuje rozmiar suwaka. Ta właściwość „szerokości” dostosuje szerokość suwaka. „Maksymalna szerokość” obiektu jest określona przez atrybut „maksymalna szerokość”. Wysokość obiektu jest automatycznie dostosowywana, gdy zawartość przekracza szerokość limitu. Atrybut maksymalnej szerokości jest nieskuteczny, gdy podana treść jest mniejsza niż maksymalna szerokość. Umieszczenie obiektu o „Pozycja: względna;” jest w stosunku do tej zwykłej pozycji.

Następujący element slajdów zostanie teraz stylizowany w CSS:

Atrybut przepełnienia-X określa, czy zawartość elementu na poziomie blokowym powinna być przycięta, przewijana lub wyświetlana danych o przepełnieniu. Wszystko, co nie pasuje łatwo w rzutce „suwak”, stanie się widoczna tylko poprzez przewijanie, gdy włączysz „przepełnienie-X”. Następną rzeczą, którą zrobiliśmy, było umieszczenie „scroll_behavior” na „gładkie”. Atrybut Scroll-Behavior określa, czy ruch przewijania jest animowany płynnie, gdy osoba uderza w adres URL w przewijanym pojemniku, a nie prosty skok. Ustawiliśmy „scroll_snap-typ” na „x obowiązkowy”, co oznacza, że ​​po nałożeniu skoku do dowolnego obiektu dziecięcego na slajdach, przeglądarka przewijałaby do tego konkretnego obiektu, a nie skoczyć do niego od razu do niego.

Zaprojektujmy same slajdy, jak następuje:

Pierwszą i najważniejszą rzeczą, na której należy się skupić w tym fragmencie, jest ostrożne rozważenie slajdu do rozmiaru suwaka. Teraz ostatnie trzy atrybuty są niezwykle ważne: transformację, transformację i snap-snap-align. Pozycja, w której wykonywana jest transformacja, nazywa się transformatorem. Możesz zmienić umieszczenie komponentów transformowanych za pomocą atrybutu transformacji. Pojedyncze, dwie lub trzy wartości można wykorzystać do zapewnienia właściwości transformacji, przy czym każdy element wskazuje na przesunięcie. Pochodzenie transformacji jest domyślnie skonfigurowane do centrum. Możesz kręcić, zmienić rozmiar, przechylać lub tłumaczyć dowolny komponent za pomocą właściwości CSS „Transform” CSS. Metoda CSS „Scale ()” skaluje komponent w dwuwymiarowej płaszczyźnie. Atrybut Scroll-Snap-Align i określa rzeczywiste pozycjonowanie Snap pojemnika jak wyrównanie regionu SNAP. Zapewniają, że za każdym razem, gdy przeskakujesz do pewnego slajdu, ten slajd „zatrzasnie” w centrum suwaka.

Obraz wyjściowy, który utworzyliśmy tak daleko od poprzedniego kodu, pokazano poniżej:

Możesz obserwować bezproblemową funkcję przewijania i zatrzaskującą działając, klikając w środku suwaka, a następnie naciskając przyciski strzałki.

Suwak z przyciskiem nawigacji

Możesz także dołączyć przyciski nawigacji na suwaku, jeśli chcesz. W przypadku tej intencji dodaliśmy dwa elementy „A” do każdego slajdu w skrypcie HTML.

Klasa „Slide_prev” służy do nawigacji z powrotem, podczas gdy klasa „Slide_Next” służy do nawigacji. „Href” trzyma hiperłącze do slajdu, który chcemy skakać. Należy je wyraźnie dostosować. Ta właściwość podaje adres URL strony docelowej linku. Element nie będzie stanowić linku, gdy właściwość „HREF” nie będzie uwzględniona.

Tutaj zajmujemy się sekcją CSS kodu:

Te przyciski mogą być stylizowane i umieszczone w dowolny sposób. W naszym przykładzie dodaliśmy strzałki do nawigacji do przodu lub do tyłu.

Możesz zobaczyć strzałki w następującym obrazie wyjściowym:

Usuwanie paska przewijania z suwaka

Teraz, jeśli zaobserwujesz, mamy strzałki i pasek nawigacyjny do przewijania z powrotem lub z tyłu. Jeśli chcesz usunąć pasek przewijania, możesz to zrobić w jednym prostym kroku.

W skrypcie CSS, w pierwszym „.Klasa Slider ”, po prostu ustaw„ przepełnienie-X ”na„ ukryte ”. To ukryje pasek przewijania.

To jest suwak wyjściowy:

Wniosek

W tym temacie nauczyłeś się dodawać suwak do swojej witryny za pomocą HTML CSS. Przedstawiliśmy pomysł dodania suwaków za pomocą CSS i jakie są suwaki. Potem zaczęliśmy tworzyć prosty suwak z tekstem. Zaprojektowaliśmy układ suwaka z wykorzystaniem HTML, a następnie zaprojektowaliśmy go z CSS w wysublimowanym edytorze tekstu. Korzystając z różnych elementów skryptu CSS, stworzyliśmy suwak z paskiem przewijania. W następnym kroku stworzyliśmy przycisk nawigacji na suwaku z CSS. W końcowej fazie pokazaliśmy, jak usunąć pasek przewijania z suwaka i pozwolić mu przejść tylko przez przyciski nawigacji. Ćwiczenie i koncentracja pomogą ci zdobyć te koncepcje tworzenia prostego suwaka z CSS.