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?
Carousel slider for the Commons...
Knut Are Romann-Aas
Registered User
9 posts
Inger
Senior Advisor
14,567 posts
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.
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.
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>
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
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
Knut Are Romann-Aas
Registered User
9 posts
You're my hero. 
Inger
Senior Advisor
14,567 posts
Wow, feels good to be someone's hero! 
Ha en riktig god dag!
Inger, Norway
My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com
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.
