I want to create a slider with thumbnails

HTML & CSS
,
1

I would like to create a slider with the thumbnails, I am also attaching an image for reference:

image
image763×562 104 KB

2

You could try slick slider.

The demo page has something similar to what you want.

3

To create a slider with thumbnails, you can follow these steps:

Choose a Slider Plugin: There are many slider plugins available for various website platforms like WordPress, Wix, or Squarespace. Choose a slider plugin that suits your website platform.

Install the Slider Plugin: Install and activate the slider plugin on your website.

Create a Slider: Create a new slider and choose the layout that includes thumbnails.

Add Images to the Slider: Add the images that you want to include in the slider. Most slider plugins have a drag-and-drop interface to add images.

Configure Thumbnail Settings: Configure the thumbnail settings according to your preferences, such as size, shape, and placement.

Customize the Slider: Customize the slider’s design and layout to match your website’s branding and style.

Publish the Slider: Once you’re happy with the slider’s design and configuration, publish it on your website.

4

And if the OP is not using one of these???

5

WordPress

6

I’m sure when he returns the OP will tell us what technology he is using.

1 Like
7

Hi, there I am using simple CSS, HTML & Bootstrap 5.2

8

There are some tutorials around that will show how to modify the carousel component. The one above was the first I found but there are others if you search.

1 Like
9

I want to incorporate this slider https://splidejs.com/tutorials/thumbnail-carousel/ in my html page but I don’t know how to use it. I am stuck on which files and code are needed.

10

Here is an example of what I want:

This is the WordPress plugin and I want it in bootstrap HTML.

11

Are you going to have a fixed number of images under the product?

That example has 4 images under the product and does not have the facility to add more. The carousel in your previous post though has multiple images and slides the thumbnails.

They are 2 different behaviours. Which is the one you want?

If you want a static number of images then once again the bootstrap slider has that built in and you just have to style it.

This was about 15 minutes work from the examples already given and bearing in mind I rarely use bootstrap.

You don’t really want to be adding other plugins for sliders when bootstrap already has the carousel built in place. After all isn’t that the reason you are using bootstrap so you can use its pre defined elements etc.

12

Images can be more or less as per the product image availability. The maximum number of images we have in the product then it will be shown in one line of a thumbnail and changed on click on the next and previous buttons.

13

I’ve more or less given you everything you need to get started. The rest is up to you :slight_smile:

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.