1

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.

1 respuesta 1

1

Podes agregar un evento click a cada slide del slider, y dentro del evento podes acceder a los atributos del slide.

Proba con:

$('.slider').click(function (e) { console.log($('.slider .slick-active').attr("id"))});

1
  • Gracias @Will Paiz, para complementar, la clase que define el Slider Activo es en realidad .slick-current entonces el .slick-active es el id actual menos 1; sin embargo la lógica es la misma y me funciona. Gracias.
    – Ragnar
    el 5 nov. 2021 a las 15:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.