Brickscore / Elements /
Core Slider
Core Slider
Documentation
Core Slider is based on a full integration of the powerful splidejs library. Its a nestable slider that contains "Slide Blocks". Each "Slide Block" has a "Content" element whose function is to wrap all the content of that slide. You can place everything you want inside the slide on this "Content" element.
Settings
Type
Slide or Loop. Loop type makes the slider continue from the end to the first slide. Slide by default.
Auto Width
If true, the width of the slides are determined by their own width. False by default.
Per Move
Determines the number of slides to move at once. 1 by default.
Speed
The higher the speed number is the slower the slide movement. 400 by default.
Drag
It can be true, false or free. True by default.
True: slider can be draggable and each slide is placed in its correspondant slider when dragging.
False: slider can´t be draggable.
Free: slider can be draggable without placing each slide in its correspondant slider when dragging.
Snap
If true, dragging will place to the nearest slide. Drag must be free. False by default.
Easing
CSS easing (timing-function) of the slider transitions.
Rewind
Rewind
When the slider ends it returns to the beginning. Available only at Type: Slide. True by default.
Rewind speed
Determines the rewind movement speed. 400 by default.
Rewind by drag
Allows rewind when dragging. True by default.
Flick
Flick Power
The larger number this is, the farther the slider runs between slides. 600 by default.
Flick Max Pages
Limits the number of pages to move by the flick action. 3 by default.
Accesibility
Keyboard
Enables custom keyboard shortcuts. Can be true, false or global. True by default.
Wheel
Enables navigation by the mouse wheel on hover. True by default.
Wheel Sleep
The sleep duration in milliseconds until accepting next wheel. 0 by default.
Release Wheel
Determines whether to release the wheel event when the slider reaches the first or last slide so that the user can scroll the page continuously. False by default. Available only with Rewind: false.
Slides
Gap
Spacing gap between slides. 10px by default.
Starting Slide
The slide where the slider should start. 0 by default.
Per Page
Determines the number of slides to display in the slider. 1 by default. Auto Width must be set to false.
Per Move
Determines the number of slides to move at once. 1 by default.
Per Page Breakpoints
Lets you set the number of slides to display per each customizable breakpoint.
Arrows
Arrows
If false, arrows won´t be included at the slider. True by default.
Scale
Determines the size of the arrows. 1 by default.
Previous Arrow & Next Arrow Styling
You are able to customize the icon, display, margin, color and background styling of each arrow.
Pagination
Pagination
If false, pagination won´t be included at the slider. True by default.
Active dot color & Inactive dot color
Sets the color of the dot pagination.
Justify
You are able to justify the position of the pagination at the slider.
Margin
Pagination margin.
Autoplay
Autoplay
If false, slider won´t autoplay. False by default.
Omit End
If the ending slides are already in viewport, they will be omitted. False by default
Interval
Autoplay interval duration between slides. 1500 by default.
Pause on hover
Wether to pause autoplay on hover or not. False by default.
Lazy Load
False: disables lazy loading.
Nearby: Starts loading only images around the active slide page.
Sequential: Loads images sequentially.
False by default.
Navigation direction
The direction of the autoplay. It can be ltr (Left to Right) or rtl (Right to Left). ltr by default.
*NOTE: navigation direction can also change navigation direction of Autoscroll.
isNavigation
If true, each slide has its own pagination dot. False by default.
Autoscroll
Autoscroll
If false, slider won´t autoscroll. False by default. If slider is set to loop then it will result in a marquee effect.
Autostart
If true, autoscroll will play on window load. False by default.
Autoscroll speed
The higher the speed is the higher the autoscroll runs. 2 by default.
Pause on hover
Wether to pause autoplay on hover or not. False by default.
Rewind
If true, autoscroll will rewind to the beginning of the slider when it reaches the end. False by default. Slider must be of type slide
Introduction
Text elementsScroll Reading
Text
Underline Hover
Text
Highlight Hover
Text
Scroll Cascading
New
Text
Twist Reveal
Text
Letter Launcher
Text
Swap Hover
Text
3D Swap Hover
Text
Typed
New
Text
Circular Title
Text
Mask Hover
Text
MouseFill Title
Text
Fluid Gradient Ttitle
Text
Infinite Title
Text
Scroll Gradient
Text
Unfold Hover
New
Text
Counter
Text
Blade Reveal
Text
Inline Images
Text
Unfold Reveal
Text
Scribble Reveal
Text
SVG Reveal
Text
Decode Hover
Text
Decode Reveal
Text
Random Letters
Text
Exchange Title
Text
Blended Hover
Text
Anyside Button
Button
Mask Button
Button
Layer Button
Button
Arrow Button
Button
Crystal Button
Button
Split Button
Button
Ripple Button
Button
Prism Button
Button
Glowing Button
Button
Neumorphic Button
Button
Marquee Button
Button
Microbox Button
Button
Core Burger
Menu
OffCanvas Menu
Menu
Stripe megaMenu
Menu
Multi OffCanvas Menu
Menu
Expanding Menu
Menu
Overlay Menu
Menu
Sticky Header
Menu
Simple Menu
Menu
Morphing Nav
Menu
Cursor
Core
Smooth Scroll
Core
Custom Scrollbar
Core
Marquee
Core
Grainy
Core
Bubbles
Core
Dark Mode
Core
Tippy
Core
Click & Copy
Core
Flipbox
Core
Media
New
Core
Spinner
Core
Gradiently
Core
Glowing Card
Core
Drawer
Core
Observer
Core
Codepen
Core
Motion Divider
Core
Generatorism
Core
Glitchy
Core
Core Tabs
Core
Parallax
Core
Spotlight
Core
Back to Top
Core
Core Slider
Core
Particles
Core
Parallax Hover
Core
Video Sequence
Core
Sharer
Core
Before/After Image
Core
Lottie
Core
Image Reveal
Core
Expanders
Core
Image Hotspots
Core
Zoom Lens
Core
Need assistance?
No spam. Only Brickscore news and showcases
