Carousel slider for the Commons template

User 2945920 Photo


Registered User
9 posts

Hiya and newbie alert.

My apologies for asking a probably silly question, but how do I add previous and next buttons to the slider in the Commons template?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Hi there, fellow Norwegian!

I guess you could add an absolute positioned layer with the buttons previous and next on top of the slider, but if you want to have it moving from image to image, there is an easier and smarter way:
Locate the container with the class name .carousel. Give it an ID of 'car-auto-play' (without the inverted commas).
Then open Pages -> Manage project, and scroll down to the Head and Footer sections. Add the script below. If you want the carousel to move in the 'jumpy' way that the Materialize carousels do, then paste the script in the footer area. But if you just want it to move straight left, then pop it into the head area.

<script>
document.addEventListener('DOMContentLoaded', function() {
$('#car-auto-play').carousel();
setInterval(function() {
$('#car-auto-play').carousel('next');
}, 4000); // every 4 seconds
});
</script>


The images will change every 4 seconds. If you want them to change at some other interval, change 4000 to e.g. 3000, 5000 or whatever you like.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2945920 Photo


Registered User
9 posts

You're my hero. :)
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Wow, feels good to be someone's hero! :lol::lol:
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.