https://github.com/danielmatthew/wholething-slider
Adding dynamic features based on media queries
https://github.com/danielmatthew/wholething-slider
Last synced: about 1 month ago
JSON representation
Adding dynamic features based on media queries
- Host: GitHub
- URL: https://github.com/danielmatthew/wholething-slider
- Owner: danielmatthew
- Created: 2015-05-11T08:56:53.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2015-05-12T15:08:31.000Z (about 11 years ago)
- Last Synced: 2025-01-13T11:50:31.801Z (over 1 year ago)
- Language: CSS
- Size: 148 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
## tbaslider.v2.3.js
- Implemented destroy() method to stop slider; remove CSS etc.
- Fixed previous and next button navigation
- Prev & next transition now instant
- Added hover-based hide and show for next and prev controls
## slideshow_js-mq-v0.5js
- Uses [enquire.js]("//cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.min.js") to detect media queries
- Grabs classes to be applied at each column-breakpoint based on data-attributes
- Adds and remove classes based on media queries being fulfilled
- Only activates tbaSlider when criteria are met
- Calls .destroy() method on tbaSlider when media query is no longer matched
## To implement
- Reference [enquire.js](//cdnjs.cloudflare.com/ajax/libs/enquire.js/2.1.2/enquire.min.js") in document head
- Confirm breakpoints in slideshow
- Confirm element to be 'watched'
- Add data attributes to desired feature: `data-[col1 | col2 | col3 | col4]="feature-layout--xxx`
- Reference slideshow_js at end of template
## To do (if desired??)
- [ ] allow breakpoints to be configured in function argument
- [ ] allow element to be specified in function argument