ip-d14-slider v0.0.79

Installation:

Step 1:

Install the ip-slider component as a dependency in the project:

npm install ip-d14-slider 

Step 2:

Import module in script file:

import '../node_modules/ip-d14-slider/dist/ip-slider/ip-slider.esm';

Usage:

To use the component, we make us of tag: As input, we have the following options:

Inputs

• slide-title: represents the title of the slider
• slide-gap: to define the spacing between slides
• is-slide-bullet: this option indicates which bullet is active
• is-previous-next-navigation: the navigation choice for next or previous
• item-to-show: represents the number of items to display
• previous-btn-aria: to go to the previous
• next-btn-aria: to go to the next one
• bullet-btn-aria: represents the bullet of the element to display
• bullet-btn-aria-to: indicates the order and direction of the slide

e.g:

<ip-slider
  slide-title="Slider Title"
  slide-gap="30"
  is-slide-bullet="true"
  is-previous-next-navigation="true"
  item-to-show="3"
  previous-btn-aria="Show previous slides"
  next-btn-aria="Show next slides"
  bullet-btn-aria="Show slides"
  bullet-btn-aria-to="to"
>

Panels content

The slide element should have as attribute slot="slide-1" and value of slide-*

e.g:

<div slot="slide-1"> 
 --content 1--
</div>

<div slot="slide-2"> 
 --content 2--
</div>

<div slot="slide-3"> 
 --content 3--
</div>

Customization:

We have a set of predefined variable used to customisation the slide:

• --ip-slider-primary-color
• --ip-slider-secondary-color
• --ip-slider-font-primary
• --ip-slider-font-secondary

By default, the value of --ip-slider-arrow-border-on-hover is white. To use a different value, set this variable to the desired color:

• --ip-slider-arrow-border-on-hover

To update the values use the following:

ip-slide {
  --ip-acc-primary-color: #006342;
  --ip-acc-secondary-color: #000000;
}