Nested Spliders

[Fettabachi]

I'm attempting to build a carousel that contains nested carousels, but am experiencing odd behavior with them. I've created a pen that details the issues and demonstrates the behavior.

This is my first attempt at using Splide so maybe I'm missing some options or have improperly structured my html. I've seen the nested example here, but the outer slider doesn't conform to the structure as noted here so it makes me wonder if I've missed something in the documentation for properly nesting sliders.

[NaotoshiFujita]

Seems very complex.

width: xxx !important

Changing width by CSS breaks your carousel. Before starting transition, Splide calculates destination by slide width. If you override width with !important, your slider goes incorrect position.

.accommodations-slider .accommodations-slider-slides > .splide__slide {
  width: 374px !important;
}

.accommodations-slider
  .accommodations-slider-slides
  > .splide__slide.is-active {
  width: 530px !important;
}

Nested carousles and Loop

This is very difficult. Splide clones slides to make a carousel loop. You are initializing original slides, but are not cloned slides.
At least, you will need to do following things:

1. Init the main carousel first
2. Iterates over all Slide components by Slides#forEach and find your element where you want to apply Splide
3. Put them into an object with categorizing by class name or something.
4. Apply Splide them and sync each other by sync()

[gnemtsov]

@NaotoshiFujita
I am currently working on some logic to support nested Sliders in "loop" mode. Are the things mentioned above still relevant? I’ve done it the opposite way, and it works fine for me. By this, I mean that I first initialize the child Slider and then move up to the main Slider. I think this works because, at the point when the main Slider creates clones, the child Sliders are already initialized.

Also, I don't have to use sync() for this to work. I just mount all the Sliders from bottom to top. Am I missing something? I just don’t want to overlook any nuances or edge cases. I appreciate any insights.

[Fettabachi]

Thank you, but my JavaScript skills are average at best and I don't understand how to accomplish your recommendations. If you could provide examples of the steps shown above, I might be able to piece them together to solve my problem, and maybe you'd be able to use them as an advanced use case example on your website.