This is the Content-Slider of welt.de
Primary used for Images and responsive Picture-Elements - but not limited to it.
yarn add weltn24-doge
npm install --save weltn24-doge
- Swiper: http://idangero.us/swiper/
- EventEmitter3: https://github.com/primus/eventemitter3
// initialize
const contentSlider = new ContentSlider(<options>, <css-classes>, <swiper-options>);| Option | Type | Description |
|---|---|---|
content |
QuerySelector (string) | the selector of the swipeable content elements |
overlay |
QuerySelector (string) | the selector of the overlay |
bemBlockName |
string | set the block-part of the bem-style css-class name |
swiperBemBlockName |
string | set the block-part of the css-class name for swiper-options |
extractSliderElement |
function | function which returns element to slide |
extractCaption |
function | function which returns the description of the slide |
extractHashnavToken |
function | function which returns the hashnav token |
With this parameter you can overwrite the css classes. They are automatic generated with the options-value bemBlockName.
| Option | Type | Description |
|---|---|---|
overlay |
ClassName (string) | the overlay element (initial hidden) |
overlayModVisible |
ClassName (string) | modifier which indicates if the overlay is visible |
nav |
ClassName (string) | the navigaten bar element |
navPosition |
ClassName (string) | the position indicator |
caption |
ClassName (string) | the caption of the current content element |
captionModVisible |
ClassName (string) | modifier which indicates if the caption is visible |
elementContainer |
ClassName (string) | the container for the swipeable content elements |
wrapper |
ClassName (string) | wrapper around the elements, which will be x/y transformed on swipe |
element |
ClassName (string) | the content element |
icon |
ClassName (string) | icon element |
toggleCaptionIcon |
ClassName (string) | icon to toggle visibility of the caption |
prevIcon |
ClassName (string) | icon to swipe to previous element |
nextIcon |
ClassName (string) | icon to swipe to next element |
closeIcon |
ClassName (string) | icon to close the overlay |
See Swiper API Docs.
- Flowtype (with tcomb + babel-plugin-transform-flow-strip-types)
- webpack (for webpack-dev-server & bundling)
- yarn + npm ( for dependency management and application lifecycle)
- ava (test-runner)
To active IDE support for webflow: Language & Frameworks -> Javascript -> Javascript Language Support: Flow
To start the webpack-dev-server:
npm start
The server will be listen to localhost:8080.
To access the server from network:
npm start -- --host 0.0.0.0
First: Make sure you yarn installed on your system (brew install yarn).
# checkout locally
git clone [email protected]:spring-media/doge.git
# install
cd doge
yarn
# local link
npm link
# go to your target project
cd $target-project
# local link doge
npm link weltn24-doge
npm run lint
To run the tests:
npm test
(this will lint the code, start the ava test-runner, and show code coverage)
To start the test with file-watcher:
npm run test-dev
To only run the code coverage (run npm test otherwise)
npm run coverage
To create the HTML Report:
npm run coverage-html-report
open coverage/index.html
To bundle the library:
npm run build
To automatic build, tag version, push github and publish to npm:
./node_modules/.bin/release-it
yarn add <package>
Install a dev-dependency:
yarn add --dev <package>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent