Onclick event not happening when slick slider is active and not adapting responsively

June 24, 2021 by Code Error

Posted By: Anonymous

I have a tabbed style module in which the "triggers" turn into a slick slider depending on width.

If width is less than 576px, slick is active showing 2 slides initially.
If width is more than 576px and less than 768px, slick is active showing 3 slides initially.
If width is more than 768px and less than 1024px, slick is active showing 4 slides initially.
If width is more than 1400px, slick is not active.

When you click on a "trigger" (.caseStudyTrigger), content changes based on trigger choice, which currently kind of works.

Issues:

The issue is that, whenever slick is active, the onclick event on .caseStudyTrigger doesn’t work. I have tried console.log("test"); within the click function and even that doesn’t appear.

Additionally, I have a resize function so that slick can adapt to 2,3 4 slides based on the device width. However, when resizing, I always have to refresh the page on that width for slick to show the correct number of slides?

Demo:

_x000D_

$(function() {


  $(".caseStudies .caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudies .caseStudyCard:first-child").addClass("activeCard");

  $('.caseStudies .caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudies .caseStudyTrigger").removeClass("activeTrigger");
    $(this).addClass("activeTrigger");

    $(".caseStudies .caseStudyCard").removeClass("activeCard");
    $(".caseStudies .caseStudyCard[data-item='" + id + "']").addClass("activeCard");
  });


  function caseStudies__slick() {
    $("#caseStudies__slick").slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: false,
      mobileFirst: true,
      infinite: true,
      centerMode: true,
      focusOnSelect: true,
      responsive: [{
          breakpoint: 576,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          }
        },
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 1400,
          settings: 'unslick'
        }
      ]
    });
  }

  var $window_width = $(window).width();

  if ($window_width < 1400) {
    caseStudies__slick();
  }

  $(window).resize(function() {
    if ($window_width < 1400) {
      $("#caseStudies__slick").slick("resize");
    }
  });


});

_x000D_

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

_x000D_

Solution

First: I couldn’t reproduce your click handler issue – it works also in your stack snippet. Therefor i presume that it’s something that you didn’t post in your question, or you have other classes in your original code etc..

I found two issues:

You declare at page load a variable $window_width, which will never change. Even on resize it will remain like declared. Therefor you have to get $(window).width() again when the resize handler is called:

if ($(window).width() < 1400) {

In your click handler you apply the class .activeTrigger only to the clicked element. But slick clones elements, for example for the infinite scroll, and sometimes centeres the clone and not the click-target. Therefor you should apply the class to all elements with the id-value like you do with the content cards:

$(".caseStudies .caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

Working example:

_x000D_

$(function() {


  $(".caseStudies .caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudies .caseStudyCard:first-child").addClass("activeCard");

  $('.caseStudies .caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudies .caseStudyTrigger").removeClass("activeTrigger");
    $(".caseStudies .caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

    $(".caseStudies .caseStudyCard").removeClass("activeCard");
    $(".caseStudies .caseStudyCard[data-item='" + id + "']").addClass("activeCard");
  });


  function caseStudies__slick() {
    $("#caseStudies__slick").not('.slick-initialized').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      dots: false,
      mobileFirst: true,
      infinite: true,
      centerMode: true,
      focusOnSelect: true,
      responsive: [{
          breakpoint: 576,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
          }
        },
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 2,
          }
        },
        {
          breakpoint: 1400,
          settings: 'unslick'
        }
      ]
    });
  }

  var $window_width = $(window).width();

  if ($window_width < 1400) {
    caseStudies__slick();
  }

  $(window).resize(function() {
    if ($(window).width() < 1400) {
      $("#caseStudies__slick").slick("resize");
    }
  });


});

_x000D_

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

_x000D_

Optimization:

Since you handle the case for window width greater than 1400px in your slick settings (responsive:) there is no need for the if statement if ($(window).width() < 1400). Therefor you can omit it on resize and at initial call of the function caseStudies__slick():

$(window).resize(function() {
  $("#caseStudies__slick").slick('resize');
});

caseStudies__slick();

Since you call the function caseStudies__slick() only once at page load there is no need for that function and the slick slider can be declared directly, which makes the initial function call unnecessary.
Since there are only .caseStudyTrigger– and .caseStudyCard-elements in the container .caseStudies there is no need to add the container class to the selector. It improves the readbility to omit this class. For example:

$(".caseStudyTrigger").removeClass("activeTrigger");

Also for readability i would put the event listeners at the end of the script.

Working example:

_x000D_

$(function(){

  
  $(".caseStudyTrigger:first-child").addClass("activeTrigger");
  $(".caseStudyCard:first-child").addClass("activeCard");

  $("#caseStudies__slick").not('.slick-initialized').slick({
  
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    mobileFirst: true,
    infinite: true,
    centerMode: true,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 576,
        settings : {
          slidesToShow: 2,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 768,
        settings : {
          slidesToShow: 3,
          slidesToScroll: 3,
        }
      },
      {
        breakpoint: 1024,
        settings : {
          slidesToShow: 4,
          slidesToScroll: 2,
        }
      },
      {
        breakpoint: 1400,
        settings: 'unslick'
      }
    ]
    
  });

  $('.caseStudyTrigger').click(function() {
    var id = $(this).attr('data-trigger');

    $(".caseStudyTrigger").removeClass("activeTrigger");
    $(".caseStudyTrigger[data-trigger='" + id + "']").addClass("activeTrigger");

    $(".caseStudyCard").removeClass("activeCard");
    $(".caseStudyCard[data-item='"+id+"']").addClass("activeCard");
  });

  $(window).resize(function() {
    $("#caseStudies__slick").slick('resize');
  });


});

_x000D_

.caseStudies .slick-list {
  padding: 0px 20% !important;
}

@media (min-width: 576px) {
  .caseStudies .slick-list {
    paddding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
}

.caseStudies__triggers .caseStudyTrigger {
  max-width: 305px;
  text-align: center;
  cursor: pointer;
  padding: 68px 25px 80px 25px;
}

@media (min-width: 992px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 100px 25px 80px 25px;
  }
}

@media (min-width: 1200px) {
  .caseStudies__triggers .caseStudyTrigger {
    padding: 125px 75px;
  }
}

.caseStudies__triggers .caseStudyTrigger.activeTrigger {
  background-color: yellow;
}

@media (min-width: 1200px) {
  .caseStudies__body {
    padding-bottom: 125px;
  }
}

.caseStudies .caseStudyCard {
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: none;
}

@media (min-width: 1200px) {
  .caseStudies .caseStudyCard {
    flex-direction: row;
  }
}

.caseStudies .caseStudyCard.activeCard {
  display: flex;
  animation: fadeIn 0.5s;
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" />

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" />

<div class="caseStudies">

  <!-- TRIGGERS -->
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__triggers" id="caseStudies__slick">

          <div class="caseStudyTrigger" data-trigger="1">
            Trigger 1
          </div>

          <div class="caseStudyTrigger" data-trigger="2">
            Trigger 2
          </div>

          <div class="caseStudyTrigger" data-trigger="3">
            Trigger 3
          </div>

          <div class="caseStudyTrigger" data-trigger="4">
            Trigger 4
          </div>

          <div class="caseStudyTrigger" data-trigger="5">
            Trigger 5
          </div>

          <div class="caseStudyTrigger" data-trigger="6">
            Trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


  <!-- CONTENT BASED ON TRIGGER SELECTED -->
  <div class="container">
    <div class="row">
      <div class="col-12 px-0 px-md-auto">
        <div class="caseStudies__body">

          <div class="caseStudyCard" data-item="1">
            Content for trigger 1
          </div>

          <div class="caseStudyCard" data-item="2">
            Content for trigger 2
          </div>

          <div class="caseStudyCard" data-item="3">
            Content for trigger 3
          </div>

          <div class="caseStudyCard" data-item="4">
            Content for trigger 4
          </div>

          <div class="caseStudyCard" data-item="5">
            Content for trigger 5
          </div>

          <div class="caseStudyCard" data-item="6">
            Content for trigger 6
          </div>

        </div>
      </div>
    </div>
  </div>


</div>

_x000D_

Answered By: Anonymous

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Onclick event not happening when slick slider is active and not adapting responsively

Posted By: Anonymous

Solution

I found two issues:

Optimization:

Answered By: Anonymous

Related Articles

Leave a Reply Cancel reply