npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wavenet/splide

v2.4.21

Published

Splide is a lightweight and powerful slider/carousel without any dependencies.

Downloads

7

Readme

Splide

Splide is a lightweight, powerful and flexible slider and carousel, written in pure JavaScript without any dependencies.

News

  • Transform Splidejs to the organization.
  • Add slideFocus and waitForTransition options.
  • Add type definitions for typescript.
  • React Splide is released.
  • Vue Splide is released.
  • Add resetProgress and throttle options.
  • Breakpoints accept drag and pagination.
  • Add some themes.
  • Grid extension is released.
  • Auto Width is implemented. Each slide can have its own width.
  • Breakpoints accept 'destroy' option.
  • Merge Slides component to Elements.
  • Splide can be destroyed.
  • Add or remove slides dynamically.
  • Video extension is released.
  • URL Hash Navigation extension is released.

Features

  • Pure JavaScript without any dependencies
  • Small size, less than 29kB(11kB gzipped)
  • Flexible and extensible
  • Multiple slides
  • Slide or fade transition by CSS
  • Responsive, supporting breakpoints
  • Accepting CSS relative units, such as vw, %, rem, etc
  • No need to crop images
  • Autoplay with progress bar and play/pause buttons
  • "Right to left" and vertical direction
  • Mouse drag and touch swipe
  • Nested slider
  • Lazy loading
  • Thumbnail slider
  • Accessibility friendly, supporting keyboard control and ARIA attributes
  • Dynamically adding/removing slides
  • Internet Explorer 10

Installation

There are 3 ways to install the Splide on your site.

  • NPM
  • Download
  • CDN

Only the NPM way is explained in the following steps. Visit this page for other methods.

  1. Get the latest version by NPM:
    $ npm install @splidejs/splide
  2. Link to the stylesheet:
    <link rel="stylesheet" href="node_modules/@splidejs/splide/dist/css/splide.min.css">
  3. Write HTML for building a slider:
    <div id="splide" class="splide">
      <div class="splide__track">
        <ul class="splide__list">
          <li class="splide__slide">Slide 01</li>
          <li class="splide__slide">Slide 02</li>
          <li class="splide__slide">Slide 03</li>
        </ul>
      </div>
    </div>
  4. Initialize Splide. The selector accepts an ID, a class name or an Element itself:
    import Splide from '@splidejs/splide';
    new Splide( '#splide' ).mount();
    Note that only the first element will be initialized even if using a class name.

See the Integration section for your Vue or React project.

Options

Changing Options

Pass an object to the second argument of the Splide constructor:

new Splide( '#splide', {
  type   : 'loop',
  perPage: 3,
} );

Or set a data-splide attribute to a root element in a JSON format:

<div id="splide" class="splide" data-splide='{"type":"loop","perPage":3}'>
</div>

Available Options

Here is a list of options and brief explanations. Visit this page for more details.

  • type: Determine a slider type.
  • rewind: Whether to rewind a slider before the first slide or after the last one.
  • speed: Transition speed in milliseconds.
  • rewindSpeed: Transition speed on rewind in milliseconds.
  • waitForTransition: Whether to prevent any actions while a slider is transitioning.
  • width: Define slider max width.
  • height: Define slider height.
  • fixedWidth: Fix width of slides.
  • fixedHeight: Fix height of slides.
  • heightRatio: Determine height of slides by ratio to a slider width.
  • autoWidth: If true, slide width will be determined by the element width itself. This is for a horizontal slider.
  • autoHeight: If true, slide height will be determined by the element height itself. This is for a vertical slider.
  • perPage: Determine how many slides should be displayed per page.
  • perMove: Determine how many slides should be moved when a slider goes to next or previous page.
  • clones: Manually determine how many clones should be generated on one side.
  • start: Start index.
  • focus: Determine which slide should be focused.
  • gap: Gap between slides.
  • padding: Set padding-left/right in horizontal mode or padding-top/bottom in vertical one.
  • easing: Animation timing function for CSS transition.
  • arrows: Whether to append arrows.
  • arrowPath: Change the arrow SVG path.
  • pagination: Whether to append pagination(indicator dots).
  • autoplay: Whether to enable autoplay.
  • interval: Autoplay interval in milliseconds.
  • pauseOnHover: Whether to stop autoplay while a slider is hovered.
  • pauseOnFocus: Whether to stop autoplay while a slider elements are focused.
  • resetProgress: Whether to reset progress of the autoplay timer when resumed.
  • lazyLoad: Enable lazy load for images.
  • preloadPages: Determine how many pages around an active slide should be loaded beforehand. This only works the lazyLoad option is “nearby”.
  • keyboard: Whether to control a slider via keyboard.
  • drag: Whether to allow mouse drag and touch swipe.
  • dragAngleThreshold: The angle threshold for drag.
  • swipeDistanceThreshold: Distance threshold for determining if the action is "flick" or "swipe".
  • flickVelocityThreshold: Velocity threshold for determining if the action is "flick" or "swipe".
  • flickPower: Determine power of flick. The larger number this is, the farther a slider runs by flick.
  • flickMaxPages: Limit a number of pages to move by flick.
  • direction: Slider direction.
  • cover: Whether to convert an img src to background-image of its parent element. height, fixedHeight or heightRatio is required.
  • accessibility: Whether to enable accessibility(ARIA attributes) or not.
  • slideFocus: Whether to add tabindex="0" to visible slides or not.
  • isNavigation: Determine if a slider is navigation for another.
  • trimSpace: Whether to trim spaces before the fist slide or after the last one.
  • updateOnMove: If true, "is-active" class added to the slide element before transition.
  • throttle: Throttle duration for the resize event.
  • breakpoints: Breakpoints definitions.
  • classes: Collection of class names.
  • i18n: Collection of texts for i18n.

Extensions

  • Video: Assign HTML video, YouTube or Vimeo to slides.
  • URL Hash Navigation: Listen to hash change and move a slider to a slide having the hash data attribute.
  • Grid: Create rows and cols in a slider.

Integration

Easy to integrate the Splide slider or carousel into your Vue or React project.

API and Extension

Splide provides some APIs and the way to customize the behaviour programmatically.

License

Splide is released under the MIT license. © 2020 Naotoshi Fujita