Gallery, Lightbox and Carousel all rolled into one

[gary]

I’ve been thinking about how I can do this:

It’s a carousel that automatically advances to the next photo. You can navigate with the arrow buttons, also. And below the photo are thumbnails that you can click on as well, with the photo being “loaded” into the main container.

So a carousel with thumbnails with lightbox. I don’t want it to launch in an overlay, though.

Kind of scratching my head as to how I could do this. Would any of the custom Brics like OWL Carousel, Swiper, or Swiffy help? @Lucas @Whittfield ?

[Jerry]

Splide can do this for you.

Themes - Splide

[KBConcepts]

@Jerry

Splide can do this for you.

The choices of this slider is pretty good. Maybe, I am missing something, I could not find a way to add a hyperlink to any of the images.

[Jerry]

@KBConcepts

I could not find a way to add a hyperlink to any of the images.

Just add: onclick()

[KBConcepts]

@Jerry

Just add: onclick()

If I knew what you did I would
I looked through this, but I see buttons, not a carousel or slider connection.

onclick Event

[Jerry]

Just add as a custom attribute to the image of the slider.

[KBConcepts]

@Jerry

custom attribute to the image

Curious… does that mean to each images?
How would you do that for each image in the slider/carousel?

[Bootsie]

In the sidepanel you find “Custom Attribute”.
Make a new one.
Name: onclick
Value: location.href=‘https://yourUrl.com’

That should do it.

[KBConcepts]

@Bootsie

Value: location.href

Thank you That helps, since I just don’t know how to use code.
Can this Value point to any element or bookmark to another page?

[Bootsie]

Jerry knows such things.
I don’t. Sorry.

[Bootsie]

location.href=‘yourpage.html’
Just fiddle around and try some things.

[Jerry]

After a few espressos this AM I recalled there’s a much easier way. Just add the images under the carousel and link them with a custom attribute to the image within the carousel itself.

The sample file is somewhere floating around on the forum. It’s in Bootstrap 4 and to convert to Bootstrap 5 just change data-target to data-bs-target.

[PeteSharp]

As per this thread

Slideshow for services

Thats more work than you’re likely to get from the forum. You can create thumbnails that make certain slides in the standard Bootstrap carousel active. Those thumbnails need two custom attributes (right side panel) to trigger the slide you want. data-target="#carouselID" data-slide-to="0" Set the ID of your carousel, you need to prefix it with the # Set the slide number. eg. 0 = the first slide.

[Jerry]

@PeteSharp

As per this thread

Someone has been searching in the catacombs of fort Blocs It’s Friday afternoon and a long weekend over here. I’m off to my for some fancy

[PeteSharp]

I’ve just finished work. It’s 9:15pm Friday night here. I’ve got a weekend of work planned. Starting at 7:30am

[Jerry]

@PeteSharp

Starting at 7:30am

Well deserved…

[PeteSharp]

Wondering what’s for dinner actually. The wife and daughter have gone out to watch a ballet.

[Jerry]

@PeteSharp

Wondering what’s for dinner actually.

All the stuff your wife normally doesn’t serve you.

[KBConcepts]

@Jerry

espressos

Love this!, I just made mine with my Rancilio machine, I got for Father’s day.
Thank you for making a visual, now it makes sense.

Now got to get to my morning espresso time.