[Just for fun] Creating a slider-within-a-slider

2023-11-08

I tried creating a slider-within-a-slider using the popular slider plugins "Swiper", "slick.js", and "bxSlider".

Here's what I made.

When I placed slick inside Swiper, it worked.

By the way, if you pinch and swipe, the outer Swiper seems to advance the page.

Working Combinations

After trying various combinations of "Swiper", "slick", and "bxSlider":

slick inside Swiper
bxSlider inside slick

only these worked.

When I placed Swiper or slick inside bxSlider, the inner slides (Swiper or slick) could not be controlled, and page navigation was not possible.

When I placed Swiper inside slick, the slick layout seemed unstable.

Also, it was not possible to create a slider of the same plugin inside another slider, such as "Swiper inside Swiper", "slick inside slick", or "bxSlider inside bxSlider".

Here's a sample of "bxSlider inside slick".This one also works stably.

If you pinch and swipe, both slick and bxSlider seem to advance the page.

HTML

Here's what the HTML for "bxSlider inside slick" looks like.It's just bxSlider placed in each slick slide. Very standard.

<div class="slick">
	<div class="slide">
		<div class="bxslider">
			<div><img src="img01.jpg"></div>
			<div><img src="img02.jpg"></div>
			<div><img src="img03.jpg"></div>
			<div><img src="img04.jpg"></div>
		</div>
	</div>
	<div class="slide">
		<div class="bxslider">
			<div><img src="img01.jpg"></div>
			<div><img src="img02.jpg"></div>
			<div><img src="img03.jpg"></div>
			<div><img src="img04.jpg"></div>
		</div>
	</div>
	<div class="slide">
		<div class="bxslider">
			<div><img src="img01.jpg"></div>
			<div><img src="img02.jpg"></div>
			<div><img src="img03.jpg"></div>
			<div><img src="img04.jpg"></div>
		</div>
	</div>
	<div class="slide">
		<div class="bxslider">
			<div><img src="img01.jpg"></div>
			<div><img src="img02.jpg"></div>
			<div><img src="img03.jpg"></div>
			<div><img src="img04.jpg"></div>
		</div>
	</div>
</div>

JS

Here's what the JS looks like.
It's just slick and bxSlider being executed normally.

$(".slick").slick({
	centerMode: true,
	variableWidth: true
});

$(".bxslider").bxSlider();

The order of execution didn't seem to matter either.

【God's Realm】Slider-within-a-slider-within-a-slider

Earlier, I wrote that only "slick inside Swiper" and "bxSlider inside slick" worked.

So, would "bxSlider inside slick inside Swiper" work?

It worked lol

1-1

1-2

1-3

1-4

2-1

2-2

2-3

2-4

3-1

3-2

3-3

3-4

4-1

4-2

4-3

4-4

The blue one is the Swiper pager, the off-white one is the slick pager, and the gray one is the bxSlider pager.

It even supports smartphones casually lol

I didn't do anything particularly difficult.

I just placed bxSlider inside slick inside Swiper and executed them normally. I did tidy up the CSS a bit, though.

I've made something trivial again...

Comments

We also welcome reports like "It worked!".

If this was helpful, we appreciate your support!
Any support received will be used for childcare.

Or support us by buying something from the buttons below
(You don't have to buy the linked product.)

Amazon

楽天市場

Yahoo!ショッピング