Pure JavaScript Move-first slide effect _javascript tips

Brief tutorial
Wallop is a mobile-priority pure JavaScript slide plugin. This slide plugin is only 4k in size, and its rationale is simply to add and remove the appropriate classes for HTML elements to show and hide them, and you can completely customize these class styles. Features are:
Move First
Both animation and transition effects use CSS to generate
Lightweight, 4k size only
High degree of flexibility and scalability
Customizable events and APIs
Without any external dependencies

How to use
using this slide plugin you first need to introduce WALLOP.CSS and Wallop.min.js files.

<link rel= "stylesheet" href= "Path/to/wallop.css" >
<script src= "Path/to/wallop.min.js" ></script >      

HTML structure

The basic HTML structure of the slide is as follows, and you can add slide for the first slide. Wallop-item--current class.

<div class= "Wallop" >
 <div class= "wallop-list" >
  <div class= "Wallop-item" >...</div>
  <div class= "Wallop-item" >...</div>
  <div class= "Wallop-item" >...</div>
  <div class= "Wallop-item" >...</div>
  <div class= "Wallop-item" >...</div>
 </div>
 < Button class= "wallop-buttonprevious" >Previous</button>
 <button class= "Wallop-buttonnext" >next </button>
</div>        

Initializing Plug-ins

<script>
 var wallopel = Document.queryselector ('. Wallop ');
 var slider = new Wallop (Wallopel);
</script>        

Add animation effects

The slide plugin default is no animation transition effect, if you need to add animation effect, you need to introduce the corresponding WALLOP-ANIMATION.CSS file, and add Wallop--xxxx class for the element. For example, to add a fade effect:

Available animation types

The transition animation types available for this slide are:
Wallop--slide
Wallop--fade
Wallop--scale
Wallop--rotate
Wallop--fold
Wallop--vertical-slide
There are some built-in transition animation types, and you can customize your own transition animation.
Configuration Parameters
The following are some of the configuration parameters available:
Buttonpreviousclass: ' Wallop-buttonprevious '
Buttonnextclass: ' Wallop-buttonnext '
Itemclass: ' Wallop-item '
Currentitemclass: ' Wallop-item--current '
Showpreviousclass: ' Wallop-item--showprevious '
Shownextclass: ' Wallop-item--shownext '
Hidepreviousclass: ' Wallop-item--hideprevious '
Hidenextclass: ' Wallop-item--hidenext '
Carousel:true
Method
The Wallop slide plugin provides some basic methods for Button control:
GoTo

Allows you to jump to a slide on the specified index.

var slider = Document.queryselector ('. Wallop ');
var wallop = new Wallop (slider);
 
Jumps to the second slide (index starting from 0)
Wallop.goto (1);        

Next

Jump to the next slide slide.

var slider = Document.queryselector ('. Wallop ');
var wallop = new Wallop (slider);
 
Jump to the next slide
wallop.next ();        

Previous

Jumps to the previous slide slide.

var slider = Document.queryselector ('. Wallop ');
var wallop = new Wallop (slider);
 
Jump to the previous slide
wallop.previous ();        

Event
Wallop sends an event every time the slide changes, it returns a detail object that contains the index and wallop objects of the current slide.

var slider = Document.queryselector ('. Wallop ');
var wallop = new Wallop (slider);
 
Wallop.on (' Change ', function (event) {
 //event.detail.wallopEl
 //=> <div class= "Wallop" >...</ Div>
 
 //Event.detail.currentItemIndex
 //=> number
});        

The above is a pure JavaScript mobile priority for you to share the production process, hoping to help you make more beautiful slide effect.