Answer the question
In order to leave comments, you need to log in
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>
$('.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 the question
In order to leave comments, you need to log in
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];
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 questionAsk a Question
731 491 924 answers to any question