Version:

    Slider elements

    The slider elements allow you to add an interactive slider to your layout.

    How a slider is composed

    A slider includes the following component parts:

    • Slider container - The outer container which holds your slides
    • Slider navigation - The buttons used to navigate between slides. These are set within the Slider container
    • Slider pagination - Shows the number of slides and can act as navigation. This is set within the Slider container
    • Slide - The slides which hold your content.

    Slider-structure.png

     

    Creating a slider

    The following steps illustrate the process of creating a simple Slider device. 

    Step 1 - Create your slider navigation and slider pagination styles

    1. Create a Slider navigation custom style by using the Button custom style type. For more information, see Creating custom styles
    2. Create a Slider pagination custom style. For more information, see Creating custom styles.

    Step 2 - Add a slider container to your layout canvas

    1. Add a Slider container element to your Layout canvas

    Step 3 - Apply your slider navigation and pagination styles

    1. Double click on the Slider container to edit its settings
    2. Select your Slider navigation and Slider pagination custom styles. For more information, see Slider container.

    Step 4 - Add a slide item to your slider container

    1. Add a Slide element to your Layout canvas within your Slider container
    2. Double click on the Slide to edit its settings. For more information, see Slide element.

    Step 5 - Add content to your slide

    1. Add content and layout elements to your Slide.

    Step 6 - Duplicate your slide

    1. On your Slide, click on the ...ellipsis button and then click Duplicate
    2. Repeat this 3 more times to give you a total of 5 slides
    3. Edit some of the content within each slide item so that it's obvious when the slide changes.

    Step 7 - Save and publish to finish

    1. Click Save
    2. View your page. You've now created a slider device with 5 slides.

    Configuring the slider container and slide elements

    The Slider container and Slide  elements have many configuration settings. For more information on configuring them, see Slider container element and Slide element.

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.