I want to put multiple slick carousels (each embedded with multiple before-after sliders) on the same page using the Ride theme. Right now there are two and will eventually be four or more. My problem is no matter how I put additional slick carousels onto the page, the first carousel’s navbar arrows (currently set to “Prev” and “Next” for troubleshooting) are controlling a carousel further down the page (the navigation dots are working perfectly. I’ve tried section duplication with the same name for both sections, section duplication with different names, changing “names” in the code, multiple carousels in the same section, and modifications to the js script.
Here’s what I have so far:
index.json
{
"sections": {
"1ed70b0e-fef8-4909-8a8f-b40f48070f88": {
"type": "before-after-slider",
"blocks": {
"b24b76cc-84a4-46c0-8896-83f5f6655316": {
"type": "ba-slide",
"settings": {
"before-img": "shopify:\/\/shop_images\/fashion_model_sunglasses_plants_teal_magenta_fashion_1-2.jpg",
"after-img": "shopify:\/\/shop_images\/fashion_model_sunglasses_plants_teal_magenta_fashion_1-1.jpg",
"title": "Title Text",
"text": "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
}
},
"5e5615be-3210-4a46-8d1c-dc828ac097a9": {
"type": "ba-slide",
"settings": {
"before-img": "shopify:\/\/shop_images\/fashion_model_skirt_scarf_blue_orange_grey_brunette_fashion_2-2.jpg",
"after-img": "shopify:\/\/shop_images\/fashion_model_skirt_scarf_blue_orange_grey_brunette_fashion_2-1.jpg",
"title": "Title Text",
"text": "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
}
}
},
"block_order": [
"b24b76cc-84a4-46c0-8896-83f5f6655316",
"5e5615be-3210-4a46-8d1c-dc828ac097a9"
],
"settings": {
"heading": "Heading"
}
},
"78f9574f-7dc5-49d7-9cf5-52fda322e7ef": {
"type": "before-after-slider-two",
"blocks": {
"f78c84ca-1319-4ee4-a6d1-7ffee29e314b": {
"type": "ba-slide-two",
"settings": {
"before-img": "shopify:\/\/shop_images\/beauty_glamour_women_dresses_window_wall_chairs_beauty_1-2.jpg",
"after-img": "shopify:\/\/shop_images\/beauty_glamour_women_dresses_window_wall_chairs_beauty_1-1.jpg",
"title": "Title Text",
"text": "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
}
},
"5dbc55c8-f131-4fd9-8594-262eab162193": {
"type": "ba-slide-two",
"settings": {
"before-img": "shopify:\/\/shop_images\/beauty_glamour_woman_sleeveless_watch_long_hair_black_beauty_2-2.jpg",
"after-img": "shopify:\/\/shop_images\/beauty_glamour_woman_sleeveless_watch_long_hair_black_beauty_2-1.jpg",
"title": "Title Text",
"text": "In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content."
}
}
},
"block_order": [
"f78c84ca-1319-4ee4-a6d1-7ffee29e314b",
"5dbc55c8-f131-4fd9-8594-262eab162193"
],
"settings": {
"heading": "Heading"
}
}
},
"order": [
"1ed70b0e-fef8-4909-8a8f-b40f48070f88",
"78f9574f-7dc5-49d7-9cf5-52fda322e7ef"
]
}
JS on .liquid:
$(document).ready(function(){
const ranges = RangeTouch.setup('input[type="range"]', { });
$('.slides-{{ section.id }}').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: true,
speed: 300,
appendDots: $('.slick-slider-dots-{{ section.id }}'),
infinite: false,
autoplaySpeed: 5000,
autoplay: false,
draggable: false,
swipe: false,
/*appendArrows: $('.slider-nav'), default; caused multi misfunctioning nav arrows. changed below*/
prevArrow: $('.prev-arrow'),
nextArrow: $('.next-arrow'),
/* ^^^ end of change*/
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 1,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 1,
}
}
]
});
});
CSS on .liquid:
/* Main CSS */
.ba-slider-{{ section.id }}{
display: block;
width: 100%;
background: white;
height: auto;
padding: 10px;
background-color: #121212;
}
.ba-slider-info-area{
text-align: center;
width: 100%;
}
.ba-slider-info-area-title{
margin-block: 0px; font-family: sans-serif; font-weight: bold; color: #c2c2c2;
}
.ba-slider-info-area-text{
margin-block: 2px; font-size: 15px; color: #878787; max-width: 700px; margin: auto;
}
@media screen and (max-width:450px) {
.ba-slider-info-area-text{
font-size: 12px;
}
}
/* Slider CSS */
.wrapper{
padding: 0px 0;
overflow-x: hidden;
max-width: 1080px;
margin-inline: auto;
}
.slides-{{ section.id }}{
padding: 0 0px;
}
.slick-initialized .slick-slide{
color: #FFF;
height: auto;
margin: 0 0 0 0;
display: flex;
align-items: center;
justify-content: center;
}
.slick-next, .slick-prev{
z-index: 5;
position: relative;
top: unset;
display: block;
width: auto;
height: 20px;
padding: 0;
-webkit-transform: unset;
-ms-transform: unset;
transform: unset;
cursor: pointer;
color: transparent;
border: none;
outline: 0;
background: 0 0;
opacity: 0.75;
}
.slick-next{
right: unset;
width: 0;
height: 0;
border-right: 0 solid transparent;
border-left: 15px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.slick-prev{
left: unset;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 15px solid #fff;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
}
.slick-next:before, .slick-prev:before{
color: #fff;
font-size: 26px;
display: none;
}
.slick-dots {
left: unset;
position: relative;
bottom: unset;
display: block;
width: max-content;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
.slick-slide > div{
display: flex;
}
.slick-dots li {
margin: 0 0px;
}
.slick-dots li button:before {
font-size: 13px;
color: #fff;
}
.slick-dots li.slick-active button:before {
opacity: .75;
color: #fff;
}
.slick-prev.slick-disabled, .slick-next.slick-disabled{
opacity: .25;
}
/* Before After CSS */
#comparison-{{ section.id }} {
position: relative;
width: 100%;
max-width: 1080px;
height: auto;
/* border: 2px solid white; */
overflow: hidden;
margin: auto;
}
#comparison-{{ section.id }} .img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
}
#comparison-{{ section.id }} .fill-img {
width: 100%;
height: auto;
/* opacity:0; */
}
If more in-depth info is needed, url is demilucid.myshopify.com
Note: my programming skills are equivalent to my current caffeine level - 1 out of 8 daily cups. I had this custom section built for me.