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!