bxslider和url之间的真实连接

Question

是否可以像以下示例一样在bxslider和网址之间建立真实连接？

www.domain.com/#slide-01
www.domain.com/#slide-02
www.domain.com/#slide-03

网址应该更新如果用户更改了幻灯片，那么url + #Anchor驱动bxslider也会很不错。如果用户键入www.domain.com/#slide-02，则应显示第二张幻灯片。

<div class="bxslider-images">
      <div id="slide-01"><img src="image_01.jpg" border="0"></div>
      <div id="slide-02"><img src="image_02.jpg" border="0"></div>
      <div id="slide-03"><img src="image_03.jpg" border="0"></div>
</div>

编辑：在 baao 的帮助下，滑块现在由id's of the slides驱动，但遗憾的是它不同步，即使URL是现在纠正，它跳过第二张幻灯片。

$(document).ready(function(){

    var sliderImages = $('.bxslider-images').bxSlider({

        pager:false,
        startSlide: 0,
        infiniteLoop: false,
        onSlideNext: doThis,
        onSlidePrev: doThis,

    });

    function doThis(element, old, newslide){
        var urlWithoutAnchor = document.URL.replace(/#.*$/, "");
        var newUrl = urlWithoutAnchor + '#' + element.attr('id');
        console.log(newUrl);
        window.location = newUrl;
        sliderImages.goToSlide(newslide);

    }

});

任何帮助都将不胜感激。

Answer 1

您可以使用以下代码执行此操作：

var url = window.location.href;
if (url == 'http://www.domain.com/') // or whatever it is
{
window.location.href = url + '#slide-01'; // etc...
}

在幻灯片功能中

！

修改

我不使用bxslider，所以我不能100％确定这是否有用，但它可能符合您的需求：

$(document).ready(function(){


var url = window.location.href;

var slide = url.split('#');
    if (slide[1]) {


var slidenumber = slide[1].replace(/([a-z,0,/-])/g, '');
    }

if (!slidenumber) { slidenumber = 0;}


var sliderContent = $('.bxslider').bxSlider({
     pager:false,
     startSlide: slidenumber,
     var urlWithoutAnchor = document.URL.replace(/#.*$/, "");
     //location.hash.replace('#','')
     window.location.href = urlWithoutAnchor + '#' + newslide;
});

});