Web design and development

Tema: Creare slider cu JavaScript. Adăugare în site

Bună! Azi avem ultima lecție din acest curs și la sfârșitul ei...
- vei afla cum poate fi creat un slider cu ajutorul HTML, CSS și animat cu JavaScript.

Deci, vom începe cu definirea noțiunilor... Sliderul este o stivă cu slide-uri sau
diapozitive care sunt prezentate succesiv. Unii mai numesc sliderul și ”carusel”. Slider-
urile sunt utilizate pentru a prezenta un produs, un serviciu sau pentru a face publicitate
unei companii, de exemplu. Există foarte multe utilizări practice pentru slider-uri.
Slide-urile – părțile componente ale slider-ului – pot fi vizualizate de utilizator prin
accesare manuală sau procesul de vizualizare poate fi automat, adică fără participarea
utilizatorului.
Sliderul cu control manual – este acel slider, în care utilizatorul singur decide ce slide
dorește să vizualizeze, prin alegere. Iar sliderul cu control automat este acel slider care
automat prezintă toate slide-urile, succesiv, utilizatorului. Pentru a fi posibilă
prezentarea automată a slide-urilor, este necesar să se scrie o funcție, care va prezenta
slide-urile cu o anumită regularitate și într-o anumită ordine.
În cadrul acestei lecții vom realiza un slider automat, care poate fi inserat în orice site.
Sliderul prezentat în continuare, va prezenta produsele cafenelei. Am decis că slider-ul
va fi format din 4 slide-uri.
Pentru a realiza slider-ul trebuie să definesc, în documentul web, acolo unde doresc să
apară acesta, un element DIV-container pentru el. Eu l-am plasat după bara cu meniul
de bază. În conținutul containerului voi avea alte patru blocuri ”div” – câte unul pentru
fiecare slide:
<div class="slideshow-container">
  <div class="slide anim">
    <div class="numbertext">1 / 4</div>
    <img src="images/slider1.jpg">
    <div class="text">Te așteptăm oricând </div>
  </div>
  <div class="slide anim">
    <div class="numbertext">2 / 4</div>
    <img  src="images/slider2.jpeg">
    <div class="text">Cafeaua este mereu fierbinte...</div>
  </div>
  <div class="slide anim">
 Web design and development

    <div class="numbertext">3 / 4</div>
    <img src="images/slider3.jpg">
    <div class="text">Chiar și espresso...</div>
  </div>
  <div class="slide anim">
    <div class="numbertext">4 / 4</div>
    <div class="orar">
        <h2>ORAR</h2>
        <h3>Luni - Vineri:</h3>
        <h3>8:00-20:00</h3>
        <h3>Sâmbătă - Duminică:</h3>
        <h3>10:00-22:00</h3>
    </div>
    <div class="text">Coffee Time</div>
  </div>
</div>
…
<script src="js/script_slider.js"></script>
</body>
</html>

Fiecare slide, la rîndul lui, are în componență alte trei componente:

1. una pentru a prezenta numărul slide-ului,
2. în cea de-a doua – voi amplasa imaginea și
3. în cea de-a treia componentă, voi insera o mică descriere a imaginii.
 Web design and development

Observă că primele 3 slide-uri au în conținut imagini, iar cel de-al patrulea – are text, ce
prezintă orarul cafenelei.
Foarte mult contează în slider stilurile CSS. Să le analizăm:
.slideshow-container {
      color: #FFF8DC;
      font-family: Croissant;
      position: relative;
      margin: 95px auto 5px;
      opacity: 1;
      filter: alpha(opacity=100);
      padding:0;
      border: 3px solid lightgrey;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);

}
.slideshow-container:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.slide {
    display: none;
    height: 100%;
}

.slide img {
    margin:0;
    width:100%; 
    height:100%;
}
.text {
  font-size: 1.7rem;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}

.numbertext {
  font-size: 1rem;
  padding: 8px 12px;
  position: absolute;
  top: 20px 50px;
}
.orar{
    width:100%; 
 Web design and development

    height:100%;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    background: #1a0000;
}

.anim {
  -webkit-animation-name: anim;
  -webkit-animation-duration: 2s;
  animation-name: anim;
  animation-duration: 2s;
}

@-webkit-keyframes anim {
  from {opacity: 0.8; transition: 2s;} 
  to {opacity: 1}
}

@keyframes anim {
  from {opacity: .8; transition: 2s;} 
  to {opacity: 1}
}

Observă cum au fost definite stilurile pentru toate elementele utilizate în codul HTML.
Animația definită cu CSS se referă la schimbarea opacității slide-ului. Această schimbare
durează 2 secunde.
De asemenea, o mare importanță pentru slider o are JavaScriptul care dinamizează
slider-ul, utilizând DOM HTML. Sper că ai observat în documentul HTML, cum a fost
apelat JavaScript-ul la sfârșitul documentului web.
Să vedem codul:
var slideIndex = 0; 
//initializez variabila responsabila de indexarea slide-urilor
showSlides();       //apelez funcția ce animeaza sliderul

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("slide");  
//in .html sunt 4 elemente cu clasa ”slide”
    for (i = 0; i < slides.length; i++) {                   
//returnandu-se o colectie de 4 elemente
        slides[i].style.display = "none";                   
//se vor parcurge elementele si nu vor fi prezentate
    }
 Web design and development

    slideIndex++;                       
//incrementez variabila responsabila de indexare
    if (slideIndex > slides.length) {
      slideIndex = 1;
    } 
    slides[slideIndex-1].style.display = "block";   // succesiv prezint slide
-urile
    setTimeout(showSlides, 3000);   
//functia va fi apelata peste 3 secunde, 3000milisecunde=3secunde
}

Deci, după cum am afirmat deja, acest slider este automat și singur va defila toate slide-
urile din stiva slider-ului. Pentru a realiza această prezentare automată am utilizat
funcția predefinită setTimeout(showSlides, 3000); care lansează la fiecare 3 secunde,
funcția definită în script showSlides(), responsabilă de prezentarea unui slide.
Utilizatorul nu va putea vedea imaginea din slide mai mult de 3 secunde.
Slider-ul trebuie privit, pentru a vedea efectul tranzițiilor slide-urilor... 😊
(De aceea, voi anexa filmulețul slider.mp4).
Ar fi bine să știi că astăzi de cele mai multe ori slide-urile pot fi implementate prin
intermediul bibliotecilor și ale framework-urilor bazate pe JavaScript, ca de exemplu
biblioteca owl.carousel.js sau frameworkul Bootstrap.
OK! Să vedem care este JavaScriptul responsabil de introducerea anului în footer... Îl
vezi acum la ecran...
/*year*/
function getYear() {
  var d = new Date();
  var yr=d.getFullYear();
  document.getElementById("year").innerHTML = yr;
}

...este un script micuț care mereu va afișa în locul specificat de noi în documentul web,
anul curent.
Bine ... să vedem și JavaScriptul responsabil de animarea meniului de tip hamburger ...
Acest script este apelat în documentul web la început – vezi secvența de cod acum la
ecran:
...
    <script src="js/scripts.js"></script>
 Web design and development

</head>
...

Analizează atent codul, din acest fișier, prezentat acum la ecran:

function responsiveMenu() {
  var x = document.getElementById("myNav");
  if (x.className === "nav") {
    x.className += " responsive";
  } else {
    x.className = "nav";
  }
}
function hideMenu() {
  var x = document.getElementById("myNav");
  if (x.className !== "nav") {
    x.className = "nav";
  }
}

Ideea de bază a acestui script constă în schimbarea denumirii clasei elementului cu id-ul
”myNav”. Adică, atunci când utilizatorul face click pe buton, scriptul verifică numele
clasei acestui element și dacă ea este ”nav” atunci o transformă în ”nav responsive”, iar
în cazul când numele clasei este diferit de ”nav” – atunci scriptul îi atribuie valoarea
”nav”.
(Vezi filmulețul responsive_menu.mp4)
În fișierul de stiluri însă a fost specificat că elementul cu clasa .icon, din elementul cu
clasa .nav, adică simbolul de hamburger menu, implicit nu trebuie să fie afișat pe ecran.
Iată acum vezi la ecran secvența CSS responsabilă de această ”ascundere” a
elementului:
.nav .icon {
  display: none;
}

Iar această secvență CSS este un mediaQuery, care ține cont de punctul de control și
atunci când lățimea ecranului devine mai mică decât 890px – va înlocui meniul orizontal

cu simbolul . Analizează atent acest cod...

@media screen and (max-width: 890px) {
  .nav a:not(:first-child) {display: none;}
  .nav a.icon {
 Web design and development

    float: right;
    display: block;
  }
  .nav.responsive {position: relative;}
  .nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

Aceasta a fost tot pentru această lecție. Vreau să cred că acest curs, a fost unul util și vei
încerca să realizezi și alte multe componente pentru paginile web, bazate pe JavaScript.
Scopul pe care trebuie să-l urmărești e să dezvolți pagini interactive, dar care să nu
abunde în efecte vizuale, pentru a nu obosi ochii utilizatorului. Succese!