You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

ip-d14-slider

Package Overview
Dependencies
3
Maintainers
1
Versions
74
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ip-d14-slider

Stencil Component Starter


Version published
Maintainers
1
Created

Readme

Source

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;
}

FAQs

Package last updated on 13 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc