Question

我在名为product.html的页面中使用swiper创建了一个滑块（此页面是一个带有分页see example的垂直滑块），并且在index.html（我列出所有产品的主页面）中当我点击链接product2时，它应该重定向到幻灯片2.我已尝试<a href="product.html#slide2"。它工作但它不加载整个滑块。我无法滑动，也没有显示分页如何使用swiper加载并显示分页导航到特定幻灯片？

swiper结构

<!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" id="slide1">Slide 1</div>
            <div class="swiper-slide" id="slide2">Slide 2</div>
            <div class="swiper-slide" id="slide3">Slide 3</div>
                        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>

Answer 1

试用此代码

传递index滑块

<div class="product-list">
     <a href="product.html#2">product3</a>
     <a href="product.html#5">product6</a>
     <a href="product.html#10">product10</a>
</div>

DEMO

传递id滑块

<div class="product-list">
     <a href="product.html#slide2">product2</a>
     <a href="product.html#slide5">product5</a>
     <a href="product.html#slide10">product10</a>
</div>

DEMO

如何点击其他页面的ID

1 个答案: