Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

swiffy-slider

Package Overview
Dependencies
Maintainers
2
Versions
14
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

swiffy-slider - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

4

Changelog.md

@@ -0,1 +1,5 @@

## [v1.0.2] - 08-11-2021
- Fix z-index issue with nav and indicators (#1)
## [v1.0.1] - 08-11-2021

@@ -2,0 +6,0 @@

2

dist/js/swiffy-slider.ESM.min.js

@@ -1,2 +0,2 @@

export const swiffyslider=function(){"use strict";return{version:"1.0.1",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const s=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,s))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const s=t.querySelector(".slider-container"),i=t.classList.contains("slider-nav-page"),o=t.classList.contains("slider-nav-noloop"),n=t.classList.contains("slider-nav-nodelay"),l=s.children,r=parseInt(window.getComputedStyle(s).columnGap),a=l[0].offsetWidth+r;let c=e?s.scrollLeft+a:s.scrollLeft-a;if(i&&(c=e?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(r/2+1)&&e){if(o)return;c=0}s.scroll({left:c,behavior:n?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),s=t.parentElement.children.length,i=t.closest(".swiffy-slider"),o=i.querySelector(".slider-container").children.length/s*e;this.slideTo(i,o)},slideTo(t,e){const s=t.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),o=s.children[0].offsetWidth+i,n=t.classList.contains("slider-nav-nodelay");s.scroll({left:o*e,behavior:n?"auto":"smooth"})},onSlideEnd(t,e,s=125){let i;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(e,s)}),{capture:!1,passive:!0})},autoPlay(t,e,s){e=e<750?750:e;let i=setInterval(()=>this.slide(t),e);const o=()=>this.autoPlay(t,e,s);return s&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){o()}),{once:!0})),i},handleIndicators(t){const e=t.querySelector(".slider-container"),s=e.scrollWidth-e.offsetWidth,i=e.scrollLeft/s;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,s=Math.round((t.length-1)*i);for(const e of t)e.removeAttribute("class");t[s].classList.add("active")}}}}();
export const swiffyslider=function(){"use strict";return{version:"1.0.2",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const s=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,s))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const s=t.querySelector(".slider-container"),i=t.classList.contains("slider-nav-page"),o=t.classList.contains("slider-nav-noloop"),n=t.classList.contains("slider-nav-nodelay"),l=s.children,r=parseInt(window.getComputedStyle(s).columnGap),a=l[0].offsetWidth+r;let c=e?s.scrollLeft+a:s.scrollLeft-a;if(i&&(c=e?s.scrollLeft+s.offsetWidth:s.scrollLeft-s.offsetWidth),s.scrollLeft+s.offsetWidth>s.scrollWidth-(r/2+1)&&e){if(o)return;c=0}s.scroll({left:c,behavior:n?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),s=t.parentElement.children.length,i=t.closest(".swiffy-slider"),o=i.querySelector(".slider-container").children.length/s*e;this.slideTo(i,o)},slideTo(t,e){const s=t.querySelector(".slider-container"),i=parseInt(window.getComputedStyle(s).columnGap),o=s.children[0].offsetWidth+i,n=t.classList.contains("slider-nav-nodelay");s.scroll({left:o*e,behavior:n?"auto":"smooth"})},onSlideEnd(t,e,s=125){let i;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(i),i=setTimeout(e,s)}),{capture:!1,passive:!0})},autoPlay(t,e,s){e=e<750?750:e;let i=setInterval(()=>this.slide(t),e);const o=()=>this.autoPlay(t,e,s);return s&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(i)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){o()}),{once:!0})),i},handleIndicators(t){const e=t.querySelector(".slider-container"),s=e.scrollWidth-e.offsetWidth,i=e.scrollLeft/s;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,s=Math.round((t.length-1)*i);for(const e of t)e.removeAttribute("class");t[s].classList.add("active")}}}}();
//# sourceMappingURL=swiffy-slider.ESM.min.js.map

2

dist/js/swiffy-slider.min.js

@@ -1,2 +0,2 @@

const swiffyslider=function(){"use strict";return{version:"1.0.1",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const i=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,i))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const i=t.querySelector(".slider-container"),s=t.classList.contains("slider-nav-page"),n=t.classList.contains("slider-nav-noloop"),o=t.classList.contains("slider-nav-nodelay"),l=i.children,r=parseInt(window.getComputedStyle(i).columnGap),a=l[0].offsetWidth+r;let c=e?i.scrollLeft+a:i.scrollLeft-a;if(s&&(c=e?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft+i.offsetWidth>i.scrollWidth-(r/2+1)&&e){if(n)return;c=0}i.scroll({left:c,behavior:o?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),i=t.parentElement.children.length,s=t.closest(".swiffy-slider"),n=s.querySelector(".slider-container").children.length/i*e;this.slideTo(s,n)},slideTo(t,e){const i=t.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),n=i.children[0].offsetWidth+s,o=t.classList.contains("slider-nav-nodelay");i.scroll({left:n*e,behavior:o?"auto":"smooth"})},onSlideEnd(t,e,i=125){let s;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(e,i)}),{capture:!1,passive:!0})},autoPlay(t,e,i){e=e<750?750:e;let s=setInterval(()=>this.slide(t),e);const n=()=>this.autoPlay(t,e,i);return i&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){n()}),{once:!0})),s},handleIndicators(t){const e=t.querySelector(".slider-container"),i=e.scrollWidth-e.offsetWidth,s=e.scrollLeft/i;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,i=Math.round((t.length-1)*s);for(const e of t)e.removeAttribute("class");t[i].classList.add("active")}}}}();window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{"use strict";swiffyslider.init()});
const swiffyslider=function(){"use strict";return{version:"1.0.2",init(t=document.body){for(const e of t.querySelectorAll(".swiffy-slider"))this.initSlider(e)},initSlider(t){for(const e of t.querySelectorAll(".slider-nav")){const i=e.classList.contains("slider-nav-next");e.addEventListener("click",()=>this.slide(t,i))}for(const e of t.querySelectorAll(".slider-indicators"))e.addEventListener("click",()=>this.slideToByIndicator()),this.onSlideEnd(t,()=>this.handleIndicators(t),60);if(t.classList.contains("slider-nav-autoplay")){const e=t.getAttribute("data-slider-nav-autoplay-interval")?t.getAttribute("data-slider-nav-autoplay-interval"):2500;this.autoPlay(t,e,t.classList.contains("slider-nav-autopause"))}},slide(t,e=!0){const i=t.querySelector(".slider-container"),s=t.classList.contains("slider-nav-page"),n=t.classList.contains("slider-nav-noloop"),o=t.classList.contains("slider-nav-nodelay"),l=i.children,r=parseInt(window.getComputedStyle(i).columnGap),a=l[0].offsetWidth+r;let c=e?i.scrollLeft+a:i.scrollLeft-a;if(s&&(c=e?i.scrollLeft+i.offsetWidth:i.scrollLeft-i.offsetWidth),i.scrollLeft+i.offsetWidth>i.scrollWidth-(r/2+1)&&e){if(n)return;c=0}i.scroll({left:c,behavior:o?"auto":"smooth"})},slideToByIndicator(){const t=window.event.target,e=Array.from(t.parentElement.children).indexOf(t),i=t.parentElement.children.length,s=t.closest(".swiffy-slider"),n=s.querySelector(".slider-container").children.length/i*e;this.slideTo(s,n)},slideTo(t,e){const i=t.querySelector(".slider-container"),s=parseInt(window.getComputedStyle(i).columnGap),n=i.children[0].offsetWidth+s,o=t.classList.contains("slider-nav-nodelay");i.scroll({left:n*e,behavior:o?"auto":"smooth"})},onSlideEnd(t,e,i=125){let s;t.querySelector(".slider-container").addEventListener("scroll",(function(){window.clearTimeout(s),s=setTimeout(e,i)}),{capture:!1,passive:!0})},autoPlay(t,e,i){e=e<750?750:e;let s=setInterval(()=>this.slide(t),e);const n=()=>this.autoPlay(t,e,i);return i&&(["mouseover","touchstart"].forEach((function(e){t.addEventListener(e,(function(){window.clearTimeout(s)}),{once:!0,passive:!0})})),t.addEventListener("mouseout",(function(){n()}),{once:!0})),s},handleIndicators(t){const e=t.querySelector(".slider-container"),i=e.scrollWidth-e.offsetWidth,s=e.scrollLeft/i;for(const e of t.querySelectorAll(".slider-indicators")){const t=e.children,i=Math.round((t.length-1)*s);for(const e of t)e.removeAttribute("class");t[i].classList.add("active")}}}}();window.swiffyslider=swiffyslider,document.currentScript.hasAttribute("data-noinit")||window.addEventListener("load",()=>{"use strict";swiffyslider.init()});
//# sourceMappingURL=swiffy-slider.min.js.map

2

package.json
{
"name": "swiffy-slider",
"description": "Swiffy slider is a touch enabled super lightweight html slider and carousel using browser scroll, css grid and scroll snap align and less than 1.5 kb javascript. Comes in css mode only version",
"version": "1.0.1",
"version": "1.0.2",
"config": {

@@ -6,0 +6,0 @@ "version_short": "1.0"

53

readme.md

@@ -10,3 +10,3 @@ <p align="center">

<p align="center">
Super fast carousel and slider with touch for optimized websites running in modern browsers.
Super fast lightweight carousel and slider with touch for optimized websites running in modern browsers.
<br>

@@ -22,3 +22,3 @@ <a href="https://www.swiffyslider.com/docs/"><strong>Explore Swiffy Slider docs »</strong></a>

[![](https://data.jsdelivr.com/v1/package/npm/swiffy-slider/badge?style=rounded)](https://www.jsdelivr.com/package/npm/swiffy-slider)
![version](https://img.shields.io/badge/Version-1.0.1-green.svg)
![version](https://img.shields.io/badge/Version-1.0.2-green.svg)
[![npm version](https://img.shields.io/npm/v/swiffy-slider)](https://www.npmjs.com/package/swiffy-slider)

@@ -39,2 +39,3 @@ [![CSS gzip size](https://img.badgesize.io/dynamicweb/swiffy-slider/main/dist/css/swiffy-slider.min.css?compression=gzip&label=CSS%20gzip%20size)](https://github.com/dynamicweb/swiffy-slider/blob/main/dist/css/swiffy-slider.min.css)

- Navigate with Touch, Keyboard, trackpad, pen and Mouse - because it is just browser scrolling
- Uses native browser scroll behavior, scroll-snap and CSS grid to provide the best mobile and touch experience

@@ -44,7 +45,6 @@ - Can run in CSS only mode - no js for even better performance

- WCAG friendly - all content is in pure markup and can be annotated accordingly, supports tabbing, keyboard navigation, aria attributing and all what is needed.
- Navigate with Touch, Keyboard, trackpad, pen and Mouse - because it is just browser scrolling
- Setup is done in pure markup and css classes, no scripting required
- No js loading of slides, configuration or initialization
- Vanilla javascript, less than 1.3kb ~110 lines
- Very low overall footprint ~4.5kb in total (css+js gzip'ed)
- Very low overall footprint ~3.5kb in total (css+js gzip'ed)

@@ -61,4 +61,5 @@ <h2> Table of contents</h2>

- [Documentation](#documentation)
- [Introduction](#introduction)
- [Markup structure](#markup-structure)
- [Options](#options)
- [Slider options (CSS Classes)](#slider-options-css-classes)
- [Slider wrapper](#slider-wrapper)

@@ -84,4 +85,4 @@ - [Slider sections](#slider-sections)

```html
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.min.js" defer>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/css/swiffy-slider.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" defer>
<link href="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/css/swiffy-slider.min.css" rel="stylesheet">
```

@@ -111,3 +112,3 @@

## Additional installation options
- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/download/v1.0.1/swiffy-slider-1.0.1-dist.zip)
- [Download the latest release](https://github.com/dynamicweb/swiffy-slider/releases/download/v1.0.2/swiffy-slider-1.0.2-dist.zip)
- Clone the repo: `git clone https://github.com/dynamicweb/swiffy-slider.git`

@@ -168,2 +169,9 @@ - Install with [npm](https://www.npmjs.com/): `npm install swiffy-slider`

### Introduction
Swiffy slider is a wrapper defined in html with slides, navigation and indicators as its children.
All options and behavior is controlled with css classes that is added to the wrapper. No js configuration.
The wrapper is the `.swiffy-slider` element - options to control layout and behavior of slides, navigation and indicators are added to this element.
### Markup structure

@@ -194,4 +202,21 @@ The slider markup is a `.swiffy-slider` wrapper that has 3 sections.

Wether to use buttons or div for the navigating elements, depends on how WCAG needs to be handled.
### Options
### Slider options (CSS Classes)
Options are the css classes that can be added to the `.swiffy-slider` element to control how the slider will look and behave. No config in JS or similar.
The example below use the `.slider-item-show2` option to show 2 slides and `.slider-item-reveal` to reveal part of the next and previous slide. By adding additional classes behavior and layout is controlled.
[Head over to the configurator to try all options](https://swiffyslider.com/configuration/)
```html
<div class="swiffy-slider slider-item-show2 slider-item-reveal">
<ul class="slider-container">
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
</ul>
</div>
```
#### Slider wrapper

@@ -529,3 +554,3 @@ Change behavior and styles on slides, navigation and indicators by adding option css classes to the `.swiffy-slider` wrapper.

```html
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.min.js" data-noinit defer>
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" data-noinit defer>
<script>

@@ -549,3 +574,3 @@ window.addEventListener('load', () => {

```html
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.min.js" data-noinit defer>
<script src="https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.min.js" data-noinit defer>
<script>

@@ -572,3 +597,3 @@ window.addEventListener('load', () => {

<script type="module">
import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.ESM.min.js';
import {swiffyslider} from 'https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js';
window.swiffyslider = swiffyslider;

@@ -583,3 +608,3 @@ window.swiffyslider.init();

window.addEventListener("load", () => {
import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
swiffysliderModule.swiffyslider.init();

@@ -595,3 +620,3 @@ });

window.addEventListener("load", () => {
import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.1/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
import ('https://cdn.jsdelivr.net/npm/swiffy-slider@1.0.2/dist/js/swiffy-slider.ESM.min.js').then((swiffysliderModule) => {
window.swiffyslider = swiffysliderModule.swiffyslider;

@@ -598,0 +623,0 @@ window.swiffyslider.init();

dist/css/swiffy-slider.min.css

Sorry, the diff of this file is not supported yet

dist/css/swiffy-slider.min.css.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc