'HTML Javascript image slider - adding slide animation/

I made an image slider that work, but now I'm trying to add an animation effect to it, and I believe JavaScript may be the answer for that.

I'm trying to add the possibility to click the arrow buttons and have the image slide left or right depending on whether the left or right arrow is being clicked.

Is that possible.

Here is my HTML file.

<body>

  <div id="hcg-slider-1" class="hcg-slider">
    <div class="hcg-slide-container">
      <div class="hcg-slider-body">
        <a class="hcg-slides animated" style="display:block">
          <span class="hcg-slide-number">1/5</span>
          <img src="https://www.html-code-generator.com/images/slider/1.png" alt="image 1">
          <span class="hcg-slide-text">image 1</span>
        </a>
      </div>
      <a class="hcg-slide-prev" href="#">❮</a>
      <a class="hcg-slide-next" href="#">❯</a>
    </div>
    <div class="hcg-slide-dot-control"></div>
    </div>
    
    
    <script>
  
      (function(){
      //If you want to include more images, add the link name and URL of the image in the array list below.
        let images_list = [
          {"url":"photos/headers/ABY-header.png",
          "link":"", 
          "name": "just text"},

          {"url":"photos/headers/TMN-header.png",
          "link":"", 
          "name": "just text"},


          {"url":"photos/headers/TW-header.png",
          "link":"", 
          "name": "just text"},


          {"url":"photos/headers/NY-header.png",
          "link":"", 
          "name": "just text"},
         





        ];
        let slider_id = document.querySelector("#hcg-slider-1");
        
// append all images
let dots_div = "";
let images_div = "";
for (let i = 0; i < images_list.length; i++) {
  // if no link without href="" tag
  let href = (images_list[i].link == "" ? "":' href="'+images_list[i].link+'"');
  images_div += '<a'+href+' class="hcg-slides animated"'+(i === 0 ? ' style="display:block"':'')+'>'+
          '<span class="hcg-slide-number">'+(i+1)+'/'+images_list.length+'</span>'+
          '<img src="'+images_list[i].url+'" alt="'+images_list[i].name+'">'+
          '<span class="hcg-slide-text">'+images_list[i].name+'</span>'+
         '</a>';
  dots_div += '<span class="hcg-slide-dot'+(i === 0 ? ' dot-active':'')+'" data-id="'+i+'"></span>';
}



slider_id.querySelector(".hcg-slider-body").innerHTML = images_div;
slider_id.querySelector(".hcg-slide-dot-control").innerHTML = dots_div;

let slide_index = 0;

let images = slider_id.querySelectorAll(".hcg-slides");
let dots = slider_id.querySelectorAll(".hcg-slide-dot");
let prev_button = slider_id.querySelector(".hcg-slide-prev");
let next_button = slider_id.querySelector(".hcg-slide-next");

function showSlides() {
  if (slide_index > images.length-1) {
    slide_index = 0;
  }
  if (slide_index < 0) {
    slide_index = images.length-1;
  }
  for (let i = 0; i < images.length; i++) {
    images[i].style.display = "none";
    dots[i].classList.remove("dot-active");
    if (i == slide_index) {
      images[i].style.display = "block";
      dots[i].classList.add("dot-active");
    }
  }
}

prev_button.addEventListener("click", function(event) {
  event.preventDefault();
  slide_index--;
  showSlides();
}, false);

next_button.addEventListener("click", function(event){
  event.preventDefault();
  slide_index++;
  showSlides();
}, false);

function dot_click(event) {
  slide_index = event.target.dataset.id;
  showSlides();
}

for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", dot_click, false);
}
})();
</script>
javascripthtmljquerycss


Solution 1:[1]

I managed to add a sliding animation using JavaScript. Here's a good guide as to how it can be done.

https://www.cssscript.com/animated-image-slider/

This is the code I added.

    const content = document.querySelector(".content");
const slider = document.querySelector(".slider");
const sliderImage = Array.from(document.querySelectorAll(".slider-image"));
const btnChevron = document.querySelectorAll(".btn-chevron");
let i = 0;

let reset = (container, clase) => {
    container.forEach(item => item.classList.remove(clase));
}

let createInfo = text => {
    const sliderInfo = document.createElement("p");
    sliderInfo.className = "slider-info";
    sliderInfo.textContent = text;
    content.appendChild(sliderInfo);
};

let createIndicators = () => {
    const container = document.createElement("div");
    container.className = "indicator";
    content.appendChild(container)
    sliderImage.forEach(image => {
        let indicator = document.createElement("p");
        indicator.textContent = sliderImage.indexOf(image) + 1;
        container.appendChild(indicator);
    })
}

let Image = (index) => {
    const indicators = document.querySelectorAll('.indicator p');
    const sliderInfo = document.querySelector('.slider-info');
    sliderImage[index].classList.add('slider-image-active');
    reset(indicators, 'indicator-active');

    indicators[i].classList.add('indicator-active');
    
    if (content.hasElement(".slider-info")) return sliderInfo.textContent = sliderImage[index].dataset.info;
    createInfo(sliderImage[index].dataset.info);   
}

let setPosition = (index) => {
    let width = sliderImage[index].getBoundingClientRect().width;
    slider.style.transform = `translateX(-${width * index}px)`;
}

let moveImage = () => {
    if (i === sliderImage.length) {
        i = 0; // Si el contador ya llego al ultimo item, lo manda al primer item.
    } else if (i == -1) {
        i = sliderImage.length - 1; // Si llego al primero lo manda hasta el ultimo.
    }
    reset(sliderImage, 'slider-image-active');
    setPosition(i);
    Image(i);
};

btnChevron.forEach(btn => {
    btn.addEventListener('click', () => {
        if (btn.dataset.action == "right") {
            i++;
            return moveImage();
        }
        i--;
        return moveImage();
    })
})

createIndicators();
Image(i);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions