Onclick event not happening when slick slider is active and not adapting responsively
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 than768px
,slick
is active showing 3 slides initially. - If width is more than
768px
and less than1024px
,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:
$(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_
_x000D_
_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 onresize
it will remain like declared. Therefor you have to get$(window).width()
again when theresize
handler is called:
if ($(window).width() < 1400) {
- In your
click
handler you apply the class.activeTrigger
only to the clicked element. Butslick
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:
$(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_
_x000D_
_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 statementif ($(window).width() < 1400)
. Therefor you can omit it on resize and at initial call of the functioncaseStudies__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:
$(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_
_x000D_
_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.