Estoy intentado utilizar Slick Slider Js para mostrar un Slider de Productos, quisiera que al darle click a las imagenes estas me redireccione a un URL especifico.
He visto esta pregunta relacionada pero sigo sin entender porque no me identifica el href. JQuery identificar href en 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>
He probado esta respuesta con JQuery pero al presionar la imagen no me hace ningún efecto.
<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>
De verdad agradeceria cualquier comentario que me ayude a identificar el problema.