Home > Article > Web Front-end > Pure javascript mobile-first slideshow effect_javascript skills

Pure javascript mobile-first slideshow effect_javascript skills

WBOYOriginal: 2016-05-16 15:34:091533browse

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>

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>

Initialization plug-in

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

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>

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

Jump to the next slide.

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

Jump to the previous slide.

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

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

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Jquery effect collection for creating computer health examination score special effects with source code download_jqueryNext article：Jquery effect collection for creating computer health examination score special effects with source code download_jquery

See more

Pure javascript mobile-first slideshow effect_javascript skills

Related articles