/slick

HTML, Sass, and JS for the creation of a slider component (can be used to create carousels).

Primary LanguageSCSSGNU General Public License v3.0GPL-3.0

Slider component

Sliders are navigational components which can be used in conjunction with the band switcher layout to create a carousel effect on your page.

Traditional carousel slider as a full band

Screenshot 2022-12-11 at 10 14 35 PM

Carousel-style slider inside a card

Screenshot 2022-12-11 at 10 12 35 PM

Button-driven slider as a full band

Screenshot 2022-12-11 at 10 13 47 PM

Click here to view the demos

Building the slider

Sliders have 3 navigation styles to choose from (they can also be used together):

  • [data-nav-style="arrows"] Arrows
  • [data-nav-style="text"] Clickable boxes with descriptive text
  • [data-nav-style="circles"] Clickable circles with or without text

[data-slide-id]

  • This attribute connects the navigational elements to the corresponding content that it toggles between.
  • Any string can go in here as long as it does not contain spaces or periods.
  • This appears on the .slider-nav and the .switcher-body elements and must be identical or the content change will not trigger.

[data-active]

  • This attribute can be either true or false; it indicates which navigational element is styled in the active state (i.e., filled in circle or if a directional arrow is visible).
  • Only one navigational element should be set to active in the set.

[data-slide-to]

  • This determines which content item this navigational element will slide to, updated by JS after a selection is made

[data-direction]

  • Specific to arrows, this determines which direction through the content we are navigating.
  • Valid values are prev and next