Slider ^Optional

Scroll through elements horizontally, with navigation and progress indicator. This component is usually used to create carousel slideshows or to divide long forms into smaller sections.

Features

Automatically creates a navigation with optional styles; "bullets" or "previous and next buttons".
Automatically creates a progress indicator with optional description of the steps.
Can be scrolled automatically.
Can be translated into other languages.

Configuration

Sass file: components/_slider.scss
Javascript file: components/_slider.js
Include the compiled css file in the Html: <link href="/css/components/slider.min.css" rel="stylesheet" />
Include the compiled javascript file in the Html: <script src="/javascript/slider.min.js"></script>

Implementation ^Javascript

Basic

Create a Slider object with default configuration:

const mySlider = new Slider('#mySlider');

Advanced

Create a Slider object with detailed configuration:

const mySlider = new Slider({ element: '#mySlider', gap: '100px', navigationStyle: 'prevNext', steps: ['Introduktion', 'Detaljer', 'Summering'], appendElement: 'a.success', text: { Slide: 'Bild', Previous: 'Föregående', Next: 'Nästa' } });

Examples

View source for Html code.

Default:

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare mattis felis, a bibendum est. Proin imperdiet auctor tristique. Nulla varius tortor velit, id varius ipsum euismod eu. Morbi posuere gravida augue, eget blandit neque iaculis in. Sed finibus sapien sit amet tristique efficitur. Morbi consectetur enim ut erat aliquet tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id lobortis libero. Donec ultricies imperdiet porttitor. Nunc suscipit diam in dui efficitur, quis sagittis risus blandit. Nulla felis lorem, egestas eget ultricies faucibus, rhoncus id erat.

Slide 2

Quisque molestie ante id sem vestibulum, hendrerit tincidunt arcu tincidunt. Aliquam consectetur blandit imperdiet. Morbi consequat lorem tincidunt risus molestie fringilla. Sed vitae pretium mi. Nulla accumsan nisi non nulla iaculis, ac scelerisque nisi ullamcorper. Vivamus dictum laoreet lectus. Nullam finibus lobortis elit nec viverra. Cras volutpat, risus et placerat volutpat, odio nunc ultricies purus, vitae suscipit lacus eros et leo. Nam maximus ullamcorper neque, quis elementum lacus imperdiet vel. Integer sed purus diam. Donec tincidunt bibendum lorem.

Slide 3

Quisque vitae dignissim mauris. Etiam nec nunc tellus. Etiam scelerisque enim in dictum dignissim. Cras lobortis eget metus id dignissim. Morbi rutrum turpis vitae orci aliquam, ac fringilla neque commodo. In nec odio eget nibh dapibus ultrices. Suspendisse tincidunt finibus egestas. Sed euismod justo lacus, id tincidunt justo sodales non.

Slider Optional

Basic

Advanced

Examples

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

Slider ^Optional