S
S
Stas Iva2016-09-04 00:15:44
JavaScript
Stas Iva, 2016-09-04 00:15:44

Different external urls for slides in slick slider?

There is a slider (slick slider: kenwheeler.github.io/slick/)
Pictures as a background or slideshow are not used in it - mostly text. Something like this: wpfreeware.com/themes/html/singlepro/#team
( the template itself is not for WordPress - the link is just an example) slide in the slider (as is the default), but with, for example, the fifth slide specified in
the url (mysite.com?slide=5) mysite.com/5.
Here ( https://github.com/kenwheeler/slick/issues/152 - main discussion) and here ( jsfiddle.net/x6uo6c32/18- solution) it seems like there is a solution, but I have already broken my whole head and still nothing works.
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) - didn't change anything in the minified 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
          }
        }
      ]
    });

How to win? Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander, 2016-09-04
@StasIva

Slick has an initialSlide property to specify the initial slide.
A from url can be taken like this (for the mysite.com/5 option):

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

Or so, for the first option (mysite.com?slide=5):
var slideNum = 0;
var tmp = document.location.search.match(/slide=(\d+)/);
if (tmp && tmp[1]) slideNum = tmp[1];

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question