A smooth lightweight slider for presenting products
https://chaoste.github.io/product-slider
To start working with product-slider right away, there's a a CDN available to serve the files as close, and fast as possible to your users:
You can also download the code with the following link:
Just add a link to the css file in your <head>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/product-slider/product-slider.min.css"/>Then, before your closing <body> tag add
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/product-slider/product-slider.min.js"></script># Bower
bower install --save product-slider
# NPM
npm install product-sliderTo define the content of the slides, you can write it down as a short HTML snippet:
<div id="my-slider">
<div>
<img src="Artist 1 - Song 1.jpg"></img>
</div>
<div>
<img src="Artist 1 - Song 2.png"></img>
</div>
<div>
<img src="Artist 2 - Song 1.jpeg"></img>
</div>
</div>To transform this into a product-slider, you have to call the JQuery plugin on this element.
$('#my-slider').productSlider()If you want to change the preview element, you can rewrite the input code like this:
<div id="my-advanced-slider">
<div>
<a class="content" href="https://product-webpage.com">
<img src="Artist 1 - Song 1.jpg"></img>
</a>
</div>
<!-- ... -->In this case we want to add a link to the preview image and its description block. If you add outer tags to the preview image, you have to add the class "content", so the product-slider recognizes your element.
For editing he description you can only change the content within the <span> element.
It's also possible, to split up the logic of the description element and the product preview.
<div id="my-advanced-slider-2">
<div>
<a class="content" href="https://product-webpage.com">
<img src="picture.jpg"></img>
</a>
<span class="description">
<a href="https://product-webpage.com">
Artist 1 - Song 1
</a>
</span>
</div>
<!-- ... -->| Option | Type | Default | Description |
|---|---|---|---|
| previewHeight | int [px] | 450 | Height of the upper preview container |
| slideWidth | int [px] | 300 | Width of the centered product covers |
| navbarHeight | int [px] | 150 | Height of the navigation bar |
| animationTime | int [ms] | 400 | Transition time for almost all css changes |
| autoplay | int [ms] | 3000 | Waiting time until the next slide is shown (value <= 0 -> Disable autoplay) |
| stopOnMouseHover | boolean | true | If the mouse is on the upper container the carousel stops |
| delayOnClick | int [ms] | 2000 | After manually selecting a product wait an additional time, until the carousel goes on |
| zIndex | int | 10 | z-index attribute of the background (slide and description have zIndex + 1) |
$('#my-slider').productSlider({
animationTime: 5000,
})You're also able to change attributes, after you already created a product-slider.
$('#my-slider').productSlider()
// ...
$('#my-slider').option('animationTime', 200)Note that this will recreate all DOM elements of the product-slider.
| Event | Parameters | Description |
|---|---|---|
| onInitialized | event (null), \n intern hold information of all products | Slider is rebuilt (after creating or updating) |
| onNavChanged | event (null or onClick event), \n { old product, new product } | The shown product changed (caused by any case) |
$('#my-slider').productSlider({
animationTime: 200,
onNavChanged: (event, payload) => {
const { before, current } = payload
console.info(`The shown product changed from ${before.id} to ${current.id}`)
}
})Product-slider works on IE8+ in addition to other modern browsers such as Chrome, Firefox, and Safari.
You may want to use this module within a Node.js environment. You can find a tutorial on how to use jQuery in Node.js here.
var jsdom = require('jsdom')
jsdom.env(
'https://chaoste.github.io',
function (err, window) {
jQuery = require('jquery')(window)
require('jquery-ui')
require('product-slider')
// --- your code ---
}
)jQuery >= 3.1.1 jQuery UI >= 1.11.4
Copyright (c) 2017 Thomas Kellermeier
Licensed under the MIT license.
Next steps after the first version is developed: 2. Publish at plugins.jquery.com and npmjs.com (node and bower module)