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:

  1. Click on the + icon 
  2. Click on the Carousel element
  3. Set the frames per slide setting to set how many slides you would like to see simultaneously 
  4. Optionally, switch on the Disable Auto Play option. This will stop the auto play function of the slides
  5. Set the speed of the carousel with the Auto Play Interval setting
  6. Select an option from the Transition Style setting to set how the slides will change
  7. Optionally, switch on the option to Stop on Hover
  8. Once you’ve selected your preferred settings, you can click on Save Changes
  9. Click on + icon to add an element in the carousel slide
  10. 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

  1. Go to the Dots tab

  2. Switch on the Dots Navigation

  3. Select the position of the dots by Dots Orientation settings

  4. Select the Shape of the dots

  5. Optionally, select an option for the Transform Active setting to style the active dot

  6. Set a color for the Dots and Active Dots.

  7. Once you’ve selected your preferred settings, you can click on Save Changes and you're done!

Next/Previous navigation

  1. Go to the Next/Prev tab
  2. Switch on the Next/Prev option
  3. Select the option for the Orientation of the carousel
  4. Select a Style option for the background of the navigation
  5. Select a color for the Icon, Icon Hover, Background and Background Hover
  6. Set the Thickness of the Icon
  7. Select an option style for the Outside Navigation Position
  8. Once you’ve selected your preferred settings, you can click on Save Changes and you're done!