CMS Slider - Navigation

Instructions

Overview

Add a responsive, customizable content slider to your website with navigation controls.

Getting Started

Quick Start

1. Click the Copy Component button on the top of the page.
2. Paste the component into your Webstudio site.

Manual Start

1. Add the Script: Copy and paste this code into your website's after the component:

[code-block]<script type="module" src="https://drevo.b-cdn.net/Library/Custom%20Components/CMS%20Slider/cms-slider-v1.1.js"></script>[/code-block]

2. Add the Slider Structure: Create a container with the following structure:

Customization Options

Slider Settings

Add these options to the dv-slider attribute:

• loop / no-loop = Enable/disable infinite looping (default: no-loop)
• draggable / no-draggable = Enable/disable mouse drag (default: draggable)
• drag-free / no-drag-free = Enable/disable momentum scrolling (default: no-drag-free)
• align-start / align-center / align-end = Slide alignment (default: center)
• start-X = Starting slide index (default: 0)
• speed-X = Animation speed in arbitrary units (default: 10)
• rtl / ltr = Direction of slider movement (default: ltr [left-to-right])

Example: dv-slider="loop align-start speed-15 start-1"

Navigation Elements

• Container: Add class embla to the main slider container
• Slides Container: Add class embla__container to the direct parent of slides
• Slides: Add class embla__slide to each individual slide
• Dots: Add class embla__dots to the dots container (automatically populated)
• Buttons: Add classes embla__button--prev and embla__button--next to navigation buttons

Styling Navigation Dots

To override the dot styles, add a custom style element with the following CSS (keep the !important flags):

.embla__dot {
  background-color: var(--background-card-secondary) !important;
  border-radius: 50% !important;
  width: 1rem !important;
  height: 1rem !important;
  border: 1px solid var(--foreground-border) !important;
  cursor: pointer !important;
}
.embla__dot--selected {
  background-color: var(--foreground-primary) !important;
}

Notes

• The component automatically loads the Embla Carousel library
• Dots are automatically generated based on the number of slides
• Navigation buttons and dots are optional
• The component applies minimal styling to allow for custom designs
• Slides can contain any HTML content including images, text, and other components