Implement a carousel on your Drupal website to display information in a slider.
Follow the steps below to start using the Carousel element in your website:
- Click on the + icon
- Click on the Carousel element
- Set the frames per slide setting to set how many slides you would like to see simultaneously
- Optionally, switch on the Disable Auto Play option. This will stop the auto play function of the slides
- Set the speed of the carousel with the Auto Play Interval setting
- Select an option from the Transition Style setting to set how the slides will change
- Optionally, switch on the option to Stop on Hover
- Once you’ve selected your preferred settings, you can click on Save Changes
- Click on + icon to add an element in the carousel slide
- Click on Add Slide to add more slides to the carousel
Customizing your carousel navigation
You can customize your carousel navigation adding Dots or Next/Previous this will help navigate the carousel.
Dots navigation
Go to the Dots tab
Switch on the Dots Navigation
Select the position of the dots by Dots Orientation settings
Select the Shape of the dots
Optionally, select an option for the Transform Active setting to style the active dot
Set a color for the Dots and Active Dots.
Once you’ve selected your preferred settings, you can click on Save Changes and you're done!
Next/Previous navigation
- Go to the Next/Prev tab
- Switch on the Next/Prev option
- Select the option for the Orientation of the carousel
- Select a Style option for the background of the navigation
- Select a color for the Icon, Icon Hover, Background and Background Hover
- Set the Thickness of the Icon
- Select an option style for the Outside Navigation Position
- Once you’ve selected your preferred settings, you can click on Save Changes and you're done!