HTML Javascript 图片 slider - 添加幻灯片动画/

Question

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.我制作了一张有效的图像 slider，但现在我正在尝试为其添加 animation 效果，我相信 JavaScript 可能是解决该问题的答案。

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.这是我的 HTML 文件。

<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>

Answer 1

I managed to add a sliding animation using JavaScript. Here's a good guide as to how it can be done.我设法使用 JavaScript 添加了一个滑动 animation。这里有一个关于如何完成的很好的指南。

https://www.cssscript.com/animated-image-slider/ 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);

HTML Javascript 图片 slider - 添加幻灯片动画/

问题描述

1 个解决方案

解决方案1
0 已采纳

HTML Javascript 图片 slider - 添加幻灯片动画/

问题描述

1 个解决方案

解决方案1 0 已采纳

解决方案1
0 已采纳