Како да направите клизач слике са ЈаваСцрипт-ом да бисте побољшали своју веб локацију

Да ли сте се икада нашли у ситуацији да желите да прикажете неколико слика/видео снимака на делу веб странице, али не желите да заузмете много простора? Да ли желите да додате интерактивност својим веб страницама или да их учините привлачнијима?

Клизач слике може вам уштедети борбу. У овом чланку ћемо дефинисати клизач слике, предуслове за креирање клизача слике и како га направити користећи ХТМЛ, ЈаваСцрипт и ЦСС.

Преглед садржаја

Шта је клизач слике?

Клизачи су вртешке или пројекције слајдова које приказују текстове, слике или видео записе. Овај чланак ће се фокусирати на клизаче слика. Већина веб програмера користи клизаче на почетној страници за промоцију понуда или најважнијих информација.

Ово су неки од разлога због којих би требало да користите клизаче на својим веб страницама.

Побољшајте корисничко искуство: Идеална веб страница треба да буде компактна тако да крајњи корисници не морају да скролују и скролују да би добили важне податке. Ако имате више слика, корисницима можете уштедети муке око померања тако што ћете их приказати у клизачу.
Визуелна привлачност: Већина корисника веб локација неће провести много времена на обичној веб страници. Можете побољшати визуелну привлачност помоћу клизача и анимација.
Уштедите простор: Ако имате 20 слика које желите да прикажете на својој веб страници, оне могу заузети много простора. Креирање клизача ће вам омогућити да уштедите простор и да и даље омогућите корисницима приступ свима њима.
Приказ динамичког садржаја: Можете да користите клизаче за приказ динамичког садржаја као што су уграђивања друштвених медија, блогови и вести.

Предуслови за прављење клизача слике

Основно разумевање ХТМЛ-а: Овде ћемо описати структуру клизача. Требало би да вам буде удобно да радите са разним ХТМЛ ознакама, класама и дивовима.
Основно разумевање ЦСС-а: Користићемо ЦСС за стилизовање наших клизача и дугмади за слике.
Основно разумевање ЈаваСцрипт-а: Користићемо ЈаваСцрипт да би клизачи слика били прилагодљиви.
Едитор кода: Можете користити уређивач кода по избору. Користићу Висуал Студио Цоде.
Збирка слика.

Подесите фасциклу пројекта

Потребна нам је фасцикла пројекта, фасцикла са сликама унутар ње и ХТМЛ, ЦСС и ЈаваСцрипт датотеке. Назваћу свој пројекат „Имаге-Слидер“. Можете креирати свој пројекат ручно или користити ове команде да бисте започели;

мкдир Имаге-Слидер

ЦД Имаге-Слидер

мкдир Слике && додирните индек.хтмл стилес.цсс сцрипт.јс

Комплетан водич и бесплатни шаблони [2022]

Додајте све своје слике у фасциклу „Слике“ коју смо креирали унутар фасцикле пројекта и пређите на следећи корак.

Ово је мој директоријум пројекта, у који сам додао шест слика које ћу користити за креирање клизача. Сав наш ХТМЛ код ће бити у датотеци индек.хтмл.

Врсте клизача слика

Можемо имати две врсте клизача за слике; аутоматски клизач и аутоматски клизач слике са дугмадима.

#1. Аутоматски клизач слике

Аутоматски клизач аутоматски скролује до следеће слике након одређеног времена, рецимо, на пример, 3 секунде.

ХТМЛ код

Ово је мој ХТМЛ код;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />


</head>

<body>
  <div id="slider">
    <div class="slide">
        <h1>African</h1>
      <img src="Images/img1.jpg" >
    </div>
    <div class="slide">
        <h1>American</h1>
      <img src="Images/img2.jpg" >
    </div>
    <div class="slide">
        <h1>Asian</h1>
      <img src="Images/img3.jpg" >
    </div>
    <div class="slide">
        <h1>Arabic</h1>
      <img src="Images/img4.jpg" >
    </div>
    <div class="slide">
        <h1>Modern </h1>
      <img src="Images/img5.jpg" >
    </div>
    <div class="slide">
        <h1> European </h1>
      <img src="Images/img6.jpg" >
    </div>
  </div>

  <script src="script.js"></script>


</body>
</html>

Из овог кода можемо приметити следеће;

Увезао сам своју ЦСС датотеку у индек.хтмл у одељку <хеад>. Ово ће се користити у каснијим корацима.

<линк рел=”стилесхеет” хреф=”стилес.цсс”>

Додао сам ЈаваСцрипт у свој ХТМЛ код непосредно пре завршне ознаке <боди>. Користићу ЈаваСцрипт да додам функционалност клизачима.
Сваки слајд има класу слајда.
Користио сам ознаку <имг> за увоз слика из фасцикле Слике.

Стилизирајте аутоматски клизач слике користећи ЦСС

Сада можемо да стилизујемо наше слике пошто смо већ повезали ЦСС и ХТМЛ датотеке.

Додајте овај код у своју ЦСС датотеку;

#slider {
    width: 80%;
  }
  
  .slide {
    width: 80%;
    display: none;
    position: relative;
  }
  
  .slide img {
    width: 80%;
    height: 80%;
  }
  
  .slide.active {
    display: block;
  }

Из овог кода можемо приметити следеће;

Имамо ширину и висину нашег клизача на 80%
Поставили смо активни слајд на блокиран, што значи да ће само активни слајд бити приказан док су остали скривени.

Како додати ЈаваСцрипт да би клизач слике био прилагодљив

Додајте овај код у своју датотеку сцрипт.јс;

var slides = document.querySelectorAll('.slide');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide,2000);

function nextSlide() {
  slides[currentSlide].className="slide";
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className="slide active";
}

Овај ЈаваСцрипт ради следеће;

Користимо селектор доцумент.куериСелецторАлл да циљамо све елементе са класом слајда.
ЦуррентСлиде 0 дајемо почетну вредност.
Поставили смо слидеИнтервал на 2000 (2 секунде), што значи да се слике у клизачу мењају на сваке 2 секунде.
Овај код клизи[currentSlide].цлассНаме = ‘слиде’; уклања активну класу са тренутног слајда
Овај код цуррентСлиде = (цуррентСлиде + 1) % слидес.ленгтх; повећава тренутни индекс слајда.
Овај код клизи[currentSlide].цлассНаме = ‘слајд активан’; додаје активну класу тренутном слајду.

Аутоматски клизач ради на следећи начин;

#2. Аутоматски клизач са дугмадима

Клизач слике који смо креирали аутоматски се помера након сваке 2 секунде. Сада можемо да креирамо слику на којој корисници могу да пређу на следећи слајд кликом на дугме или аутоматским померањем након сваке 3 секунде ако корисник не кликне на дугмад.

ХТМЛ код

Можете променити садржај ваше индек.хтмл датотеке на следећи начин;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Slider</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="https://wilku.top/how-to-create-image-slider-with-javascript-to-amp-up-your-website/styles.css" />
  </head>
  <body>
    <div class="container">

        <div class="mySlides">
            <img src="Images/img1.jpg" style="width:100% ; height:50vh" >
        </div>
      
        <div class="mySlides">
            <img src="Images/img2.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img3.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img4.jpg" style="width:100% ; height:50vh">
        </div>
      
        <div class="mySlides">
            <img src="Images/img5.jpg" style="width:100% ; height:50vh">
        </div>
      
      
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      
        <div class="caption-container">
          <p id="caption"></p>
        </div>
      
        <div class="row">
          <div class="column">
            <img class="demo cursor" src="Images/img1.jpg" style="width:100%" onclick="currentSlide(1)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img2.jpg" style="width:100%" onclick="currentSlide(2)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img3.jpg" style="width:100%" onclick="currentSlide(3)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img4.jpg" style="width:100%" onclick="currentSlide(4)" >
          </div>
          <div class="column">
            <img class="demo cursor" src="Images/img5.jpg" style="width:100%" onclick="currentSlide(5)" >
          </div>
          
        </div>
      </div>

    <script src="script.js"></script>
  </body>
</html>

Овај ХТМЛ код ради на следећи начин;

Имамо класу под називом миСлидес која носи наших пет слика.
Имамо два дугмета, „прев“ и „нект“ са онЦлицк-ом, омогућавајући корисницима да се крећу кроз слајдове.
Имамо сличицу која приказује слике у доњем делу веб странице.

ЦСС код

Додајте ово свом коду;

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  justify-content: center;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: rgb(34, 143, 85);
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.caption-container {
  text-align: center;
  background-color: orangered;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 16.66%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

ЦСС код ради на следећи начин;

Поставили смо својство приказа класе .миСлидес као ништа, што значи да су сви слајдови скривени подразумевано.
Поставили смо непрозирност сличица на које се лебди курсор на 1 кроз активно правило .демо:ховер {опацити: 1;}.

ЈаваСцрипт код

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

let slideInterval = setInterval(() => {
  plusSlides(1);
}, 3000);

let slideshowContainer = document.getElementsByClassName('slideshow-container')[0];
slideshowContainer.addEventListener('mouseenter', () => {
  clearInterval(slideInterval);
});

slideshowContainer.addEventListener('mouseleave', () => {
  slideInterval = setInterval(() => {
    plusSlides(1);
  }, 3000);
});

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("demo");
  let captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

Коначан изворни код можете добити овде.

Наш ЈаваСцрипт код ради следеће;

Имамо функцију цуррентСлиде са вредношћу приказа постављеном као ниједна. Ово правило дозвољава нашој веб страници да прикаже само тренутни слајд.
Имамо функцију плусСлидес која додаје/одузима дату вредност из слидеИндек-а да би одредила који слајд да прикажемо.
Ако корисник не кликне на дугмад, слајдови ће се аутоматски померати након сваких 3000 милисекунди.

Ако корисник користи картицу за навигацију, наш клизач слике ће радити на следећи начин;

Ако корисник не користи дугмад за навигацију, клизач слике ће се аутоматски померати након сваке 3 секунде на следећи начин;

Клизач слике за тестирање и отклањање грешака

Грешке и грешке су део пута програмера, а њихово постојање у коду не значи да сте лош програмер. Ако ваш код не ради чак ни након што следите горе наведене кораке, можете испробати ове опције тестирања и отклањања грешака да бисте исправили грешке:

Отклоните грешке у свакој датотеци посебно: Наш код има три датотеке, ХТМЛ, ЦСС и ЈаваСцрипт датотеке. Три језика имају различита правила. Можете да проверите да ли су ваши ХТМЛ, ЦСС и ЈаваСцрипт кодови важећи помоћу алата као што су В3Ц услуга провере ознаке за ХТМЛ, ЦСС Валидатор за ваш ЦСС код и Цхроме ДевТоолс за тестирање вашег ЈаваСцрипт кода.
Извршите различите типове тестова: можете да урадите визуелне тестове да бисте били сигурни да су слике приказане исправно, тестове перформанси да бисте проверили да ли слике реагују и функционалне тестове да бисте били сигурни да су слике навигационе.
Тестирајте свој код са различитим форматима и величинама слика: Добар клизач слика треба да ради са различитим форматима и величинама слика.
Аутоматизујте своје тестове: аутоматизација је свуда, а ви такође можете имати користи од ње у тестирању. Можете користити алате као што су Селениум или ЛоадРуннер за писање и извршавање скрипти за аутоматизацију теста. Ови алати вам такође омогућавају да поново користите неке од својих тестова.
Документујте своје тестове: Тестирање је континуиран процес. Можда ћете морати да наставите да побољшавате своје тестове док ваш код не буде функционисао како се очекује. Документујте овај процес да би ваш код био читљив и лак за референцу.

Клизачи слика: најбоље праксе

Будите једноставни: клизачи су привлачни. Међутим, држите мали број слика у клизачу. Нешто попут 4-7 слика по слајду је идеално.
Тестирајте своје клизаче: тестирајте њихову функционалност пре него што их објавите на мрежи.
Креирајте клизаче са одзивом: Уверите се да ваши креирани клизачи реагују на различите величине екрана.
Користите слике високог квалитета: Снимите/преузмите слике високог квалитета за своје клизаче. Чување ваших слика у СВГ формату је одличан приступ, јер не губе квалитет када им промените величину.
Промените величину слика: Можда имате различите величине и формате слика. Увек водите рачуна да слике у клизачу буду исте величине. То можете постићи помоћу ЦСС-а.

Окончање

Надамо се да сада можете да креирате потпуно функционалан клизач слике за приказ важних података на вашој веб локацији без коришћења оквира корисничког интерфејса. Исти приступ можете користити за креирање видео клизача на веб страницама.