Dezynsekcja
Tworzenie slidera za pomocą Bootstrapa. Jak w kilku prostych krokach stworzyć własny slider bootstrap Responsywna karuzela dla bootstrapu 3

Tworzenie slidera za pomocą Bootstrapa. Jak w kilku prostych krokach stworzyć własny slider bootstrap Responsywna karuzela dla bootstrapu 3

Twitter Bootstrap 3 to jeden z najlepszych frameworków CSS do tworzenia i utrzymywania systemów zarządzania treścią. Dzięki Bootstrap możesz łatwo tworzyć blogi lub portfolio, korzystając z systemu siatki Twitter Bootstrap (układ siatki). W sercu wielu systemów CMS zwykle znajduje się podstawowy komponent o nazwie „Slider” (Karuzela), w zasadzie jest to automatyczne sekwencyjne wyświetlanie obrazów, ale może również wyświetlać najnowsze ukończone projekty, referencje od Twoich klientów, opisy specjalnych oferty, linki do nowości lub najnowszych artykułów z bloga. W tym artykule przyjrzymy się, jak utworzyć suwak za pomocą komponentu Carousel w Twitter Bootstrap 3.

Wprowadzenie do komponentu Twitter karuzela Bootstrap 3

Znacznik komponentu karuzeli wygląda tak:

>
>

...
>
>
...
>

>
>

>
>
>

Z powyższego kodu widać, że suwak Bootstrap 3 jest podzielony na kilka części:

Wskaźniki
Zawartość suwaka
Sterownica

Aby przekształcić element div w suwaku dodajemy nazwy klas: karuzela oraz slajd. Klasa karuzela tworzy efekt „karuzeli”, czyli zmienia slajdy w kółko. Klasa slajd dodaje animację przesuwania z prawej lub lewej strony. Wskaźniki to małe kółka na dole suwaka, które wskazują aktualną pozycję slajdu i liczbę slajdów. Wskaźniki są tworzone przy użyciu uporządkowanej listy.

>
>

Uporządkowana lista ma klasę wskaźniki karuzeli, który przekształca elementy podrzędne w małe kółka. Każdy element Li musi mieć atrybut cel danych z identyfikatorem kontenera nadrzędnego. Musi mieć również atrybut slajd-danych-do z unikalną wartością liczbową, aby odnosić się do konkretnego slajdu, wartości muszą zaczynać się od „0”.

...
>
>
...
>

Każdy element z klasą przedmiot składa się z dwóch podrozdziałów: obraz oraz karuzela-podpis. Obraz jest używany jako tło slajdu. Element z klasą karuzela-podpis umieszczony nad obrazem i używany jako tytuł slajdu. W środku karuzela-podpis, możemy dodać

lub tagi, a nawet jedno i drugie.

Sterowanie odbywa się za pomocą strzałek w lewo i w prawo, służą one do ręcznej zmiany suwaków.

„glifowy glifowy-szewron-lewo”> >
>

„glifowy glifowy-szewron-prawo”> >
>
>

Powinny być dwa elementy: po jednym dla każdego kierunku. Pierwszy element będzie miał Zakres element z klasami Glyphicon Glyphicon-Chevron-Left, czyli ikona lewej strzałki, a drugi element będzie miał klasy Glyphicon Glyphicon-Chevron-right, to strzałka w prawo. W Bootstrap możemy używać czcionek zamiast obrazków do wyświetlania ikon.

To wszystko! Pomyślnie utworzyłeś suwak dla swojej witryny. Poza tym nie napisałeś ani jednej linii kodu JavaScript, ale bootstrap.js zrobił wszystko za Ciebie.

ustawienia karuzeli

Aby jeszcze bardziej dostosować suwak, możesz dodać kilka atrybutów dane-* dla kontenera nadrzędnego karuzeli.

"interwał danych" służy do określenia odstępu czasu między przełączaniem slajdów. Przyjmuje wartość liczbową, a liczba musi być wyrażona w milisekundach.
"pauza danych" służy do określenia, kiedy zostanie uruchomione zdarzenie pauzy. Na przykład, gdy jest równe " unosić się”, przełączanie suwaków zatrzymuje się, gdy mysz znajduje się nad suwakiem.
"opakowanie danych„ jest atrybutem logicznym i pozwala określić, czy wznowić przełączanie slajdów po osiągnięciu końca listy slajdów.

Personalizacja za pomocą jQuery

Jeśli chcesz użyć atrybutów jQuery i data-*, Bootstrap umożliwia inicjalizację za pomocą JavaScript. Aby to zrobić, możesz napisać następujący kod:

$(".karuzela" ) .karuzela();

Ustawienia karuzeli można ustawić za pomocą opcji. Na przykład:

$(.karuzela")
interwał: 2000
pauza: "najedź" ,
opakowanie: prawda
} ) ;

Zdarzenia suwaka można również wyzwalać ręcznie, korzystając z następującego kodu:

.carousel("pauza") // pauza
.carousel("cykl") // włącz slajdy
.carousel(3) // pokaż czwarty slajd
.carousel("prev") // pokaż poprzedni slajd
.carousel("następny") // pokaż następny slajd

Powyższe metody można wywołać z dowolnego kodu JavaScript, aby sterować normalnym działaniem suwaka. Uważam, że metody prev i next są bardzo przydatne, jeśli chcę wyświetlać własne przyciski zamiast standardowych strzałek. Zwłaszcza, gdy znajdują się poza układem karuzeli.

Wniosek

Ten artykuł powinien być pomocny dla tych, którzy chcą nauczyć się tworzyć slider bez pisania tysięcy linijek kodu JavaScript. Bez wątpienia przyspieszy to tempo rozwoju. Co najważniejsze, to rozwiązanie działa w różnych przeglądarkach, więc nie musisz wyrywać włosów, aby działało w starszych przeglądarkach.

Jeśli masz jakieś pytania, skorzystaj z naszego

Komponent pokazu slajdów dla elementów rowerowych - karuzela obrazów lub slajdy tekstowe.

Jak to działa

Carousel to pokaz slajdów do wyświetlania serii treści opartych na przekształceniach CSS 3D i niektórych JS. Działa z tekstem, obrazami lub zwykłymi znacznikami. Obsługuje również przyciski next/prev.

Przykład

Karuzela nie normalizuje automatycznie rozmiaru zawartości slajdu. Dlatego możesz potrzebować dodatkowych narzędzi, aby ich zawartość miała odpowiedni rozmiar. Dopóki karuzele obsługują przyciski poprzedni/następny, nie trzeba ich wyraźnie dodawać. Dodaj je i dostosuj samodzielnie.

Nadaj unikalny identyfikator klasie .carousel, aby zapewnić elastyczność, zwłaszcza jeśli używasz wielu karuzeli na stronie.

Tylko slajdy

Oto przykład karuzeli z samymi slajdami. Zwróć uwagę na obecność klas .d-block i .img-fluid w obrazach karuzeli — ich celem jest uniemożliwienie przeglądarce domyślnego wyrównania obrazu.

Z kontrolkami

Dodaje przyciski poprzedni/następny:

Ze wskaźnikami

Możesz także dodać wskaźniki do karuzeli wraz z kontrolkami.

Wymaga początkowego aktywnego elementu

Klasę .active należy dodać do jednego ze slajdów, w przeciwnym razie karuzela nie będzie widoczna.

Z napisami

Dodaj podpisy do slajdów, dodając element klasy .carousel-caption do dowolnego elementu karuzeli klasy .carousel-item. Etykiety można łatwo ukryć na mniejszych urządzeniach za pomocą narzędzi do wyświetlania. Są one początkowo ukryte za pomocą klasy .d-none i pokazują je ponownie na średnich urządzeniach z klasą .d-md-block.

Etykieta pierwszego slajdu

Nulla vitae elit libero, pharetra augue mollis interdum.

Etykieta drugiego slajdu

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Etykieta trzeciego slajdu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

„karuzela-podpis d-brak d-md-blok”>

...

Stosowanie

Poprzez atrybuty

Atrybut data-slide przyjmuje wartości prev lub next , które zmieniają położenie slajdu względem jego aktualnej pozycji. Lub użyj data-slide-to, aby przejść do slajdu w indeksie, na przykład 2: data-slide-to="2" , indeksy slajdów zaczynają się od 0 .

Atrybut data-ride="carousel" służy do tworzenia animacji karuzeli. Nie można go łączyć z jawną inicjalizacją karuzeli przez JavaScript.

Przez JavaScript

Wywołaj karuzelę ręcznie:

$(".karuzela"). karuzela()

Opcje

Parametry mogą być przekazywane przez atrybuty lub JavaScript. Aby użyć atrybutów, dodaj nazwę parametru do data- , na przykład: data-interval="" .

Nazwa	Typ	Domyślnie	Opis
interwał	numer	5000	Czas opóźnienia między automatycznymi zmianami slajdów. Jeśli fałsz, karuzela nie zmieni automatycznie slajdów.
klawiatura	logiczne	PRAWDA	Czy karuzela będzie reagować na zdarzenia na klawiaturze.
pauza	ciąg \| logiczne	unosić się	Jeśli ustawiono "hover", zmiana slajdu jest spowalniana przez mouseenter , a zmiana rozpoczyna się od mouseleave. Jeśli fałsz, najechanie kursorem na karuzelę nie zatrzyma zmiany slajdów. Urządzenia aktywowane dotykiem: „unosić się” – pauza na końcu dotyku (gdy użytkownik zakończy interakcję z karuzelą) na dwa okresy, a następnie ponownie zmień slajdy. Zauważ, że to zachowanie jest dodatkiem do zachowania myszy opisanego powyżej.
jeździć	linia	fałszywy	Automatyczna zmiana slajdów karuzeli po pierwszej ręcznej zmianie slajdów przez użytkownika. Jeśli karuzela - automatyczna zmiana jest włączona po załadowaniu.
zawinąć	logiczne	PRAWDA	Czy karuzela powinna się zmieniać płynnie czy dyskretnie.

Metody

Metody asynchroniczne i przejścia

Wszystkie metody API asynchroniczny i uruchom przemiana. Wracają do funkcji, która je wywołała, gdy rozpoczyna się przejście, ale do końca. Dodatkowo, wywołując metodę na komponencie, wykonanie przejścia zostanie zignorowane.

.karuzela(opcje)

Inicjuje obiekt karuzeli z określonymi opcjami i rozpoczyna przejście slajdu.

$(".karuzela"). karuzela (( interwał : 2000 ))

.karuzela("cykl")

Zmienia slajdy karuzeli od lewej do prawej.

.karuzela("wstrzymaj")

Zatrzymuje przejście slajdu.

.karuzela(liczba)

Przewijanie przesuwa się do określonego punktu (w oparciu o 0, podobnie jak wiersze).

.karuzela("poprzednia")

Przewija do poprzedniego slajdu. Zwraca wartość wywołania funkcji przed wyświetleniem elementu „target”(tj. przed odpaleniem zdarzenia slid.bs.carousel).

.karuzela("następny")

Do następnego slajdu. Zwraca wartość wywołania funkcji przed wyświetleniem elementu „target”(tj. przed odpaleniem zdarzenia slid.bs.carousel).

.karuzela("pozbądź się")

Niszczy karuzelę przedmiotu.

Rozwój

Karuzela w Bootstrap ma 2 zdarzenia do zastosowania tej funkcjonalności. Oba zdarzenia mają następujące dodatkowe właściwości:

kierunek: kierunek, w którym przesuwają się slajdy („w lewo” lub „w prawo”).
relatedTarget: Element DOM, który przesuwa się do pozycji „przesuniętego” slajdu.
z: Indeks bieżącego slajdu
do: Indeks następnego slajdu

Wszystkie zdarzenia karuzeli są uruchamiane bezpośrednio na karuzeli (tj. in

$("#myCarousel" ). on ("slide.bs.carousel" , function() ( // zrób coś… ))

Dzień dobry wszystkim, którzy chcą nauczyć się czegoś nowego z elementów frameworka Bootstrap. Dzisiejszym tematem jest suwak Bootstrap Carousel. To popularny element, który jest obecny na prawie każdej stronie internetowej.

Dlatego powiem Ci, jak stworzyć suwak karuzeli, jakie wbudowane narzędzia są do tego potrzebne, jak możesz skonfigurować parametry, a na końcu artykułu pokażę implementację konkretnego przykładu. A teraz przejdź do rzeczy!

Wszystko o narzędziach wtyczek Bootstrap Carousel

Galeria zdjęć karuzeli służy do prezentacji nowych ofert, produktów, listy aktualnych promocji, wygodnego przeglądania portfolio itp. Dlatego dzisiaj ważne jest, aby móc pracować z tą wtyczką pod oficjalne imię Wtyczka Bootstrap Carousel.

Należy od razu zauważyć, że opisany element nie jest poprawnie obsługiwany w przeglądarce Internet Explorer 9 i wcześniejszych wersjach. Działa jednak świetnie w (w przypadku WordPressa, Joomla! i innych silników podłączenie frameworka jest dość proste).

Aby łatwo operować ze wszystkimi parametrami i szybko dostosować suwak, musisz nauczyć się głównych wbudowanych klas Bootstrap 3.

Klasa	zamiar
karuzela	Tworzy sam suwak Karuzela.
slajd	Dodaje za pomocą css efekt animacji i przejść podczas przełączania między slajdami. Klasa jest opcjonalna.
wskaźniki karuzeli	Dodaje, że tak powiem, panel sterowania w postaci małych kropek na dole każdego obrazu, za pomocą którego można szybko przełączyć się na dowolny obraz. Klasa jest opcjonalna.
karuzela-wewnętrzna	Dodaje slajdy do galerii.
karuzela-podpis	Odpowiedzialny za podpisywanie plików graficznych. Może być dołączony zgodnie z życzeniem.
przedmiot	Definiuje zestaw treści dla każdego slajdu.
Sterowanie karuzelą w prawo/lewo	Dodaje prawy i lewy przycisk zgodnie z nazwą, aby przełączać się między ramkami.

Ponadto warto poznać inne cechy układu takich galerii.

Na początek, utworzenie samego bloku karuzeli wymaga deklaracji id="moja karuzela" dla prawidłowego funkcjonowania tego ostatniego.

W tym samym div musisz zarejestrować atrybut data-ride="karuzela", który określa, że animacja powinna zostać załadowana zaraz po załadowaniu strony.

Przejdźmy teraz do wskaźników. Każdy znacznik li powinien mieć kilka atrybutów: cel danych, który wskazuje na identyfikator konkretnej karuzeli, oraz slajd-danych-do, który określa numer klatki, do której należy przejść.

Jeśli chodzi o przyciski przełączające obrazy do przodu lub do tyłu, aby je zaimplementować warto zarejestrować atrybut slajd z danymi ze słowem kluczowym „prev” lub „next”.

Teraz znasz już podstawowe elementy frameworka, dzięki którym możesz w określony sposób edytować wyświetlanie slidera. Oczywiście możesz wyłączyć automatyczne przewijanie ramek, podpisy obrazów lub przyciski boczne.

Alternatywne mechanizmy kontrolne

Oprócz korzystania z wbudowanych klas Bootstrap możesz również skorzystać z . Tak więc istnieje wiele metod i opcji w JS, które implementują wszystkie te same akcje, tylko za pomocą narzędzia $.carousel(). Wśród nich można wymienić takie jak:

Test wiedzy

Cóż, teraz nadszedł czas, aby sprawdzić, w jaki sposób nauczyłeś się materiału i utrwalić zdobytą wiedzę. W tym celu opiszę każdą akcję, którą będziesz musiał podjąć na drodze do stworzenia „karuzeli”.

Najpierw musisz dołączyć wymagane skrypty i style. Wolę , ale framework można pobrać z oficjalnej strony ( http://getbootstrap.com/) i umieść pobrane pliki w katalogu głównym projektu.

Jeśli się ze mną zgadzasz, to w nagłówku dokumentu piszemy:

1 2 3

Jeśli jesteś zwolennikiem drugiej metody, zamiast pierwszej części linku musisz wstawić ścieżkę do pliku.

Teraz pozostaje do wdrożenia w suwaku. Aby to zrobić, wykorzystaj zdobytą wiedzę i napisz niezbędne fragmenty kodu w kolejności:

otwarcie wspólnego bloku odpowiedzialnego za opisywany instrument;
blok do określania wskaźników kontrolnych;
blok dla samych slajdów;
wykonanie przycisków bocznych.

Z tej listy można wykluczyć tylko drugi i ostatni element div.

Teraz jesteś już na pewno gotowy do pisania kodu.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76

Przykład galerii karuzeli

/*Utwórz główny blok*/

/*Wypełnianie slajdów*/

Przykład galerii karuzeli

/*Utwórz główny blok*/

/*Wskaż 4 wskaźniki w zależności od liczby obrazów*/ /*Wypełnij slajdy*/ /*Utwórz boczne przyciski sterujące*/

Komponent pokazu slajdów do iteracji elementów obrazu lub slajdów tekstowych na karuzeli. W przeglądarkach obsługujących interfejs API widoczności strony karuzela będzie unikać przełączania slajdów, gdy strony internetowe nie są widoczne dla użytkownika (na przykład, gdy przeglądarka jest nieaktywna, okno przeglądarki jest zminimalizowane itp.). Zagnieżdżone karuzele nie są obsługiwane.

Przykład

Animacje nie są obsługiwane w przeglądarce Internet Explorer 9

Bootstrap używa wyłącznie CSS3 do animacji, ale Internet Explorer 9 nie obsługuje wymaganych właściwości CSS. Dlatego podczas korzystania z tej przeglądarki nie ma animacji przejścia slajdów. Celowo zdecydowaliśmy się nie uwzględniać funkcji zastępczych opartych na jQuery dla przejść.

Wymagany początkowy aktywny element

Do jednego ze slajdów należy dodać klasę .active. W przeciwnym razie karuzele nie będą widoczne.

Dodatkowe tytuły

Łatwo dodawaj podpisy do slajdów, korzystając z elementu .carousel-caption w dowolnym elemencie .carousel-item . Umieść tam prawie dodatkowy kod HTML, a zostanie on automatycznie wyrównany i sformatowany.

pierwsza etykieta slajdu

Nulla vitae elit libero, pharetra augue mollis interdum.

druga etykieta slajdu

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

trzecia etykieta slajdu

Praesent commodo cursus magna, vel scelerisque nisl consectetur.

...

Problem z ułatwieniami dostępu

Komponent karuzeli w ogóle nie spełnia standardów ułatwień dostępu. Jeśli potrzebujesz kompatybilności, rozważ inne sposoby prezentacji Treści.

Stosowanie

Wiele karuzeli

Karuzele wymagają użycia identyfikatora na najbardziej zewnętrznym pojemniku (w .carousel), aby zarządzać karuzelą w celu prawidłowego funkcjonowania. Dodając wiele karuzeli lub zmieniając identyfikator karuzeli , zaktualizuj odpowiednie kontrolki.

Z tymi atrybutami

Korzystając z atrybutów danych, łatwo jest kontrolować pozycję karuzeli. slajd danych może być wywołany przez prev lub next , co zmienia położenie suwaka w stosunku do jego aktualnej pozycji. Alternatywnie użyj data-slide-to , aby przekazać indeks surowego slajdu karuzeli do data-slide-to="2" , co powoduje przesunięcie pozycji slajdu z definicjami indeksu zaczynającymi się od 0 .

Atrybut data-ride="carousel" służy do wyznaczania karuzeli jako animacji rozpoczynającej się od załadowania strony. Nie można jej używać w połączeniu z (niepotrzebnie) jawną inicjalizacją JavaScript tej samej karuzeli.