bxslider 和 url 之间的真正连接

Real connection between bxslider and the url

本文关键字：连接 之间 url bxslider      更新时间：2023-09-26

是否有可能在 bxslider 和 url 之间建立真正的连接，如以下示例所示？

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

如果用户更改幻灯片，url 应该更新，并且通过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);
    }
});

任何帮助将不胜感激。

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

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;
});
});
相关文章：