jQuery when arrow on last slide is clicked perform a click event

Question

I am using the slick slider:
https://kenwheeler.github.io/slick/

When the slick carousel is on the last slide, and the next arrow is clicked, I want a click event to happen. This click event is basically to change into the next tab, as I have slick inside tabs. The event will be that 'li.tab2' is clicked.

After some searching I found this solution but it does'nt seem to be working:

$('.features-slider').on('afterChange', function(event, slick, currentSlide) 
{

  if (slick.$slides.length-1 == currentSlide) {
     $('li.tab2').click();
  }
})

This is my code:

$(document).ready(function(){

  $(".tab_content").hide();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function() {
   $('.features-slider').slick('refresh');
    $(".tab_content").hide();
    var active_tab = $(this).attr("rel"); 
    $("#"+active_tab).fadeIn();     

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $(".tab_accordion_heading").removeClass("acc_active");
    
  $(".tab_accordion_heading[rel^='"+active_tab+"']").addClass("acc_active");

  });

  $(".tab_accordion_heading").click(function() {      
    $(".tab_content").hide();
    var acc_active_tab = $(this).attr("rel"); 
    $("#"+acc_active_tab).fadeIn();

    $(".tab_accordion_heading").removeClass("acc_active");
    $(this).addClass("acc_active");

    $("ul.tabs li").removeClass("active");
    $("ul.tabs li[rel^='"+acc_active_tab+"']").addClass("active");
  });

  $('ul.tabs li').last().addClass("tab_last");
  
});
 
$('#tab1 .features-slider').on('afterChange', function(event, slick, currentSlide) {
  if (slick.$slides.length-1 == currentSlide) {
    $('li.tab2').click();
  }
})
$('#tab2 .features-slider').on('afterChange', function(event, slick, currentSlide) {
  if (slick.$slides.length-1 == currentSlide) {
    $('li.tab3').click();
  }
})

body {
 background: gray;
}
.key-features {
  clear: both;
  padding-top: 10px;
}
.key-features, .key-features * {
  outline: none; 
}

.key-features h2 {
  text-align: center;
  padding-bottom: 10px;
}
/* Tabs Styles */
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px;
    /*overflow: hidden;*/
    position: relative;
}
.tab_content.hidden {
  display: block;
  height: 1px;
  width: 100%;
  border: 1px solid red;
}

ul.tabs li.active {
    display: block;
}
.tab_container {
    clear: both;
    float: left;
    width: 100%;
    /*overflow: auto;*/
}
.tab_content {
    padding: 20px;
    display: none;
  padding-left: 0;
  padding-right: 0;
}
.tab_accordion_heading { display: none; }

@media screen and (max-width: 480px) {
    .tabs {
        display: none;
    }
    .tab_accordion_heading {
        margin: 0;
        padding: 5px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .acc_active {
        background-color: #666;
        color: #fff;
    }
}

/* My Styles */

.tabs {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center; 
}
ul.tabs li{
  text-transform: uppercase;
  color: #828282; 
  border-bottom: 2px dotted transparent;
  padding: 0;
  padding-bottom: 5px;
  display: inline-block;
  margin: auto 20px;
  font-size: 30px;
}
.tabs li.active{
  color: #FFF;
  border-bottom: 2px dotted #FFF;
}
.features-slider .item {
  margin-top: 60px;
  text-align: center;
}
.features-slider .item:nth-child(1n) h3{
   color: #EC69E6
}
.features-slider .item:nth-child(2n) h3{
   color: #00C9FA
}
.features-slider .item:nth-child(3n) h3{
   color: #00DFA1
}
.features-slider p {
  font-size: 25px;
  width: 274px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.features-slider .slick-prev, .features-slider .slick-next {
  opacity: 1!important;
  top: 35%;
  width: 37px;
  height: 69px;
}
.features-slider {
  padding: 0 0px 0 30px; 
}
.features-slider .slick-prev {
  left: -30px;
}
.features-slider .slick-next {
  right: 0;
}
.features-slider .slick-prev:before {
  content: " ";
  display: block;
  width: 37px;
  height: 69px;
  background-image: url('data:image/svg+xml;utf8,<svg width="37" height="69" viewBox="0 0 37 69" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.3676 3.26465L2.99999 34.6323L34.3676 65.9999" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  opacity: 1!important;
}
.features-slider .slick-next:before {
  content: " ";
  display: block;
  width: 70px;
  height: 71px;
  background-image: url('data:image/svg+xml;utf8,<svg width="70" height="71" viewBox="0 0 70 71" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.9117 67L66.2794 35.6324L34.9117 4.26477" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  opacity: 1!important;
}

@media screen and (max-width: 767px) {
  .features-slider h3 {
    font-size: 30px; 
  }
  .features-slider p {
    font-size: 18px;
  } 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></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://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />

<div class="page-center">
  <div class="key-features wow fadeInUp">
    <h2>
      Heading
    </h2>

    <div class="tabs-main">
        <div class="wrapper">
          <ul class="tabs">
            <li class="tab1 active" rel="tab1">Tab 1</li>
            <li class="tab2" rel="tab2">Tab 2</li>
            <li class="tab3" rel="tab3">Tab 3</li>
          </ul>
          <div class="tab_container">  
              <div id="tab1" class="tab_content">
                <div class="features-slider">
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->  
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                </div><!-- end features-slider -->
              </div>
              <div id="tab2" class="tab_content">
                <div class="features-slider">
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->  
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                </div><!-- end features-slider -->
              </div>
              <div id="tab3" class="tab_content">
                <div class="features-slider">
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->  
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                    <div class="item">
                      Item Content Here
                    </div><!-- end item -->
                </div><!-- end features-slider -->
              </div>
          </div>
        </div>
      </div><!-- end tabs-main -->
        
  </div><!-- end key-features -->
</div><!-- end page-center -->

</div>
<script>
$(document).ready(function(){
  $('.features-slider').slick({
    arrows: true,
    centerPadding: "0px",
    dots: false,
    slidesToShow: 3,
    infinite: false,  
    responsive: [
      {
          breakpoint: 767,
          settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
          breakpoint: 600,
          settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});
</script>

No,I am using the regular slick slider. I am actually using this on a hubspot website. — zestzahir, Oct 11 '20 at 08:05
I was referring to the bs-tabs plugin never mind, try this https://stackoverflow.com/a/24343998/6160662 — Vinay, Oct 11 '20 at 08:18
The tabs isn't an issue. The solution provided in that question refers to the tab. What is intended in this question, is for something to happen when the next arrow is clicked, and the last item of the slider is on display. I have changed it from a tab click to an alert, but it is still not triggering. — zestzahir, Oct 11 '20 at 08:24
That didn't work. There is a funny glitch however. When I try the afterchange event in the edit snippet and run it from there, it works. But on my website and on here when running the full snippet it is not working — zestzahir, Oct 11 '20 at 09:22

jQuery when arrow on last slide is clicked perform a click event

0 Answers0