Custom HTML bootstrap slider

This thread is resolved. Here is a description of the problem and solution.

Problem:
Do you have any examples of native Bootstrap Sliders?

Solution:
https://www.w3schools.com/bootstrap/bootstrap_images.asp

You usually will use Bootstrap grid and some basic HTML
This is the native Bootstrap Example:
https://getbootstrap.com/docs/3.3/javascript/#carousel

That could be adapted to what you need since you can alter the HTML of it.

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	-	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00	14:00 – 20:00
-	-	-	-	-	-	-

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: Backend editing, Front-end display, Layouts plugin

This topic contains 3 replies, has 2 voices.

Last updated by Beda 6 years, 5 months ago.

Assisted by: Beda.

Author

Posts

July 27, 2018 at 7:33 am #957135

COOP2016

I'm trying to use the layouts slider as a hero slider in my multi site.

The slider works as expected, but there is no field to add a link to the slider item (image).

I know there is description field that takes html.

I've tried adding a link in there, but the link can't be clicked as the slider pagination is taking precedence over the space.

Is there a way to make the slider items clickable (link to something)??

July 27, 2018 at 1:18 pm #957253

Beda

That is coming from bootstrap.
It does not intend as it seems to show those over the actual "item active" of the "carousel-inner" div.
It has for some reasons z-index 10.
However it won't help to increase that value.

They are always behind the image and the z-index of the navigation elements also is higher (15) which disturbs it here too.

Only if you increase the carousel-caption z-inmdex and decrease the img z-index you'll have that link clickable.

Another possible approach is to use a manually created gallery, that you can edit to add wrapping links around the images

You can for example add that to a Content Template and call it in a Layout.
Since you hardcode the Images, it should not be a issue to have them hardcoded in the Content Template

Please let me know if you would need help with that HTML.

I think we should as well try to adjust that in Layouts, as in a "normal" caption (since usually not over, but under the post) those HTML elements work because clickable.

I will report that and we will see what we can do about.
(Irrelated to the fact that it seems something that comes with Bootstrap natively in those scenarios.)

July 30, 2018 at 7:02 am #958721

COOP2016

Thanks for your response. You've given me a couple of things to think about.

To answer your question, "Please let me know if you would need help with that HTML.", .....yes please, can you make that available to me.

Many thanks.

July 31, 2018 at 6:06 am #1068538

Beda

hidden link

You usually will use Bootstrap grid and some basic HTML
This is the native Bootstrap Example:
hidden link

That could be adapted to what you need, since you can alter the HTML of it.