@StasIva

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

Есть слайдер (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
		      }
		    }
		  ]
		});


Как победить? Спасибо.
  • Вопрос задан
  • 1089 просмотров
Решения вопроса 2
z80b
@z80b
Frontend
У 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];
Ответ написан
@StasIva Автор вопроса
Помимо отличного решения предложенного юзером z80b, в моем конкретном случае надо было всего лишь скопировать к себе скрипты, в которых разработчик реализовал поддержку deep linking, так как в стандартной версии ее не было. Вот ссылка на этот форк слик слайдера в гитхабе: https://github.com/astericky/slick
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы