I am trying to use Slick Slider Js to display a Product Slider, I would like that when clicking on the images they redirect me to a specific URL.
I've seen this related question but I still don't understand why the href doesn't identify me. JQuery identify href in div .
html,
body {
margin: 0;
padding: 0;
}
h2,
p {
margin: 30px 0 0;
padding: 0;
}
.slider {
max-width: 8000px;
width: 115%;
margin: 15px auto;
background: transparent;
border-radius: 5px;
padding: 20px 0;
box-shadow: none;
/* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); */
/*h v b s*/
}
.slick-slider button {
display: none !important;
}
.slick-slide {
color: #333;
padding: 40px 0;
font-size: 1.25em;
font-family: "Verdana";
text-align: center;
pointer-events: none;
}
.slick-slide .desc {
opacity: 0;
margin: -20px 0px 0px 0px;
}
.slick-slide .desc>* {
transition: all 900ms ease;
}
.slick-slide .desc h2 {
position: relative;
left: 50px;
line-height: 1;
font-size:25px;
}
.slick-slide .desc p {
position: relative;
top: 50px;
opacity: 0;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots {
text-align: center;
}
.slick-dots li {
display: inline-block;
padding: 1px;
background: #ccc;
margin: 10px 5px;
width: 40px;
height: 5px;
}
.slick-dots li.slick-active {
background: var(--yellow-color);
}
.slick-dots button {
display: none;
}
.slick-slide:nth-child(odd) {
/* background: blue;*/
}
.slick-slide {
opacity: 0.2;
transition: all 300ms ease;
}
.slick-current {
opacity: 1;
transform: scale(1.1);
}
.slick-current .desc {
opacity: 1;
}
.slick-current .desc h2 {
left: 0;
}
.slick-current .desc p {
top: 0;
opacity: 1;
}
.mybtn {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid #18c495;
text-decoration: none;
color: #18c495;
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 100px;
width: 100%;
font-weight: bold;
pointer-events: initial;
}
.mybtn-preview01 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--blue-color);
text-decoration: none;
color: var(--blue-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview02 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--sweet-potato-bg);
text-decoration: none;
color: var(--sweet-potato-bg);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview03 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--red-color);
text-decoration: none;
color: var(--red-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
.mybtn-preview04 {
border-radius: 30px;
padding: 10px 20px;
border: 4px solid var(--purple-sweetBTN-color);
text-decoration: none;
color: var(--purple-sweetBTN-color);
font-size: .6em;
text-transform: uppercase;
display: block;
margin: 5px auto 0;
max-width: 150px;
width: 100%;
font-weight: bold;
pointer-events: initial;
font-family: 'KGBSpace';
}
@media(max-width:1366px) {
.slider {
width: 100%;
}
}
@media(max-width:720px){
.slick-slide .desc h2{
font-size:21px;
}
}
@media(max-width:720px){
.mybtn-preview04{
font-size: .5em;
}
.mybtn-preview03{
font-size: .5em;
}
.mybtn-preview02{
font-size: .5em;
}
.mybtn-preview01{
font-size: .5em;
}
.mybtn{
font-size: .5em;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<section class="slider">
<div id="product1">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--blue-color)">Product1</h2>
<a href="#" class="mybtn-preview01">View Product</a>
</div>
</div>
<div id="product2">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--sweet-potato-bg)">Product2</h2>
<a href="#" class="mybtn-preview02">View Product</a>
</div>
</div>
<div id="product3">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--red-color)">Product3</h2>
<a href="#" class="mybtn-preview03">View Product</a>
</div>
</div>
<div id="product4">
<a href="products/newURL.html">
<img src="https://s1.1zoom.me/b5355/304/Scenery_Sunrises_and_sunsets_Fields_Sky_Sun_519151_600x800.jpg">
</a>
<div class="desc">
<h2 style="color:var(--red-color)">Product4</h2>
<a href="#" class="mybtn-preview03">View Product</a>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#product1 a").click(function(event) {
var link = $(this).attr("href");
$("#product1").load(link);
event.preventDefault();
});
$("#product2 a").click(function() {
var link = $(this).attr("href");
$("#product2").load(link);
return false;
});
});
</script>
<script>
function createSlick() {
$(".slider").not('.slick-initialized').slick({
centerMode: true,
autoplay: true,
dots: false,
pauseOnHover: false,
pauseOnFocus: false,
slidesToShow: 3,
responsive: [{
breakpoint: 768,
settings: {
dots: false,
arrows: false,
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
createSlick();
$(window).on('resize', createSlick);
</script>
I've tried this answer with JQuery but pressing the image doesn't do anything for me.
<script type="text/javascript">
$(document).ready(function() {
$("#product1 a").click(function(event) {
var link = $(this).attr("href");
$("#product1").load(link);
event.preventDefault();
});
$("#product2 a").click(function() {
var link = $(this).attr("href");
$("#product2").load(link);
return false;
});
});
</script>
I would really appreciate any feedback to help me identify the problem.
You can add an event
click
to each slide of the slider, and within the event you can access the slide's attributes.Try with:
$('.slider').click(function (e) { console.log($('.slider .slick-active').attr("id"))});