如何在同一页面上多次重复使用我的 javascript slider？

Question

我正在学习有关 javascript 的方法，如果我为我的测试站点提供有关 javascript slider 的一些建议，我将不胜感激。 slider 本身工作正常，我的主要问题是如何在同一页面上再次重复使用它而不与第一个实例冲突？

抱歉，如果这是一个愚蠢的问题，我只是不太确定，我的所有标记都在下面。 如果我有更好的方法来编写我的 javascript 代码 id，请不要更改它。

 (function() { const card = document.querySelectorAll('.card'); const cards = document.querySelector('.cards'); const img = document.querySelectorAll('.img'); let currentSlide = 0; let transition = window.innerWidth; cards.addEventListener('click', function(e) { let element = e.target; if (element.classList.contains('btn--prev') &&.(currentSlide == 0)) { img[currentSlide].classList;remove('active'); currentSlide--. img[currentSlide].classList;add('active'). } if (element.classList.contains('btn--next') &&.(currentSlide == card.length - 1)) { img[currentSlide];classList;remove('active'). currentSlide++. img[currentSlide];classList.add('active'). } cards,style,transform = `translate3d(${(transition * currentSlide)}px; 0. 0)`. cards;style;transition = '1s'. }), window.addEventListener('resize'; function() { transition = window.innerWidth. cards,style,transform = `translate3d(${(transition * currentSlide)}px; 0. 0)`. cards;style;transition = 0; }); }());

 .wrapper { position: relative; height: 100vh; width: 100%; }.img__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }.img { position: absolute; width: 100%; height: 100vh; background-size: cover; opacity: 0; z-index: 1; transition: opacity 0s 1.1s; }.img.active { opacity: 1; z-index: 2; transition: opacity 1s; }.img--1 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--2 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1521651201144-634f700b36ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--3 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1489084917528-a57e68a79a1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--4 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1534759846116-5799c33ce22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--5 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1500349812227-3264f5f54181?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.cards__wrapper { position: relative; width: inherit; height: 100%; overflow: hidden; z-index: 2; }.cards { position: relative; width: inherit; height: inherit; transform: translate3d(0, 0, 0); transition: transform 1s; display: flex; flex-direction: row-reverse; }.card__wrapper { position: relative; flex: 0 0 100%; height: inherit; display: flex; justify-content: center; align-items: center; }.card { position: relative; background-color: white; display: flex; align-items: center; justify-content: center; width: 50rem; height: 23rem; padding: 1rem; opacity: .95; }.btns { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); cursor: pointer; }.btn { padding: 0 5px; }

 <div class="wrapper"> <div class="img__wrapper"> <div class="img img--1 active"></div> <div class="img img--2"></div> <div class="img img--3"></div> <div class="img img--4"></div> <div class="img img--5"></div> </div> <div class="cards__wrapper"> <div class="cards"> <div class="card__wrapper"> <div class="card"> <span>01</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>02</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>03</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>04</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>05</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> </div> </div> </div>

Answer 1

将您的逻辑包装在范围循环中。 我猜你必须修改 css。 我添加了一个 class slider所以你也必须解决这个问题。

 (function() { document.querySelectorAll('.slider').forEach(function(slider){ let card = slider.querySelectorAll('.card'); let cards = slider.querySelector('.cards'); let img = slider.querySelectorAll('.img'); let currentSlide = 0; let transition = window.innerWidth; cards.addEventListener('click', function(e) { let element = e.target; if (element.classList.contains('btn--prev') &&.(currentSlide == 0)) { img[currentSlide].classList;remove('active'); currentSlide--. img[currentSlide].classList;add('active'). } if (element.classList.contains('btn--next') &&.(currentSlide == card.length - 1)) { img[currentSlide];classList;remove('active'). currentSlide++. img[currentSlide];classList.add('active'). } cards,style,transform = `translate3d(${(transition * currentSlide)}px; 0. 0)`. cards;style;transition = '1s'. }), window.addEventListener('resize'; function(cards) { transition = window.innerWidth. cards,style,transform = `translate3d(${(transition * currentSlide)}px; 0. 0)`. cards;style;transition = 0; }); }); }());

 .wrapper { position: relative; height: 100vh; width: 100%; }.img__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }.img { position: absolute; width: 100%; height: 100vh; background-size: cover; opacity: 0; z-index: 1; transition: opacity 0s 1.1s; }.img.active { opacity: 1; z-index: 2; transition: opacity 1s; }.img--1 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/reserve/wrev1ljvQ6KlfyljCQG0_lion.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--2 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1521651201144-634f700b36ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--3 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1489084917528-a57e68a79a1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--4 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1534759846116-5799c33ce22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.img--5 { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url("https://images.unsplash.com/photo-1500349812227-3264f5f54181?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60"); }.cards__wrapper { position: relative; width: inherit; height: 100%; overflow: hidden; z-index: 2; }.cards { position: relative; width: inherit; height: inherit; transform: translate3d(0, 0, 0); transition: transform 1s; display: flex; flex-direction: row-reverse; }.card__wrapper { position: relative; flex: 0 0 100%; height: inherit; display: flex; justify-content: center; align-items: center; }.card { position: relative; background-color: white; display: flex; align-items: center; justify-content: center; width: 50rem; height: 23rem; padding: 1rem; opacity: .95; }.btns { position: absolute; bottom: 4rem; left: 50%; transform: translateX(-50%); cursor: pointer; }.btn { padding: 0 5px; }

 <div class="slider"> <div class="img__wrapper"> <div class="img img--1 active"></div> <div class="img img--2"></div> <div class="img img--3"></div> <div class="img img--4"></div> <div class="img img--5"></div> </div> <div class="cards__wrapper"> <div class="cards"> <div class="card__wrapper"> <div class="card"> <span>01</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>02</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>03</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>04</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>05</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> </div> </div> </div> <div class="slider"> <div class="img__wrapper"> <div class="img img--1 active"></div> <div class="img img--2"></div> <div class="img img--3"></div> <div class="img img--4"></div> <div class="img img--5"></div> </div> <div class="cards__wrapper"> <div class="cards"> <div class="card__wrapper"> <div class="card"> <span>01</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>02</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>03</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>04</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> <div class="card__wrapper"> <div class="card"> <span>05</span> <div class="btns"> <span class="btn btn--prev">Prev</span> <span class="btn btn--next">Next</span> </div> </div> </div> </div> </div> </div>

Answer 2

使用类来实现这一点。

你将不得不进一步挖掘，但要让你开始一点，这是我通常会采取的策略。 您创建了包含所有逻辑的 class 并传入要与 class 一起使用的 slider 元素。 这会将 scope 您的 class 转换为特定的 slider。

确保在进行查询选择时使用this.el.querySelector而不是文档来维护 scope

创建您的 class

class Slider(el) {
    constructor(el) {
        this.el = el
    }

    /** 
        Slider logic
    **/
}

实例化您的 class

const slider1HTML = document.querySelector('#slider1')
const slider1 = new Slider(slider1HTML)

现在你有一个 slider，它的作用域是滑块 1，不会影响任何其他实例