javascript slider

Fancy Fly answered on February 4, 2022 Popularity 10/10 Helpfulness 2/10

answer javascript slider

javascript slider

Comment

//Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript.
//No dependencies, no Lighthouse errors.

//Get it on:
https://splidejs.com/

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript slider

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Fancy Fly

0 Answers Avg Quality 2/10

Closely Related Answers

js image slider

Comment

<!DOCTYPE html>
<html>
<head>
    <style>
        /* CSS to style the image slider */
        .slider {
            width: 400px;
            height: 300px;
            overflow: hidden;
        }

        .slider img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="slider">
        <img src="image-1.jpg" alt="Image 1">
        <img src="image-2.jpg" alt="Image 2">
        <img src="image-3.jpg" alt="Image 3">
    </div>

    <script>
        // JavaScript code to implement image slider functionality
        const slider = document.querySelector('.slider');
        const images = slider.getElementsByTagName('img');
        let currentIndex = 0;

        function showImage(index) {
            // Hide all images
            for (let i = 0; i < images.length; i++) {
                images[i].style.display = 'none';
            }
            
            // Show the selected image
            images[index].style.display = 'block';
        }

        // Initial display of the first image
        showImage(currentIndex);

        // Interval to automatically move to the next image every 3 seconds
        setInterval(() => {
            currentIndex = (currentIndex + 1) % images.length;
            showImage(currentIndex);
        }, 3000);
    </script>
</body>
</html>

Popularity 10/10 Helpfulness 2/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

slider library js

Comment

// Example using Swiper slider library
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  </head>
  <body>
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper('.swiper-container', {
        pagination: {
          el: '.swiper-pagination',
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });
    </script>
  </body>
</html>

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Slider JS

Comment

const slider = function () {
  let currentSlide = 0;
  const maxSlide = slides.length;

  /////////////functions
  //create dots
  const createDots = function () {
    slides.forEach(function (_s, i) {
      dotContainer.insertAdjacentHTML(
        "beforeend",
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  //activate dot
  const activateDot = function (slide) {
    const allDots = document.querySelectorAll(".dots__dot");
    allDots.forEach((dot) => dot.classList.remove("dots__dot--active"));

    //select dot based on data set attribute
    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add("dots__dot--active");
  };

  //default slide
  const goToSlide = function (slide) {
    slides.forEach(function (s, index) {
      s.style.transform = `translateX(${100 * (index - slide)}%)`;
    });
  };

  //going next slide
  const nextSlide = function () {
    if (currentSlide === maxSlide - 1) {
      currentSlide = 0;
    } else {
      currentSlide++;
    }

    goToSlide(currentSlide);
    activateDot(currentSlide);
  };

  //going prev slide
  const prevSlide = function () {
    if (currentSlide === 0) {
      currentSlide = maxSlide - 1;
    } else {
      currentSlide--;
    }

    goToSlide(currentSlide);
    activateDot(currentSlide);
  };

  const init = function () {
    goToSlide(0);
    createDots();
    activateDot(0);
  };
  init();

  //Event handlers
  btnRight.addEventListener("click", nextSlide);
  btnLeft.addEventListener("click", prevSlide);

  //short circuiting
  document.addEventListener("keydown", function (e) {
    e.key === "ArrowRight" && nextSlide();
    e.key === "ArrowLeft" && prevSlide();
  });

  dotContainer.addEventListener("click", function (e) {
    if (e.target.classList.contains("dots__dot")) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Glamorous Goshawk

0 Answers Avg Quality 2/10

slide js

Comment

var slide = new Array("foret-peuplier.jpg", "paysage-montagne.jpg", "chemin-automne.jpg", "prairie-alpes.jpg");
var numero = 0;

function ChangeSlide(sens) {
    numero = numero + sens;
    if (numero < 0)
        numero = slide.length - 1;
    if (numero > slide.length - 1)
        numero = 0;
    document.getElementById("slide").src = slide[numero];
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: lesdocs.fr

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Apr 03 2022

souhaila pro

0 Answers Avg Quality 2/10

javascript slider

Contents

More Related Answers