Utwórz suwak obrazu za pomocą Jquery dla sieci

Zamierzamy stworzyć suwak opracowany za pomocą Jquery Tak Suwak Nivo, bez konieczności posiadania wtyczki i które możemy dostosować do naszej strony internetowej.

W tym celu użyjemy Framework JQuery, który jest biblioteka ułatwiająca pracę z językiem Javascript. Bibliotekę pobieramy z jquery.com, możliwe jest również, że możesz go użyć, ciągnąc googleapis.com używając tego kodu na swojej stronie html, aby dodać ten skrypt.

Jeśli pobrałeś go ze strony Jquery i przesłałeś do katalogu w swojej witrynie, musisz umieścić go tak, aby wskazywał na swoją domenę, jak w poniższym przykładzie:

Teraz pobierzmy Suwak Nivo co to jest Biblioteka Jquery, która pozwoli nam stworzyć slider. Stąd możesz pobrać suwak Nivo za darmo. Rozpakuj plik w naszym katalogu, tutaj możemy zobaczyć strukturę sieci.

Teraz stworzymy plik index.html dla naszej strony, w nagłówku umieścimy biblioteki i arkusze stylów. Możemy zobaczyć bibliotekę Jquery, bibliotekę suwaków nivo i własne arkusze stylów suwaka Nivo, a następnie możemy je dostosować.

Teraz stworzymy kontener na nasze obrazy i suwak, w tym celu i aby móc go pokazać, został utworzony w tym samym index.html (można go również utworzyć w pliku arkusza stylów CSS, aby dopasować każdy).
Zaczynamy od struktury sieci i samego suwaka, wstawiając obrazy do wyświetlenia i komunikat.

Następnie aktywujemy wtyczkę nivo Silder i przesyłamy do niej parametry dotyczące rodzaju efektu, czasu między animacją, przerwy między obrazami i wiele innych, które można zobaczyć w dokumentacji Nivo Slider.

Zauważmy, że identyfikator jest aktywny #silder ten sam, w którym definiuję obrazy, więc jeśli chcę mieć więcej niż jeden suwak, będę musiał zreplikować tę samą strukturę i aktywować ją dla odpowiedniego identyfikatora.
Wynik testowania index.html w przeglądarce to:

Tutaj widzimy drugi slajd, poniżej ilość slajdów 1 i 2 oraz domyślne linki Poprzedni (poprzedni) Następny (następny) poprawimy widok tego za pomocą css.
Możemy zmienić liczby na pociski, po prostu patrząc na nivo-silder.css

 .nivo-controlNav {wyrównanie tekstu: do lewej; wypełnienie: 0; pozycja: względna; indeks z: 10; } .nivo-controlNav do {wyświetlania: inline-block; szerokość: 10px; wysokość: 10px; tło: url (bullets.png.webp) bez powtórzeń; wcięcie tekstu: -9999px; granica: 0; margines: 0 2px; } .nivo-controlNav a.active {pozycja w tle: 0 100%; } .nivo-directionNav do {wyświetlanie: blok; szerokość: 30px; wysokość: 30px; tło: url (strzałki.png.webp) bez powtórzeń; wcięcie tekstu: -9999px; granica: 0; góra: auto; dół: -36px; indeks z: 11; } .nivo-directionNav a: hover {kolor tła: #eee; -webkit-obramowanie-promień: 2px; -moz-border-promień: 2px; promień obramowania: 2px; } a.nivo-nextNav {pozycja w tle: 160% 50%; po prawej: 0px; } a.nivo-prevNav {pozycja w tle: -60% 50%; po lewej: auto; prawy: 35px; } 

Wynikiem tej zmiany będą liczby jako punktory po lewej stronie i linki jako strzałki po prawej stronie.

Zamierzamy rozszerzyć funkcjonalność, pokazując blok danych na jednym ze slajdów

Modyfikując kod, który już posiadamy, zamieniamy akapit w slajdzie 2 na blok, który wywołam z id#block2, następnie tworzę blok i stosuję ukryty styl, aby był widoczny tylko przy aktywowanym slajdzie 2.
Wynik jest następujący:

Możesz także umieścić miniatury. Inną opcją jest dynamiczne generowanie treści z mysql i php lub użycie ich w szablonie CMS, takim jak joomla lub wordpress. Zawiera wiele wtyczek już zaprogramowanych, ale za pomocą kilku linijek kodu możemy stworzyć własny komponent. Mam nadzieję, że ci to służyło.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt