Question

我对编码很新（对HTML和CSS相当熟悉）但有些事情仍然在我的脑海中。

我正在使用来自codyhouse的这个很棒的模板：https://codyhouse.co/gem/pointy-slider/

我使用滑块链接到其他外部页面 - 我遇到的问题是当我向用户发送模板时，总是链接回第一张幻灯片。

我尝试使用#id a链接返回到模板的某个点，但JS中的.hidden .visible属性让我很困惑。

只需要一个简单的解决方案即可链接回某张幻灯片。

如果有人能帮助我，那将是非常棒的，谢谢！

Answer 1

这段代码用于分页（底部的数字）：

sliderPagination.on('click', function(event){
    event.preventDefault();
    var selected = $(this),
    index = selected.index();
    updateSlider(index, sliderPagination, slides);
});

这意味着您可以使用您需要的参数调用updateSlider来使用此代码。

我建议更改源以将index, sliderPagination, slides存储在Cookie中并再次导航到该页面，先检查会话中是否没有Cookie

Answer 2

您可以将carousel索引（即 0,1，...，N - 1）存储在sessionStorage变量中（例如 carouselIndex）当你点击它时。

然后，当您在页面中返回时，检索carouselIndex并为其分配active类。

<强> HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <!-- etc. -->
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active" data-index="0">
            <img src="img1.jpg" alt="First slide">
            <div class="carousel-caption">First slide</div>
        </div>
        <div class="item">
            <img src="img2.jpg" alt="Second slide">
            <div class="carousel-caption">Second slide</div>
        </div>
        <!-- etc. -->
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

JS（使用jQuery）：

$(function() {
    var carouselIndex = sessionStorage.getItem("carouselIndex");
    if (!!carouselIndex) {
        $("#myCarousel").carousel(carouselIndex);
    }
    $("#myCarousel .item").click(function() {
        sessionStorage.setItem("carouselIndex", $(this).attr("data-id"));
    });
});

链接回Javascript控制页面的某个点

2 个答案: