Suwak z dynamiczną animacją z pomocą Glide.js

Tutoriale
03 listopada 2015 Katarzyna Pawłowska
Share Tweet Share Pin

Większość deweloperzy powinni być zaznajomieni z koncepcją slideshow. Przeważnie te elementy są umieszczane w górnej części strony tuż pod nagłówkiem. Slajdy mogą zawierać tekst, obrazki, wideo, lub połaczenie wszystkich tych elementów. Celem slideshow jest, aby przyciągnąć uwagę ludzi i zachęcić do dalszego poruszania się stroną.

W tym tutorialu pokażę stworzenie prostej wersji takich suwaków. Glide.js jest open source, responsywny i idealny dla każdego układu. Możesz dostosować kolory i elementy interfejsu użytkownika w suwaku. Ma również mnóstwo opcji jQuery do dostosowania interfejsem użytkownika.

glidejs jquery animated slider plugin tutorial screen

Demo – Pobierz kod źródlowy

Zacznijmy!

Pierwszym krokiem jest pobranie kopii lokalnej Glide.js bezpośrednio z Github. Skopiowalam jquery.glide.min.js do folderu /js/. Możesz również ściągnąć lokalną kopię jQuery i zapisać ją w tym samym folderze.

SEO 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Glide.js Content Slider Demo - Template Monster</title>
  <meta name="author" content="Jake Rocheleau">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/jquery.glide.min.js"></script>
</head>

Stworzyłam własny arkusza stylów styles.css do zmiany stylu całej strony. Glide.js pochodzi z własnego arkusza stylów, więc skopiowałam go do mojego nowego pliku. W ten sposób wszystko jest konsolidowane razem i znacznie łatwiej jest edytować wszystkie elementy. Ponieważ wtyczka jest responsywna muszę eównież skonfigurować meta tag obszaru wyświetlania do obsługi tabletów i smartfonów.
Glide jest bardzo łatwy w dostosowaniu. Potrzebnie ponownie zdefiniować niektóre style CSS przed przeniesieniem na coś inne. Ale najpierw rzućmy okiem na moją strukturę strony.

Elementy HTML

Wtyczka działa poprzez podłączenie do elementu pojemnika, który posiada wewnętrzną nieuporządkowaną listę elementów. Każdy element listy zachowuje się jak nowy slajd w pokazie slajdów. Poniżej jest przykładowy kod z dokumentacji GitHub:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div class="slider">
  <ul class="slides">
    <li class="slide"></li>
    <li class="slide"></li>
    <li class="slide"></li>
  </ul>
</div>
I kept most of these same class names to simplify the process. But you could rearrange things to use specific ID names, or even different classes running different options. Most websites do not need more than 1 or 2 of these sliders and that's why using an ID on the container might be a better solution.
 
<pre lang="PHP" line="1"><div class="slider">
  <ul class="slides">
    <li class="slide">
      <figure>
        <figcaption>Designed by <a href="http://dribbble.com/shots/1362980-Witches" target="_blank" rel="nofollow">Adam Record</a></figcaption>
        <img src="img/witches.png" alt="dribbble witches">
      </figure>
    </li>

Mój poradnik zawiera nieco więcej całych figur graficznych w ramach każdego elementu listy. Element graficzny zawiera obrazek wraz z figcaption do zapewnienia oryginalnego linku źródłowego. Ten pojemnik jest wymagany, więc wszystko wewnątrz elementu listy może być na wyśrodkowane, bez przemieszczania strzałek przewijania na każdej stronie.

Zaktualizowane CSS Styles

Nazwy klas są domyślne, mogą być łatwo zmienione w razie potrzeby, więc proszę o tym pamiętać przy przenoszeniu kodu do swojej witryny internetowej.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.slider {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
 
.slides {
  height: 100%;
  overflow: hidden;
  /**	
   * Prevent blinking issue
   * Not tested. Experimental.
   */
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
 
   -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
   -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
   -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000); 
   transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

Wykorzystanie width:100% pozwala na zachowanie stałej wysokości. Możesz zmienić ten numer, aby bdokładnie pasował do Twojego układu. Wszystkie przejścia CSS3 powinny zostać, ponieważ są one stosowane przez Glide.js między każdym slajdem.

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

.slide {
  height: 100%;
  float: left;
  clear: none;
}
.slide figure {
  display: block;
  position: relative;
  text-align: center;
}
.slide figure figcaption {
  position: absolute;
  right: 20%;
  font-size: 1.1em;
  font-weight: bold;
  padding: 8px 14px;
  color: #464646;
  background: rgba(255,255,255,0.8); 
}
.slide figure figcaption a {
  color: #5a7fbc;
  text-decoration: none;
}
.slide figure figcaption a:hover { text-decoration: underline; }
 
.slide figure img {
  max-height: 480px;
}
These styles were manually added to contain the image and the caption label. The outer figure element is positioned relatively to allow for absolute positioning of the label. Percentages are the best solution when using a mobile-responsive plugin so everything works as best as possible.
 
<pre lang="PHP" line="1">.slider-arrows {}
 
.slider-arrow {
  position: absolute;
  display: block;
  margin-bottom: -20px;
  padding: 20px;
  font-family: 'Alegreya Sans', 'Trebuchet MS', sans-serif;
  text-decoration: none;
  font-weight: 900;
  font-size: 3.0em;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 8px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  transition: all 0.2s linear;
}
.slider-arrow:hover {
  background: #ddd;
  color: #aaa;
}
.slider-arrow--right { bottom: 50%; right: 30px; }
.slider-arrow--left { bottom: 50%; left: 30px; }
 
 
 
.slider-nav {
  position: absolute;
  bottom: 0px;
}
 
.slider-nav__item {
  width: 12px;
  height: 12px;
  float: left;
  clear: none;
  display: block;
  margin: 0 5px;
  background: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.slider-nav__item:hover { background: #bababa; }
.slider-nav__item--current, .slider-nav__item--current:hover { background: #999; }

Strzałki w lewo/ w prawo mogą być aktualizowane za pomocą jQuery. To można również wykorzystać dla przycisków nawigacji slajdów. Dla każdego elementu listy Glide.js dołączy jeden nowy punkt, który zachowuje się jak indeks. Można dostosować reżim aktywny/nieaktywny dla wybranego elementu nawigacyjnego.

Akywowanie Glide.js

Jeśli mamy wtyczki i jQuery zawarte w dokumencie, wszystko, co pozostało - to inicjowanie. Możemy wykorzystać prosty $(‘.slider’).glide(), który ma ustawienia domyślne. Ale chcę trochę dostosować slider. Glide.js ma dużą listę opcji wtyczek, które można przeczytać w Github dokumentacji.

1
2
3
4
5
6

$('.slider').glide({
    autoplay: 3500,
    hoverpause: true, // set to false for nonstop rotate
    arrowRightText: '&rarr;',
    arrowLeftText: '&larr;'
  });

autoplay może być ustawiona na false, jeśli nie chcesz automatycznego przewijania slajdów. W przeciwnym wypadku wartość numeryczna jest określona w milisekundach pomiędzy przejściem slajdów. hoverpause jest również świetnym rozwiązaniem, które automatycznie zatrzymuje suwak, gdy nie jest aktywny. Jeśli nie podoba Ci się ta funkca, zawsze możesz łatwą ją wyłączyć.

Słowa "Następny" i "Poprzedni" zmieniłam na HTML podmioty strzałek. Teraz pojawiają się one na stronie jako przyciski, które są bardziej przyjazne dla użytkownika.

glidejs jquery animated slider plugin tutorial screen

Demo – Pobierz kod źródłowy

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: Implement a Dynamic Animated Slider Using Glide.js.

DostosowywanieOptymizacja i SEOTutorial
Katarzyna Pawłowska
Katarzyna Pawłowska

W branży IT od 8 lat. Fan nowych technologii webowych, web designu oraz rozwiązań użytecznych i funkcjonalnych. W praktyce: marketer, DJ, blogerka. W wolnym czasie wspiera inicjatywy propagujące wiedzę z dziedziny SMM i rozwija swoją miłość do crossfitu.

Polecane wpisy

Tutoriale

Tutorial: instalacja tematu dla kreatora stron Elementor w WordPress

09 lipca 2021 4K
Hacki do WordPressa

Tworzenie niestandardowego szablonu strony w WordPress 4.x

31 maja 2021 5K
Hacki do WordPressa

Jak wstawić favicons w WordPress?

30 kwietnia 2021 10K