一款轻量级简单易用的轮播图插件Unsliderjs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Unsliderjs, the simplest carousel slider for JS</title>
<meta name="description"
content="Unsliderjs is a super-simple slider with swipe, slide, and fade animation support.">
<!-- CSS and other pretties -->
<link rel="stylesheet" href="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/css/reset.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/css/site.css">
<link rel="stylesheet" href="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/css/mobile.css" media="(max-width: 640px)">
<link rel="stylesheet" href="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/css/unslider.css">
<!-- Fix viewport -->
<meta name="msapplication-window" content="width=device-width;height=device-height">
<meta name="viewport" content="width=device-width">
<meta name="twitter:card" content="A super-simple slider, powered by CSS and JS">
<meta name="twitter:site" content="@nzb329">
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/js/unslider.js"></script>
</head>
<body>
<main>
<ul>
<li id="welcome" data-nav="Welcome to Unslider">
<div class="wrap vertical">
<h1>Unsliderjs is an ultra-simple <br>JS slider for your website.</h1>
<div class="actions">
<div class="instructions">
<pre><span class="ghost"><!-- The barebones HTML required for Unslider --></span>
<div class="banner">
<ul>
<li>This is my slider.</li>
<li>Pretty cool, huh?</li>
</ul>
</div>
<span class="ghost"><!-- And the relevant JavaScript --></span>
<script src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/path/to/unslider.js"></script> <span class="ghost"><!-- but with the right path! --></span>
<script>Unslider.create('.banner')</script></pre>
</div>
<div class="download">
<p>To get started using Unsliderjs, just download the repos:</p>
<a class="btn" href="#download">Download
<span>(gzip ~8.7kb)</span>
</a>
<p>After more customisation or documentation? Try the navigation above (or below).
It's also a demo of Unslider. The whole site is!</p>
</div>
</div>
</div>
</li>
<li id="demos" data-nav="Demos <span class='amp'>&</span> Usage">
<div class="spaced">
<div class="wrap">
<div class="demo">
<h2>Default usage</h2>
<div class="default-slider">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
</div>
<script>Unslider.create('.default-slider');</script>
</div>
<div class="demo">
<h2>Automatic slider</h2>
<div class="automatic-slider">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
</div>
<script>Unslider.create('.automatic-slider', {
autoplay: true
});</script>
</div>
<div class="demo vertical-slider-wrapper">
<h2>Vertical slider</h2>
<div class="vertical-slider">
<ul>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
</ul>
</div>
<script>Unslider.create('.vertical-slider', {
animation: 'vertical',
autoplay: true,
infinite: true
});</script>
</div>
<div class="demo">
<h2>Automatic fade animation</h2>
<div class="fading-slider">
<ul>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat1.jpg" alt="Cats!"></li>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat2.jpg" alt="Cats!"></li>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat3.jpg" alt="Cats!"></li>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat4.jpg" alt="Cats!"></li>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat5.jpg" alt=">:)"></li>
<li><img src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/img/cat6.jpg" alt="Cats!"></li>
</ul>
</div>
<script>Unslider.create('.fading-slider', {
animation: 'fade',
autoplay: true,
arrows: false
});</script>
</div>
<div class="demo">
<h2>Totally manual slider</h2>
<div class="manual-slider">
<ul>
<li>Slide 0 (first)</li>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5 (last)</li>
</ul>
</div>
<input id="manual" placeholder="Type the slide number (or just first/last) here">
<script>var unslider = Unslider.create('.manual-slider', {
keys: false,
arrows: false,
nav: false
});
//Delay is a custom function
$('#manual').on('change', function () {
unslider.animate($(this).val());
});</script>
</div>
<div class="demo">
<h2>Infinite slider</h2>
<div class="infinite-slider">
<ul>
<li>Slide 0 (first)</li>
<li>Slide 1</li>
<li>Slide 2</li>
<li>Slide 3</li>
<li>Slide 4</li>
<li>Slide 5 (last)</li>
</ul>
</div>
<script>Unslider.create('.infinite-slider', {
infinite: true
});</script>
</div>
</div>
</div>
</li>
<li id="setup" data-nav="Installing <span class='amp'>&</span> Setting Up">
<div class="install-steps">
<ul>
<li>
<div class="wrap vertical">
<h2>Set up your HTML.</h2>
<p>Unslider uses a HTML element to wrap everything in, and puts all the slides
inside that as an <a
href="https://developer.mozilla.org/en/docs/Web/HTML/Element/ul">unordered
list</a>.
</p>
<p>You can put any HTML you'd like inside each slide. Here's an example:</p>
<pre><div class="my-slider">
<ul>
<li>My slide</li>
<li>Another slide</li>
<li>My last slide</li>
</ul>
</div></pre>
</div>
</li>
<li>
<div class="wrap vertical">
<h2>Set up Unslider.</h2>
<p>Import JS file:</p>
<pre>import Unslider from 'unsliderjs';</pre>
<p>Or add a reference to Unslider right before the closing
<code></body></code> tag - like below:
</p>
<pre><span class="ghost"><!-- There'll be a load of other stuff here --></span>
<script src="/path/to/unslider.js"></script> <span class="ghost"><!-- but with the right path! --></span>
<b class="adjustable"></body></b></pre>
</div>
</li>
<li>
<div class="wrap vertical">
<h2>Set up Unslider’s CSS.</h2>
<p>In order to display properly, Unslider needs some styles applied to it. Import
SCSS file:</p>
<pre>@use 'unsliderjs' with (
$dot-nav: false,
$dot-color: #000,
);</pre>
<p>You can also easily add them by linking to the <code>dist/css/unslider.css</code>
file. If you want styled dots as well, link to
<code>dist/css/unslider-dots.css</code> as well.
</p>
<p><span class="new">Note</span> By default, the color of the styled dots is black.
You can manually editing anywhere it says <code>#000</code>.
</p>
<pre><link rel="stylesheet" href="<span class="ghost">/path/to/unslider</span>/dist/css/unslider.css"></pre>
</div>
</li>
<li>
<div class="wrap vertical">
<h2>Tell Unslider what to slide.</h2>
<p>We're nearly there! All we need to do - whether in an external JavaScript file
(if you've got one) or straight in your HTML file (it doesn't matter either way!)
is tell Unslider what element we want to slide.</p>
<p>Since we added the HTML for a slider with a class of <code>my-slider</code>, we
can call the plugin as below.</p>
<pre>
<span class="ghost"><script src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/path/to/unslider.js"></script></span>
<script>
<b class="adjustable">Unslider.create('.my-slider')</b>;
</script>
<span class="ghost"></body></span></pre>
<p>You can add as many sliders as you like - and use any of the <a
href="#methods">methods or options</a> to tweak your slider.</p>
</div>
</li>
</ul>
</div>
<script>
Unslider.create('.install-steps', {
animateHeight: true,
arrows: true,
nav: function (slide, index) {
$('<em />').text(index).prependTo(this.find('h2'));
return index;
}
});
</script>
</li>
<li id="methods" data-nav="Methods <span class='amp'>&</span> Options">
<div class="spaced">
<div class="wrap">
<hgroup>
<h1>Extending Unslider</h1>
<p>Despite being small, Unslider is very flexible and extensible: you can change
pretty much anything via options/settings, methods or callback events - all of which
are documented below.</p>
</hgroup>
<h2>Automatic support</h2>
<dl>
<dt>Right-to-left (RTL) support</dt>
<dd>
<p>Just add <code>dir="rtl"</code> and Unslider will change the slide direction if
needed.</p>
<pre><div class="my-slider" dir="rtl"></div></pre>
</dd>
</dl>
<h2>Methods</h2>
<p>Unslider has a handful of methods you can use to control your slider and two ways you
can use these methods, as shown below.</p>
<pre><span class="ghost">//Assuming we've got a variable set like this...
var slider = Unslider.create('.my-demo-slider');</span>
slider.methodName();
slider.methodName('arguments', 'go', 'here');</pre>
<dl>
<dt>init <em>args: <code>options</code></em></dt>
<dd>Set everything up with the slider. This is called automatically when you set up
<code>Unslider.create()</code> for the first time, but if there's layout problems or
you
want to re-initiate the slider for some reason, you can call it here. The
<code>options</code> variable is an object (see below).
</dd>
<dt>calculateSlides</dt>
<dd>If a slide gets added or removed, you should call this otherwise things'll
probably break.
<pre>var slider = Unslider.create('.my-slider');
<span class="ghost">// I don't like this last slide, let's get rid of it</span>
slider.$context.find('li').last().remove();
<span class="ghost">// Let's recalculate Unslider so it knows what's going on</span>
slider.calculateSlides();
</pre>
</dd>
<dt>start</dt>
<dd>Make the slider move itself between slides. Will use the options object to
determine the delay between slides.</dd>
<dt>stop</dt>
<dd>Stop the slider moving itself between slides. Will stop any auto-playing.</dd>
<dt>destroy</dt>
<dd>Remove the slider and revert the original DOM.</dd>
<dt>initKeys</dt>
<dd>Manually add keyboard shortcut support. Can be used after <code>destroyKeys</code>
to restore keyboard shortcut support, or with <code>{keys: false}</code> in the
options object to add support later on.</dd>
<dt>destroyKeys</dt>
<dd>Remove any keyboard shortcut handlers for the slider.</dd>
<dt>initSwipe</dt>
<dd>Set up swipe functionality manually.</dd>
<dt>destroySwipe</dt>
<dd>Remove swipe support. Does what it says on the tin.</dd>
<dt>setIndex <em>args: <code>to</code></em></dt>
<dd>
<p>Set the current index and navigation for Unslider. <b>This doesn't move the
slider!</b> You can get some goofy results doing this - if you want to move the
slider to a specific slide, I'd recommend you use <code>animate()</code> instead.
</p>
<p>The argument <code>to</code> can be an integer with the index of the slide you
want to set (remember: indexes start at zero!), or the strings
<code>'first'</code> or <code>'last'</code> if you don't know how many slides
there are.
</p>
</dd>
<dt>animate <em>args: <code>to</code>, <code>dir</code></em></dt>
<dd>
<p>Move the slider to a specific slide, update any navigation and fire a
<code>unslider:change</code> event. Use like so:
</p>
<pre><span class="ghost">//Our trusty slider!</span>
var slider = Unslider.create('.slider');
<span class="ghost">//Move to the first slide</span>
slider.animate('first');
<span class="ghost">//Move to the third slide</span>
<span class="ghost">//Remember, slides are zero-indexed so 0 is first slide, 1 is second, etc.</span>
slider.animate(2);
<span class="ghost">//Move to the last slide</span>
slider.animate('last');
<span class="ghost">//Move to the last slide and add a direction</span>
slider.animate('last', 'prev');</pre>
<p>The argument <code>to</code> <b>is required</b> and can be an integer with the
index of the slide you want to set (remember: indexes start at zero!), or the
strings <code>'first'</code> or <code>'last'</code> if you don't know how many
slides there are.</p>
<p>The argument <code>dir</code> <b>is optional</b> and can either be the string
<code>'prev'</code> or <code>'next'</code>. This doesn't do anything, yet.
</p>
</dd>
<dt>next</dt>
<dd>Manually move to the next slide (or the first slide if you reach the last slide).
</dd>
<dt>prev</dt>
<dd>Same thing as <code>.next()</code> but in the other direction. Moves the
slider backwards manually or to the last slide if there's no more behind it.</dd>
</dl>
<h2>Events</h2>
<p>Unslider triggers some event listeners which might be handy for whatever reason, I
guess.</p>
<pre><span class="ghost">//Set up our slider to automatically move every second so we can see what's happening</span>
var slider = Unslider.create('.slider', { autoplay: true, delay: 1000 });
<span class="ghost">//When the slider has been set up, fire the event off.</span>
slider.$context.on('unslider:change', function(event, index, slide) {
alert('Slide has been changed to ' + index);
});
<span class="ghost">//Listen to slide moved</span>
slider.$context.on('unslider:moved', function(event, index, slide) {
alert('Slide has been moved to ' + index);
});</pre>
<h2>Options</h2>
<p>Unslider uses a standard jQuery plugin options object, which looks like the
highlighted example below:</p>
<pre><span class="ghost">Unslider.create('.my-demo-slider', </span>{
settingName: settingValue,
anotherSetting: anotherValue
}<span class="ghost">);</span></pre>
<p>It's not required to have any of these options set — you can leave these all blank
and they'll fall back to the defaults highlighted in the table below.</p>
<dl>
<dt>infinite <em>default: <code>false</code></em></dt>
<dd>Whether to enable infinite loop</dd>
<dt>autoplay <em>default: <code>false</code></em></dt>
<dd>Should the slider move by itself or only be triggered manually?</dd>
<dt>speed <em>default: <code>750</code></em></dt>
<dd>How fast (in milliseconds) Unslider should animate between slides.</dd>
<dt>delay <em>default: <code>3000</code></em></dt>
<dd>If <code>autoplay</code> is set to true, how many milliseconds should pass between
moving the slides?</dd>
<dt>index <em>default: <code>'first'</code></em></dt>
<dd>If this is set to an integer, <code>'first'</code> or <code>'last'</code>, it'll
set the default slide to that position rather than the first slide.</dd>
<dt>keys <em>default: <code>true</code></em></dt>
<dd>Do you want to add keyboard shortcut support to Unslider? This can be set to
either <code>true</code>, <code>false</code>, or an options/keycode object, like so:
<pre>keys: {
prev: 37,
next: 39,
stop: 27 <span class="ghost">//Example: pause when the Esc key is hit</span>
}</pre>
This can be useful if you want to extend the functionality built-in to Unslider.
</dd>
<dt>nav <em>default: <code>true</code></em></dt>
<dd>
<p>Do you want to generate an automatic clickable navigation for each slide in your
slider?</p>
<p>You can over-ride what appears in each link by adding a
<code>data-nav="nav title"</code> parameter to each slide element (replacing 'nav
title' with whatever you'd like the title to be).
</p>
<p>If you want to add dot-navigation to a slide, simply include
<code>unslider-dots.css</code> to your CSS file.
</p>
<p><span class="new">New</span> You can also provide a function to calculate the
slide label:</p>
<pre>nav: function(index, label) {
<span class="ghost">//$(this) is the current index slide</span>
<span class="ghost">//label is the current label</span>
<span class="ghost">//index is the slide index, starting at 0</span>
<span class="ghost">//On the third slide, append " third slide!"</span>
if(index === 2) {
return label + ' third slide!';
}
<span class="ghost">//Only show the number</span>
return index + 1;
}</pre>
</dd>
<dt>arrows <em>default: <code>true</code></em></dt>
<dd>
<p>Do you want to add left/right arrows to your slider? You can style these in your
CSS by writing rules for <code>.unslider-arrow</code> (or alternatively you can
change the HTML string to whatever you like and style that).</p>
<p>This can be set to either <code>true</code>, <code>false</code>, or an options
object. If you set an options object, the default behaviour will be overwritten.
The default object looks like this:</p>
<pre>arrows: {
<span class="ghost">//Unslider default behaviour</span>
prev: '<a class="unslider-arrow prev">Previous slide</a>',
next: '<a class="unslider-arrow next">Next slide</a>',
<span class="ghost">//Example: generate buttons to start/stop the slider autoplaying</span>
stop: '<a class="unslider-pause" />',
start: '<a class="unslider-play">Play</a>'
}</pre>
<p>This option is a bit of a misnomer, as you can set it to generate anything, not
just arrows.</p>
</dd>
<dt>animation <em>default: <code>'horizontal'</code></em></dt>
<dd>How should Unslider animate each slide? Right now, there's three different
animation types:
<ol>
<li><code>'horizontal'</code>, which moves the slides from left-to-right</li>
<li><code>'vertical'</code>, which moves the slides from top-to-bottom</li>
<li><code>'fade'</code>, which crossfades slides</li>
</ol>
</dd>
<dt>selectors</dt>
<dd>
<p>If you're not using an unordered list to display your slider, you'll need to add
a <code>selectors</code> object referencing what elements Unslider should look
for. The <b>container</b> should be the "conveyor belt" that gets moved, and the
<b>slides</b> are - well - the slides.
</p>
<pre>selectors: {
container: 'ul',
slides: 'li'
}</pre>
<p><b>Note:</b> you'll probably also need to update/write custom CSS in order for
Unslider to work. Check the source files for <code>unslider.scss</code> to get a
better idea of what needs styling.</p>
</dd>
<dt>animateHeight <em>default: <code>false</code></em></dt>
<dd>Should Unslider animate the height of the container to match the current slide's
height? If so, set to <code>true</code>.</dd>
<dt>activeClass <em>default:<br><code>'unslider-active'</code></em></dt>
<dd>What class should Unslider set to the active slides and navigation items? Use this
if you want to match your CSS.</dd>
<dt>swipe <em>default:<code>true</code></em></dt>
<dd>Have swipe support? You can set this here with a boolean and always use
initSwipe/destroySwipe later on.</dd>
<dt>swipeThreshold <em>default:<code>0.2</code></em></dt>
<dd>Ratio to trigger swipe to next/previous slide during long swipes.</dd>
<dt>grabCursor <em>default:<code>true</code></em></dt>
<dd>Whether set "grab" cursor when hover on the slider</dd>
</dl>
</div>
</div>
</li>
<li id="download"
data-nav="Downloading <span class='amp'>&</span> Contributing">
<div class="wrap vertical">
<h1>Downloading Unslider</h1>
<p>The latest version of Unslider is open-source and available through GitHub. Any
hotlinked versions may be out of date — make sure to use the latest downloadable
version!</p>
<a class="btn big" href="http://github.com/nzbin/unsliderjs/archive/master.zip">Download
<span>unslider.min.js, 24kb</span></a>
<a class="btn big primary" href="http://github.com/nzbin/unsliderjs">View on Github</a>
<h2>Problems and contributing</h2>
<a class="btn secondary" href="http://github.com/nzbin/unsliderjs/issues">Got any
problems?</a>
<a class="btn secondary" href="https://github.com/nzbin/unsliderjs/discussions">Chat about
Unslider</a>
<a class="btn secondary"
href="http://github.com/nzbin/unsliderjs/blob/master/contributing.md">Want to
contribute?</a>
</h1>
</li>
</ul>
</main>
<script src="https://www.jq22.com/demo/unsliderjs-main202403140030/examples/js/site.js"></script>
</body>
</html>
页:
[1]