Layout
      Back to home
      1. Knowledge Base
      2. Content Items
      3. Layout

      Slider

      Learn how to use the a slider content item

      Slider enables you to create sliders, or carousels on your site. You can create individual slides with content you set manually and you can create dynamic slides using Slide layouts if using a slider within a source.

      The article walks you through: 

      • Slider functionality:
        • Content items
        • Fields
        • Elements
        • Link actions
        • Properties
      • Using Slider without a source
      • Using Slider with a source
        • Iterating over arrays using the source fieldset
        • Slide layouts
        • Unique Slide items

      Content items, fields and elements

      Content items

      The Slider content item enables you manage settings that apply to the entire slider. Within Slider, you can add Slide content items to manage each slide individually. If using slider in a source you can add Slide layouts too. 

      Fields

      • Slides per view: Set the number of visible slides
      • Slides to scroll: Set the number of slides on each scroll
      • Use adaptive height: Dynamically adjust the height of the slider to match the height of the current slide.
      • Loop: Continuously loop through all slides or stop scrolling once all slides are complete.
      • Autoplay: Set your slides to scroll automatically without the user
      • Make slider overflow visible: sets the slider overflow to visible
      • Center current slide: Centers your current slide
      • Slide transitions fieldset enables you to configure transition settings that apply as slides transition from one to the next.

      Elements

      • Arrows: Configure arrows to scroll left/right for your slider
        • The disabled state will show if there are no more slides to click through
        • If you want more custom arrow positioning, you can use icons or text along with the relevant link actions to scroll the slide.
        • See the following video on configuring slider arrows:
      • Bullets: Set the styling and position for bullets that show the number of slides in the slider. The active state will apply to the bullet representing the current slide.
      • Scrollbar: Style a slider scrollbar

      The following elements are only available on a slider inside a source: 

      • Thumbnails: style slider image thumbnails. You can add the relevant image property in the Source field in the Background fieldset to add an image to your thumbnails. 
      • Loader: displays a loader whilst slides are loading
       

      Using Slider without a source

      You can only add a Slide content item in a slider without a source. You can then configure each slide with the design and content settings as per your requirements. 

      Using Slider with a source

      When using Slider inside of a Source, you can use Nyla's layout capabilities to iterate over any array property within the source.

      Slide layouts enable to you style each layout you are using to display the contents in the array, and Slide content items enable you to insert unique slides items with different content into the array of items being iterated over.  

      You can add a Slide layout or a Slide within a Slider with a source:

      Source Fieldset & Iterating over an array

      The Source fieldset enables you to add an array property to iterate over within the slider using layouts. In this example, the source fieldset is set to iterate the slide layouts over a collection.products array: 

      This means that each layout in the Slider will represent one product for all of the products in the array. For example on a Cross Sell section page you would iterate over collection.products in order to show one slide for each of the products in the collection.  

      Slide Layouts

      Slide layouts work like any layout content item within an array:

      • Your default layout will show by default for all items in the array you are iterating
      • You can add additional layouts that show when the layout conditions are fulfilled
      • You can add as many layouts as you would like
      • When there are conflicting layout conditions, layouts take precedence from top to bottom based on how they are ordered within the grid

      Properties

      Slider has the following properties available to use in order to create custom layouts with dynamic content: 

      • Slide: enables you to use the index of the current slide
      • Slider : enables you to use the current slide and the total slides count to create dynamic counts for your sliders
      • Page Sliders: enables you to use the same functionality as the Slide and Slider properties, but can be added outside of the slider to reference a slider anywhere on the same page. You should reference the slider using the content item ID in order to use these properties. 

      Link actions: 

      Slider has a range of link actions available in order to change slides, start/pause the slider, link to specific slides and so on. 

      See link actions here