Make the product images change. Make them change differently based on screen size.
npm i --save github:pixelunion/bc-swipe-fade
import $ from 'jquery';
import SwipeFade from 'bc-swipe-fade';
let gallery = new SwipeFade({
el: $('.product-slides-container'),
callback: (index, el) {
console.log(`welcome to slide number ${index}`);
}
});
el
: A jQuery object of our gallery container.
callback
: a function to run after each slide change.
<div class="product-slides-container">
<div class="product-slides-wrap">
<div class="product-slide">
<img src="demo/images/photo-1.jpg">
</div>
<div class="product-slide">
<img src="demo/images/photo-2.jpg">
</div>
<div class="product-slide">
<img src="demo/images/photo-3.jpg">
</div>
<div class="product-slide">
<img src="demo/images/photo-4.jpg">
</div>
</div>
</div>
The module is classname agnositc but remember to wrap your slides in TWO elements.
.change(index)
: Switch to a slide
.next()
and prev()
are available as well.
The module will watch for an :after
pseudoelement on the same element with which the module is initialized. If the :after
element has a content: 'swipe';
property, the module will arrange itself as a touch-driven swipe gallery. If not, it will fade. CSS is therefore a little specific:
.product-slides-container {
position: relative;
overflow: hidden;
}
.product-slides-wrap {
position: relative;
overflow: hidden;
}
@media(swiping-breakpoint) {
.product-slides-container {
&:after {
display: none;
content: "swipe";
}
}
.product-slide {
position: relative;
float: left;
width: 100%;
transition: all 0.2s ease;
}
}
@media(fading-breakpoint) {
.product-slide {
position: absolute;
top: 0;
left: 0;
z-index: -1;
opacity: 0;
&.current {
z-index: auto;
opacity: 1;
}
}
}
The module currently does not include any navigation by default. Make use of the callback and public methods to bake your own. Have a look at the demo.
- Make use of jquery.trend for handling transition events
- Make fading work for IE8 (opacity)
- Further es6ification
For debugging or improvements you can run a standalone test version of the module using a very basic node server:
$ npm install
$ npm run serve
This will allow you to make changes to the JS and HTML. To re-compile the scss you'll need to run npm run build
from a separate terminal window after each change.