Slick Slider Block

The catapult Slick Slider Block allows you to quickly and easily add a full featured image slider to your concrete5 website. Simply add some images and options and the block will display an image slider in your chosen area.

This block allows for multiple images and lots of customization.

Quick Start Guide

Adding a Slick Slider Block

  1. Navigate to the page you wish to add the slider to

  2. Add a ‘Slick Slider Block’ to the page

    1. Slides
      1. Click ‘Add Slide to add your slide/s

      2. Click ‘Edit’ next to the slide you wish to edit

      3. Click ‘Select Image’ to choose an image from your file manager

      4. Optionally add some text to the slide within the ‘Content’ field

      5. Optionally add an internal or external link to the slide image

      6. Repeat these steps for each slide you wish to add

    2. Settings
      1. Basic

        1. Autoplay Speed
          Set how long each images slide should be in view in milliseconds (1000 ms = 1 s)

        2. Animation Speed
          Set the transition speed between slide animations in milliseconds (1000 ms = 1 s)

        3. Arrows
          Enable/Disable next and previous navigation arrow

        4. Dots
          Enable/Disable dot indicators which show number of slides and allow for easy access direct to specific slide

        5. Accessibility
          Enables tabbing and arrow key navigation

      2. Advanced (these settings are optional)

        1. Slides To Show
          Set how many slides are in view after each transition

        2. Slides To Scroll
          Set how many slides should scroll on each transition

        3. Rows
          Set how many rows of images you wish to display

        4. Slides Per Row
          Set amount of slides in each row if ‘Rows’ is set to more than 1

        5. Center Mode
          Sets an image to the center of the view with optional padding

        6. Z-index
          Change z-index of slides, useful if there are some issues with images disaplying on top of other elements

        7. Pause On Focus
          Enable/Disable pause slider when slider on focus

        8. Pause On Hover
          Enable/Disable pause slider when slider on hover

        9. Pause On Dots Hover
          Enable/Disable pause slider when slider on dots hover

        10. Focus On select
          Enable/Disable focus on selected element (click)

        11. Vertical
          Sets images to scroll vertically default is horizontal

        12. Vertical Swiping
          Enable/Disable the ability to swipe slides vertically

        13. Adaptive Height
          Enable/Disable different height images for single slide horizontal sliders

        14. Variable Width
          Enable/Disable different width images for single slide horizontal sliders

        15. CSS Ease
          Set the slide CSS3 animation easing; Ease, Linear, Ease In, Ease Out, Ease In Out

        16. Fade
          Enable/Disable fade animation; default is slide

        17. Infinite
          Enable/Disable infinite loop so the images replay once complete a full cycle

        18. Draggable
          Enable/Disable slides to be dragged with mouse

        19. Swipe
          Enable/Disable slides to be swiped with finger on touchscreen

        20. Swipe To Slide
          Enable/Disable users to drag or swipe directly to a slide irrespective of Slides To Scroll

        21. Touch Move
          Enable/Disable slide motion with touch

    3. Color
      1. Text Color
        The slide text color is managed within the Rich Text Editor on each individual slide. This allows for much more flexibility

      2. Background Color
        Add a slides background color - shows through when using transparent png’s

      3. Arrow Color
        Select an arrow color

      4. Dot Color
        Select an dot color

      5. Dot Active Color
        Select an active dot color