首页 > 解决方案 > 为什么 js 中的滑块不适用于所有元素?

问题描述

我正在尝试自己在香草js中创建滑块,但我得到了它的逻辑。我已经尝试过 if 和循环,但是 smth 出错了并且根本不起作用。我需要什么条件才能使此滑块适用于所有报价?先感谢您。

const quotesBtnNext = document.querySelector('#quo-btn-next'),
        quotesBtnPrev = document.querySelector('#quo-btn-prev'),
        quotesParent = document.querySelector('.quotes-wrapper'),
        quotes = document.querySelectorAll('.quotes-wrapper .quotes-wrapper__quote'),
        dots = document.querySelectorAll('.quotes__scroll');

let quoteIndex = 1;

quotesBtnNext.addEventListener('click', ()=>{
    quotes.forEach(nextQuote());
});
quotesBtnPrev.addEventListener('click', ()=>{
    quotes.forEach(prevQuote());
});

function nextQuote(){
        quotes[quoteIndex + 1].style.display = 'block';
        quotes[quoteIndex - 1].style.display = 'none';
}

function prevQuote() {
        quotes[quoteIndex + 1].style.display = 'none';
        quotes[quoteIndex - 1].style.display = 'block';
}
<div class="quotes-wrapper">
            <div class="quotes-wrapper__quote quotes-first">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quis nostrud nisi ut aliquip ex ea commodo consequat.</p>
                <p>Jhone Due, Photographer</p>
            </div>
            <div class="quotes-wrapper__quote">
                <p>haha text</p>
                <p>Abraham Due, Photographer</p>
            </div>
            <div class="quotes-wrapper__quote">
                <p>another text</p>
                <p>David Due, Photographer</p>
            </div>
            <div class="quotes-wrapper__quote">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris quis nostrud nisi ut aliquip ex ea commodo consequat.</p>
                <p>Lora Due, Photographer</p>
            </div>
        </div>

标签: javascript

解决方案


推荐阅读