开发者问题收集

使用 javascript 在单页网站中实现多个滑块

2021-06-20
3261
javascript html jquery css

我的网站中有多个滑块。此代码无法在我的页面中工作，因为一页中有 3 个滑块。 但在一个页面中的一个滑块中工作。请帮我做一下吗？ 我需要这些滑块在我的网站的一个页面上工作。这些滑块必须在一个页面中的手风琴悬停中工作。 问题是，当我把所有的幻灯片都放进去时，它们都聚集在一个手风琴中。 一般来说，主要问题是，一页上的三个滑块无法使用此代码工作 

const slider = function () {
    // const this_slider = this;
    const slides = document.querySelectorAll('.slide');
    const btnLeft = document.querySelector('.slider__btn--left');
    const btnRight = document.querySelector('.slider__btn--right');
    const dotContainer = document.querySelector('.dots');
  
    let curSlide = 0;
    const maxSlide = slides.length;
  
    // Functions
    const createDots = function () {
            slides.forEach(function (_, i) {
            dotContainer.insertAdjacentHTML(
            'beforeend',
            `<button class="dots__dot" data-slide="${i}"></button>`
            );
        });
    };
  
    const activateDot = function (slide) {
        document
            .querySelectorAll('.dots__dot')
            .forEach(dot => dot.classList.remove('dots__dot--active'));
    
        document
            .querySelector(`.dots__dot[data-slide="${slide}"]`)
            .classList.add('dots__dot--active');
    };
  
    const goToSlide = function (slide) {
        slides.forEach(
            (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
        );
    };
  
    // Next slide
    const nextSlide = function () {
        if (curSlide === maxSlide - 1) {
            curSlide = 0;
        } else {
            curSlide++;
        }
    
        goToSlide(curSlide);
        activateDot(curSlide);
    };
  
    const prevSlide = function () {
        if (curSlide === 0) {
            curSlide = maxSlide - 1;
        } else {
            curSlide--;
        }
        goToSlide(curSlide);
        activateDot(curSlide);
    };
  
    const init = function () {
        goToSlide(0);
        createDots();
    
        activateDot(0);
    };
    init();
  
    // Event handlers
    btnRight.addEventListener('click', nextSlide);
    btnLeft.addEventListener('click', prevSlide);
  
    document.addEventListener('keydown', function (e) {
        if (e.key === 'ArrowLeft') prevSlide();
        e.key === 'ArrowRight' && nextSlide();
    });
  
    dotContainer.addEventListener('click', function (e) {
        if (e.target.classList.contains('dots__dot')) {
            const { slide } = e.target.dataset;
            goToSlide(slide);
            activateDot(slide);
        }
    });
};
slider();
/* SLIDER */
.slider {
  max-width: 100rem;
  height: 50rem;
  margin: 0 auto;
  position: relative;

  /* IN THE END */
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  width: 100%;
  height: 50rem;

  display: flex;
  align-items: center;
  justify-content: center;

  /* THIS creates the animation! */
  transition: transform 1s;
}

.slide > img {
  /* Only for images that have different size than slide */
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider__btn {
  position: absolute;
  top: 50%;
  z-index: 10;

  border: none;
  background-color: inherit;
  /* background: rgba(255, 255, 255, 0.7); */
  font-family: inherit;
  color: white;
  border-radius: 50%;
  height: 5.5rem;
  width: 5.5rem;
  font-size: 3.25rem;
  cursor: pointer;
}

.slider__btn--left {
  left: 6%;
  transform: translate(-50%, -50%);
}

.slider__btn--right {
  right: 6%;
  transform: translate(50%, -50%);
}

.dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.dots__dot {
  border: none;
  background-color: #b9b9b9;
  opacity: 0.7;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
  margin-right: 1.75rem;
  cursor: pointer;
  transition: all 0.5s;

  /* Only necessary when overlying images */
  /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
}

.dots__dot:last-child {
  margin: 0;
}

.dots__dot--active {
  /* background-color: #fff; */
  background-color: blue;
  opacity: 1;
}

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

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a grey background color */
.prev:hover,
.next:hover {
  background-color: #f1f1f1;
  color: black;
}
<div class="slider">
                        <div class="slide">
                            <img src="img/img-1.jpg" alt="">
                        </div>
                
                        <div class="slide">
                            <img src="img/img-2.jpg" alt="">
                        </div>
                
                        <div class="slide">
                            <img src="img/img-3.jpg" alt="">
                        </div>
                
                        <div class="slide">
                            <img src="img/img-4.jpg" alt="">
                        </div>
                
                        <button class="slider__btn slider__btn--left">&#10094;</button>
                        <button class="slider__btn slider__btn--right">&#10095;</button>
                        <div class="dots"></div>
                    </div>
1个回答

我已修改了您的 html、css 和脚本以供演示。 html - 添加了两个滑块并将它们分开。 css - 添加了按钮颜色以提高可见性 javascript - 您可以看到它。 

// We have to declare the function for all the sliders 

// get all slider from document.
const slideContainer = document.querySelectorAll('.slider');

// lets put your function to every one of them
for(let i = 0; i < slideContainer.length; i++){

    const slider = function () {
        // const this_slider = this;
        const slides = slideContainer[i].querySelectorAll('.slide');  // Your code was : const slides = document.querySelectorAll('.slide');  don't search the entire document, only search the slider
        const btnLeft = slideContainer[i].querySelector('.slider__btn--left');
        const btnRight = slideContainer[i].querySelector('.slider__btn--right');
        const dotContainer = slideContainer[i].querySelector('.dots');
      
        let curSlide = 0;
        const maxSlide = slides.length;
      
        // Functions
        const createDots = function () {
                slides.forEach(function (_, i) {
                dotContainer.insertAdjacentHTML(
                'beforeend',
                `<button class="dots__dot" data-slide="${i}"></button>`
                );
            });
        };
      
        const activateDot = function (slide) {
            slideContainer[i]
                .querySelectorAll('.dots__dot')
                .forEach(dot => dot.classList.remove('dots__dot--active'));
        
            slideContainer[i]
                .querySelector(`.dots__dot[data-slide="${slide}"]`)
                .classList.add('dots__dot--active');
        };
      
        const goToSlide = function (slide) {
            slides.forEach(
                (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
            );
        };
      
        // Next slide
        const nextSlide = function () {
            if (curSlide === maxSlide - 1) {
                curSlide = 0;
            } else {
                curSlide++;
            }
        
            goToSlide(curSlide);
            activateDot(curSlide);
        };
      
        const prevSlide = function () {
            if (curSlide === 0) {
                curSlide = maxSlide - 1;
            } else {
                curSlide--;
            }
            goToSlide(curSlide);
            activateDot(curSlide);
        };
      
        const init = function () {
            goToSlide(0);
            createDots();
        
            activateDot(0);
        };
        init();
      
        // Event handlers
        btnRight.addEventListener('click', nextSlide);
        btnLeft.addEventListener('click', prevSlide);
      
        document.addEventListener('keydown', function (e) {
            if (e.key === 'ArrowLeft') prevSlide();
            e.key === 'ArrowRight' && nextSlide();
        });
      
        dotContainer.addEventListener('click', function (e) {
            if (e.target.classList.contains('dots__dot')) {
                const { slide } = e.target.dataset;
                goToSlide(slide);
                activateDot(slide);
            }
        });
    };
    slider();
}
/* SLIDER */
.slider {
    max-width: 100rem;
    height: 50rem;
    margin: 0 auto;
    position: relative;
  
    /* IN THE END */
    overflow: hidden;
  }
  
  .slide {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50rem;
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    /* THIS creates the animation! */
    transition: transform 1s;
  }
  
  .slide > img {
    /* Only for images that have different size than slide */
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .slider__btn {
    position: absolute;
    top: 50%;
    z-index: 10;
  
    border: none;
    background-color: black;                // your was "inherit" . changed this for my visibility. 
    /* background: rgba(255, 255, 255, 0.7); */
    font-family: inherit;
    color: white;
    border-radius: 50%;
    height: 5.5rem;
    width: 5.5rem;
    font-size: 3.25rem;
    cursor: pointer;
  }
  
  .slider__btn--left {
    left: 6%;
    transform: translate(-50%, -50%);
  }
  
  .slider__btn--right {
    right: 6%;
    transform: translate(50%, -50%);
  }
  
  .dots {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
  }
  
  .dots__dot {
    border: none;
    background-color: #b9b9b9;
    opacity: 0.7;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    margin-right: 1.75rem;
    cursor: pointer;
    transition: all 0.5s;
  
    /* Only necessary when overlying images */
    /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
  }
  
  .dots__dot:last-child {
    margin: 0;
  }
  
  .dots__dot--active {
    /* background-color: #fff; */
    background-color: blue;
    opacity: 1;
  }
  
  .slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
  }
  
  /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
  }
  
  /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
  
  /* On hover, add a grey background color */
  .prev:hover,
  .next:hover {
    background-color: #f1f1f1;
    color: black;
  }
<div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="">
        </div>

        <button class="slider__btn slider__btn--left">&#10094;</button>
        <button class="slider__btn slider__btn--right">&#10095;</button>
        <div class="dots"></div>
    </div>

    <hr> <!-- This to separate the slider (optional)-->

    <div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="">
        </div>

        <button class="slider__btn slider__btn--left">&#10094;</button>
        <button class="slider__btn slider__btn--right">&#10095;</button>
        <div class="dots"></div>
    </div>

    <hr> <!-- This to separate the slider (optional)-->

    <div class="slider">
        <div class="slide">
            <img src="img/img-1.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-2.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-3.jpg" alt="">
        </div>

        <div class="slide">
            <img src="img/img-4.jpg" alt="">
        </div>

        <button class="slider__btn slider__btn--left">&#10094;</button>
        <button class="slider__btn slider__btn--right">&#10095;</button>
        <div class="dots"></div>
    </div>
PRAFULL PATEL
2021-06-20