Slider

Jump To:

Slider/Carousal component that works with the ui/slider.js script

Demos

Image Slider

A standard carousel for cycling through images.

<div class="slider" data-ulu-slider>
  <div class="slider__control-context">
    <ul class="slider__track" data-ulu-slider-track>
      <li class="slider__slide" data-ulu-slider-slide>
        <img src="https://picsum.photos/id/10/800/400" alt="Slide 1">
      </li>
      <li class="slider__slide" data-ulu-slider-slide>
        <img src="https://picsum.photos/id/11/800/400" alt="Slide 2">
      </li>
      <li class="slider__slide" data-ulu-slider-slide>
        <img src="https://picsum.photos/id/12/800/400" alt="Slide 3">
      </li>
    </ul>
    <div class="Slider__controls">
      <button class="button button--icon Slider__control-button Slider__control-button--previous" data-ulu-slider-previous aria-label="Previous Slide">
        <span class="css-icon css-icon--angle-left"></span>
      </button>
      <button class="button button--icon Slider__control-button Slider__control-button--next" data-ulu-slider-next aria-label="Next Slide">
        <span class="css-icon css-icon--angle-right"></span>
      </button>
    </div>
  </div>
  <div class="Slider__nav" data-ulu-slider-nav></div>
</div>

Variables

$config

Variable Type: Map

Module Settings

$config: (
  "background-color" : transparent,
  "margin" : (1rem 0 3rem 0),
  "padding-bottom" : 0,
  "padding-top" : 0,
  "button-offset-x" : null,
  "button-offset-y" : null,
  "button-margin" : 2rem,
  "button-width": 2.5rem,
  "nav-background-color" : transparent,
  "nav-background-color-hover" : "control-background-hover",
  "nav-background-color-selected" : "control-background-active",
  "nav-border-color" : "control-background",
  "nav-border-color-hover" : "control-background-hover",
  "nav-border-color-selected" : "control-background-active",
  "nav-border-radius" : 50%,
  "nav-gap" : 0.2rem,
  "nav-border-width" : 2px,
  "nav-size" :  1rem,
  "nav-margin" : (0.5rem 0),
  
  );

File Information

File: _slider.scss
Group: slider
Type: variable
Lines (comments): 12-31
Lines (code): 33-54

Map Properties

Name	Type	Default	Description
background-color	Color	transparent	Background color for the entire slider section.
margin	Dimension	(1rem 0 3rem 0)	Margin for slider container
padding-top	Dimension	0	Top padding for individual slides.
button-offset-x	Dimension	null	Offsets the control button in from their respective sides.
button-offset-y	Dimension	null	Offsets the control button y
button-margin	Dimension	0.75rem	The margin between the controls and the slide content when using .slider__slide-gap-for-controls
nav-margin	Color	(0.5rem 0)	Margin for nav (dots)
nav-background-color	Color	transparent	The color of the dot when unselected.
nav-background-color-hover	Color	color.get("link")	The color of the dot when hovered.
nav-background-color-selected	Color	color.get("link")	The color of the dot when selected.
nav-border-radius	Dimension	50%	The border-radius of the dot.
nav-border-color	Color	color.get("link")	The border color of the dot.
nav-border-color-hover	Color	color.get("link")	The border color of the dot when hovered.
nav-border-color-selected	Color	color.get("link")	The border color of the dot when selected.
nav-border-width	Dimension	2px	The border width of the dot.
nav-size	Dimension	1rem	The height and width of the dot.
nav-gap	Dimension	0.2rem	Gap between nav items
button-width	Dimension	1rem	The width of the button.

Mixins

set()

Mixin

Change modules $config

File Information

File: _slider.scss
Group: slider
Type: mixin
Lines (comments): 56-59
Lines (code): 61-63

Examples

@include ulu.component-slider-set(( "property" : value ));

Parameters

Name	Type	Description
$changes	`Map`	Map of changes

Require

$config

styles()

Mixin

Output component stylesheet

File Information

File: _slider.scss
Group: slider
Type: mixin
Lines (comments): 74-76
Lines (code): 78-182

Examples

@include ulu.component-slider-styles();

Require

get()

Functions

get()

Function

Get a config option

File Information

File: _slider.scss
Group: slider
Type: function
Lines (comments): 65-68
Lines (code): 70-72

Examples

@include ulu.component-slider-get("property");

Parameters

Name	Type	Description
$name	`Map`	Name of property

Require

$config