javascript slider

Comment

2

Tip Fancy Fly 1 GREPCC

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

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

xxxxxxxxxx

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

Share

Link to this answer
Share Copy Link

Contributed on Feb 04 2022

Fancy Fly

0 Answers Avg Quality 2/10

js image slider

Comment

0

Tip YOU.com 1 GREPCC

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

xxxxxxxxxx

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

Share

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

slider library js

Comment

0

Tip YOU.com 1 GREPCC

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

xxxxxxxxxx

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

Share

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Slider JS

Comment

2

Tip Glamorous Goshawk 1 GREPCC

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();

xxxxxxxxxx

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

Share

Link to this answer
Share Copy Link

Contributed on Aug 17 2022

Glamorous Goshawk

0 Answers Avg Quality 2/10

slide js

Comment

0

Tip Souhaila pro 1 GREPCC

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];
}

xxxxxxxxxx

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

Share

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