Pure javascript mobile-first slideshow effect_javascript skills-JS Tutorial-php.cn

Pure javascript mobile-first slideshow effect_javascript skills

WBOY

Release： 2016-05-16 15:34:09

Original

1567 people have browsed it

Brief Tutorial
wallop is a mobile-first pure JavaScript slideshow plugin. This slideshow plug-in is only 4k in size. Its principle is just to add and remove appropriate classes for HTML elements to show and hide them. As for these class styles, you can completely customize them. Features include:
Mobile first
Animation and transition effects are generated using CSS
Lightweight, only 4k size
Highly flexible and scalable
Customizable events and API
No external dependencies

How to use
To use this slideshow plug-in, you first need to introduce the wallop.css and Wallop.min.js files.

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

Copy after login

HTML structure

The basic HTML structure of this slide is as follows. You can add .Wallop-item--current class to the first slide.

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

Copy after login

Initialization plug-in

<script>
 var wallopEl = document.querySelector('.Wallop');
 var slider = new Wallop(wallopEl);
</script>

Copy after login

Add animation effects

This slideshow plug-in does not have animation transition effects by default. If you need to add animation effects, you need to introduce the corresponding wallop-animation.css file and add Wallop--xxxx class to the element. For example, to add a fade effect:

<head>
 <link rel="stylesheet" href="path/to/wallop.css">
 <link rel="stylesheet" href="path/to/wallop-fade.css">
</head>        
<div class="Wallop Wallop--fade">
...
</div>

Copy after login

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
The above are some built-in transition animation types, and you can also customize your own transition animation.
Configuration parameters
Here are some available configuration parameters:
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 slideshow plugin provides some basic methods for button control:
goTo

Allows jumping to the slide at the specified index.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到第二个slide（index从0开始）
Wallop.goTo(1);

Copy after login

Jump to the next slide.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到下一个slide
Wallop.next();

Copy after login

Jump to the previous slide.

var slider = document.querySelector('.Wallop');
var Wallop = new Wallop(slider);
 
// 跳转到前一个slide
Wallop.previous();

Copy after login

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

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

Copy after login

The above is the pure JavaScript mobile-first slideshow effect creation process shared with you. I hope it can help you create more beautiful slideshow effects.