Si të krijoni një karusel duke përdorur HTML bazë, CSS dhe JavaScript

Si të krijoni një karusel duke përdorur HTML bazë, CSS dhe JavaScript

HTML

Kodi HTML do të krijojë përmbajtjen dhe imazhet për karuselin me ndihmën e elementeve DOM.

CSS

Kodi CSS do të trajtojë funksionalitetin e shfaqjes/fshehjes me ndihmën e emrave të klasave si .enable, etj.

Javascript

Kodi Javascript do të përdoret për të shtuar mbajtësin e ngjarjeve si butonat next / prev. Do të trajtojë klasën .enable duke përdorur skriptin tonë.

Ndiqni procedurën e mëposhtme për zbatimin

Hapi 1 - Shkrimi i kodit HTML

<!-- Slideshow container -->
<div class="slideshow-container fade">

  <!-- Full images / Content -->
  <div class="Containers">
    <div class="info">Slide 1</div>
    <img src="image1.jpg" style="width:100%">
    <div class="Info">First caption</div>
  </div>

  <div class="Containers">
    <div class="info">Slide 2</div>
    <img src="image2.jpg" style="width:100%">
    <div class="Info">Second Caption</div>
  </div>

  <div class="Containers">
    <div class="info">Slide 3</div>
    <img src="image3.jpg" style="width:100%">
    <div class="Info">Third Caption</div>
  </div>

  <!-- Prev and Next buttons -->
  <a class="Back" onclick="plusSlides(-1)">&#10094;</a>
  <a class="forward" onclick="plusSlides(1)">&#10095;</a>
</div>
<br>

<!-- The dots -->
<div style="text-align:center">
  <span class="dots" onclick="currentSlide(1)"></span>
  <span class="dots" onclick="currentSlide(2)"></span>
  <span class="dots" onclick="currentSlide(3)"></span>
</div> 

Hapi - 2 Shkrimi i kodit CSS

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Make the images invisible by default */
.Containers {
  display: none;
}

/* forward & Back buttons */
.Back, .forward {
  cursor: pointer;
  position: absolute;
  top: 48%;
  width: auto;
  margin-top: -23px;
  padding: 17px;
  color: grey;
  font-weight: bold;
  font-size: 19px;
  transition: 0.4s ease;
  border-radius: 0 5px 5px 0;
  user-select: none;
}

/* Place the "forward button" to the right */
.forward {
  right: 0;
  border-radius: 4px 0 0 4px;
}

/*when the user hovers,add a black background with some little opacity */
.Back:hover, .forward:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption Info */
.info {
  color: #e3e3e3;
  font-size: 16px;
  padding: 10px 14px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Content */
.info {
  color: #f2f2f3;
  font-size: 14px;
  padding: 10px 14px;
  position: absolute;
  top: 0;
}

/* The circles or bullets indicators */
.dots {
  cursor: pointer;
  height: 16px;
  width: 16px;
  margin: 0 3px;
  background: linear-gradient(92.18deg, #a049e9 -25.78%, #6643db 123.02%);
  opacity: 0.3;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.5s ease;
}

.enable, .dots:hover {
  background: linear-gradient(92.18deg, #a049e9 -25.78%, #6643db 123.02%);
  opacity: 1;
}

/* Faint animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.4s;
  animation-name: fade;
  animation-duration: 1.4s;
}

@-webkit-keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

@keyframes fade {
  from {opacity: .5}
  to {opacity: 2}
}

Hapi 3 - Shkruani kodin JavaScript

var slidePosition = 1;
SlideShow(slidePosition);

// forward/Back controls
function plusSlides(n) {
  SlideShow(slidePosition += n);
}

//  images controls
function currentSlide(n) {
  SlideShow(slidePosition = n);
}

function SlideShow(n) {
  var i;
  var slides = document.getElementsByClassName("Containers");
  var circles = document.getElementsByClassName("dots");
  if (n > slides.length) {slidePosition = 1}
  if (n < 1) {slidePosition = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < circles.length; i++) {
      circles[i].className = circles[i].className.replace(" enable", "");
  }
  slides[slidePosition-1].style.display = "block";
  circles[slidePosition-1].className += " enable";
} 

konkluzioni

Në këtë artikull, ne kemi mësuar se si të krijojmë karuselin e vet. Në shembullin e mësipërm mund të shikoni imazhe, përmbajtje ose video të ndryshme duke lëvizur majtas ose djathtas.