18910140161

Html

首页 >> 前端开发 >> Html

JavaScript-如何使滑块发挥应有的功能？-堆栈溢出

顺晟科技

2022-10-19 12:09:16

232

在我滚动到最后一张幻灯片后，然后试图进一步滚动，希望它能让我回到第一张幻灯片，但它滚动得更远，那里什么也没有。我有2块在滑块，每个块有3张牌。如何使滑块在幻灯片结束后返回到1幻灯片，并在相反的方向，要么盲目或愚蠢，但我看不到任何东西，请帮助，我将感激

<div class="slider">
                    <button class="slider-prev"><img src="icons/halls/prev.svg" alt="prev"></button>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <button class="slider-next"><img src="icons/halls/next.svg" alt="next"></button>
                </div>

'use strict';

Window.AddeventListener('domContentLoad',()=>{

<div class="slider">
                    <button class="slider-prev"><img src="icons/halls/prev.svg" alt="prev"></button>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <button class="slider-next"><img src="icons/halls/next.svg" alt="next"></button>
                </div>

'use strict';

}）；在此处输入图像说明

顺晟科技：

似乎有错误。

<div class="slider">
                    <button class="slider-prev"><img src="icons/halls/prev.svg" alt="prev"></button>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <button class="slider-next"><img src="icons/halls/next.svg" alt="next"></button>
                </div>

'use strict';

计数器从0开始，但从1返回值。尝试从1开始计数或将if条件更改为and

  • TAG：
上一篇：HTML-用不同尺寸拟合图像-堆栈溢 下一篇：html-如何删除css网格中的边距
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！