Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bigcommerce/themes-lib-swipe-fade
https://github.com/bigcommerce/themes-lib-swipe-fade
Last synced: 4 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bigcommerce/themes-lib-swipe-fade
- Owner: bigcommerce
- License: mit
- Created: 2021-06-03T13:01:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T00:45:12.000Z (over 1 year ago)
- Last Synced: 2023-03-12T06:24:57.906Z (over 1 year ago)
- Language: JavaScript
- Size: 991 KB
- Stars: 0
- Watchers: 5
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Bigcommerce Product Image Galleries
Make the product images change. Make them change differently based on screen size.
### Installation
```
npm i --save github:pixelunion/bc-swipe-fade
```
### Usage
```
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}`);
}
});
```
### Options
`el`: A jQuery object of our gallery container.
`callback`: a function to run after each slide change.
### Some sample markup
```
```
The module is classname agnositc but remember to wrap your slides in TWO elements.
### Methods
`.change(index)`: Switch to a slide
`.next()` and `prev()` are available as well.
### Responsiveness
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:
### Important CSS
```
.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;
}
}
}
```
### Navigation
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.
### Todo
- Make use of jquery.trend for handling transition events
- Make fading work for IE8 (opacity)
- Further es6ification
### Further Development
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.