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.
Navigate to the page you wish to add the slider to
Add a ‘Slick Slider Block’ to the page
Click ‘Add Slide to add your slide/s
Click ‘Edit’ next to the slide you wish to edit
Click ‘Select Image’ to choose an image from your file manager
Optionally add some text to the slide within the ‘Content’ field
Optionally add an internal or external link to the slide image
Repeat these steps for each slide you wish to add
Basic
Autoplay Speed
Set how long each images slide should be in view in milliseconds (1000 ms = 1 s)
Animation Speed
Set the transition speed between slide animations in milliseconds (1000 ms = 1 s)
Arrows
Enable/Disable next and previous navigation arrow
Dots
Enable/Disable dot indicators which show number of slides and allow for easy access direct to specific slide
Accessibility
Enables tabbing and arrow key navigation
Advanced (these settings are optional)
Slides To Show
Set how many slides are in view after each transition
Slides To Scroll
Set how many slides should scroll on each transition
Rows
Set how many rows of images you wish to display
Slides Per Row
Set amount of slides in each row if ‘Rows’ is set to more than 1
Center Mode
Sets an image to the center of the view with optional padding
Z-index
Change z-index of slides, useful if there are some issues with images disaplying on top of other elements
Pause On Focus
Enable/Disable pause slider when slider on focus
Pause On Hover
Enable/Disable pause slider when slider on hover
Pause On Dots Hover
Enable/Disable pause slider when slider on dots hover
Focus On select
Enable/Disable focus on selected element (click)
Vertical
Sets images to scroll vertically default is horizontal
Vertical Swiping
Enable/Disable the ability to swipe slides vertically
Adaptive Height
Enable/Disable different height images for single slide horizontal sliders
Variable Width
Enable/Disable different width images for single slide horizontal sliders
CSS Ease
Set the slide CSS3 animation easing; Ease, Linear, Ease In, Ease Out, Ease In Out
Fade
Enable/Disable fade animation; default is slide
Infinite
Enable/Disable infinite loop so the images replay once complete a full cycle
Draggable
Enable/Disable slides to be dragged with mouse
Swipe
Enable/Disable slides to be swiped with finger on touchscreen
Swipe To Slide
Enable/Disable users to drag or swipe directly to a slide irrespective of Slides To Scroll
Touch Move
Enable/Disable slide motion with touch
Text Color
The slide text color is managed within the Rich Text Editor on each individual slide. This allows for much more flexibility
Background Color
Add a slides background color - shows through when using transparent png’s
Arrow Color
Select an arrow color
Dot Color
Select an dot color
Dot Active Color
Select an active dot color