I have a question about the functionality of the Slick.JS plugin that I'm using. In my project, I have two carousels with five slides each. The top carousel displays one slide at a time, while the bottom carousel shows all five slides concurrently. My goal is to synchronize these two carousels so that when a user clicks on a slide in the bottom carousel, the top carousel moves to the corresponding slide, and vice versa.
To illustrate how I want this synchronization to work, please refer to the following example: https://codepen.io/pjmtokyo/pen/JYyjew. Another example of slider syncing can be found here: .
Currently, when I click the arrows on the top navigation, the bottom carousel updates correctly by adding the "slick-active" class to the appropriate slide. However, clicking on a slide in the bottom carousel always resets the top carousel to the first slide. What am I missing here to ensure that clicks on the bottom carousel update the top carousel accordingly?
Here are the Slick Options I've defined (using slick.1.4.1 with jQuery 3.2.1):
# HOMEPAGE WHO WE SERVE SLIDER
homepageWhoWeServeSlickOptions =
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
asNavFor: '.home-serve-icons',
homeServeIconsOptions =
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.home-serve-scroll',
arrows: false,
focusOnSelect: true
$('.home-serve-scroll').slick(homepageWhoWeServeSlickOptions)
$('.home-serve-icons').slick(homeServeIconsOptions)
$('.home-serve-icons .slick-slide').removeClass 'slick-active'
$('.home-serve-icons .slick-slide').eq(0).addClass 'slick-active'
$('.home-serve-scroll').on 'beforeChange', (event, slick, currentSlide, nextSlide) ->
mySlideNumber = nextSlide
$('.home-serve-icons .slick-slide').removeClass 'slick-active'
$('.home-serve-icons .slick-slide').eq(mySlideNumber).addClass 'slick-active'
return
The HTML code that Slick targets in my project is as follows:
{% from '_macros/button' import button as m_button %}
{% set whoWeServe = craft.entries.section('homepageWhoWeServe').limit(5) %}
<section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-scroll" style="padding: 0px 40px;">
{% for entry in whoWeServe.all() %}
<div id="serve-{{ loop.index }}">
<h2>{{ entry.title }}</h2>
{{ entry.whoWeServeDescription }}
{% set destination = entry.whoWeServeLandingPage.one.getUrl() %}
{% set text = entry.whoWeServeCtaText | default("Learn More") %}
{{ m_button(destination, text, {classes:'important-cta-button'}) }}
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="home-serve-icons">
{% for entry in whoWeServe.all() %}
<div id="serve-icon-{{ loop.index }}">
{{ entry.title }}
</div>
{% endfor %}
</div>
</div>
</div>
</section>