Разные внешние url для слайдов в slick slider?

Question

[Stas Iva]

Есть слайдер (slick slider: kenwheeler.github.io/slick/)
Картинки как фон или слайдшоу в нем не используются - в основном текст. Примерно как вот тут: wpfreeware.com/themes/html/singlepro/#team (сам шаблон не для вордпресс - ссылка просто пример)

Хочу чтобы при наборе в адресной строке адреса вида mysite.com?slide=slideID, сайт открывался не с первым слайдом в слайдере (как это принято по умолчанию), а с, например, пятым слайдом, указанным в урл (mysite.com?slide=5)
В идеале хорошо было бы чтобы урл имел вид не mysite.com?slide=5, а mysite.com/5.

Вот тут (https://github.com/kenwheeler/slick/issues/152 - основное обсуждение) и вот тут (jsfiddle.net/x6uo6c32/18 - решение) вроде как есть решение, но я себе уже всю голову сломал и все равно ничего не работает.

HTML

<section id="team">      
  <div class="col-lg-12 col-md-12">            
    <div class="team_area">              
      <div class="team_slider">  
<!-- SLIDE#1 -->              
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">
            <h5 class="">Jamie Sidens</h5>
            <span>Founder</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
         </div>
<!-- SLIDE#2 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">
            <h5>Jamie Sidens</h5>
            <span>CMS Developer</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
        </div>
<!-- SLIDE#3 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">                    
            <h5>Jamie Sidens</h5>
            <span>Manager</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
         </div>
<!-- SLIDE#4 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">    
            <h5>Jamie Sidens</h5>
              <span>Developer</span>                        
              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
            </div>
          </div>
<!--  SLIDE#5 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">                    
            <h5>Jamie Sidens</h5>
            <span>Programmer</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
        </div>
<!-- SLIDE#6 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">                    
            <h5>Jamie Sidens</h5>
            <span>Web Designer</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
        </div>
<!-- SLIDE#7 -->
        <div class="col-lg-3 col-md-3 col-sm-4">
          <div class="single_team wow fadeInUp">                    
            <h5>Jone Doe</h5>
            <span>Marketing Head</span>                        
            <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature</p>
          </div>
        </div>                              
      </div>
    </div>
  </div>
</section>

JavaScript (custom.js) - в минифицированном slick.min.js ничего не менял.

$('.team_slider').slick({
		  dots: false,
		  infinite: true,
		  speed: 300,
		  slidesToShow: 1,
		  slidesToScroll: 1,
		  responsive: [
		    {
		      breakpoint: 1024,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1,
		        infinite: true,
		        dots: true
		      }
		    },
		    {
		      breakpoint: 600,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    },
		    {
		      breakpoint: 480,
		      settings: {
		        slidesToShow: 1,
		        slidesToScroll: 1
		      }
		    }
		  ]
		});

Как победить? Спасибо.

Answer 1

[Александр]

У slick-а есть свойство initialSlide, для указания начального слайда.
A из url его можно взять например так (для варианта mysite.com/5):

var slideNum = 0;
var tmp = document.location.pathname.match(/^\/(\d+)/);
if (tmp && tmp[1]) slideNum = tmp[1];

Или так, для первого варианта (mysite.com?slide=5):

var slideNum = 0;
var tmp = document.location.search.match(/slide=(\d+)/);
if (tmp && tmp[1]) slideNum = tmp[1];

Comments

[Александр]

Stas Iva: в параметрах при инициализации.

[Stas Iva]

а где initialSlide указывать?
в диве элемента, являющегося контейнера слайда?

[Александр]

Stas Iva: т.е. здесь:
$('.team_slider').slick({
dots: false,
infinite: true,
speed: 300,
initialSlide: 5,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

[Stas Iva]

z80b: а если я хочу чтобы открывался не 5й, а 8й слайд? Произвольный то есть, а не именно пятый раз и навсегда, как я понял вы предлагаете?

[Александр]

Stas Iva:
var slideNum = 0;
var tmp = document.location.pathname.match(/^\/(\d+)/);
if (tmp && tmp[1]) slideNum = tmp[1];

$('.team_slider').slick({
dots: false,
infinite: true,
speed: 300,
initialSlide: slideNum,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});

[Stas Iva]

z80b: ого! спасибо огромное!

Answer 2

[Stas Iva]

Помимо отличного решения предложенного юзером z80b, в моем конкретном случае надо было всего лишь скопировать к себе скрипты, в которых разработчик реализовал поддержку deep linking, так как в стандартной версии ее не было. Вот ссылка на этот форк слик слайдера в гитхабе: https://github.com/astericky/slick

Comments

[420873535]

странно, у меня с таким вариантом:

var tmp = document.location.pathname.match(/^\/(\d+)/);

не заработало (
С гитхаба из форка только slick.min.js ведь нужен?