Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dynamicdriverepo/carddeckslideshow
https://github.com/dynamicdriverepo/carddeckslideshow
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/dynamicdriverepo/carddeckslideshow
- Owner: dynamicdriverepo
- Created: 2013-05-07T21:38:02.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2013-05-07T23:51:40.000Z (over 11 years ago)
- Last Synced: 2023-04-06T14:06:50.541Z (over 1 year ago)
- Language: JavaScript
- Size: 211 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Card Deck Slideshow #
*Description:* This content slideshow script utilizes CSS3 transform to rotate and "unhinge" each slide to show the next, similar to a stacked pile of cards. At the heart of it all, however, is a versatile slideshow that supports both auto and manual mode, persistence of the last viewed slide, inline or ajax content, and more. The "unhinge" effect works in all browsers that support CSS3 transform, namely, IE10, all modern versions of FF, Chrome, and Safari, including their mobile versions. In non supporting browsers (such as IE9), a standard slide down effect is employed instead.
## Directions ##
*Step 1:* This script uses the following external files:
+ jQuery 1.7 or above (served via Google CDN)
+ carddeckslideshow.js
+ carddeckslideshow.css
*Step 2:* Add the below code to the HEAD section of your page:
.stackcontainer{
margin: 100px 0 10px 0;
}
#demo1{
width: 250px;
height: 200px;
margin-left: 100px;
}
#demo2{
width: 350px;
height: 200px;
}
#demo3 > div.inner{
background: lightyellow;
}
#demo1 h4, #demo3 h4{
margin: 0;
}
/*
* Card Deck Slideshow (c) Dynamic Drive (www.dynamicdrive.com)
* Last updated: May 2nd, 13'
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
*/
var demo1 = new carddeckslideshow({
id: 'demo1',
autoplay: true,
cycles: 2,
persist: false
})
var demo2 = new carddeckslideshow({
id: 'demo2',
hingepoint: 'top right',
fxduration: 1000
})
var demo3 = new carddeckslideshow({
id: 'demo3',
hingepoint: '50% 60%',
source: 'stackedcontents.txt',
fxduration: 2000,
pause: 1000
})
*Step 3:* Then, add the below sample markup to your page:
Coconuts are different from any other fruits because they contain a large quantity of "water" and when immature they are known as tender-nuts or jelly-nuts and may be harvested for drinking. The clear liquid coconut water within is a refreshing drink.
Woodland is a low-density forest forming open habitats with plenty of sunlight and limited shade. Woodlands may support an understory of shrubs and herbaceous plants including grasses. Woodland may form a transition to shrubland under drier conditions.
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
## Card Deck Slideshow set up ##
See script project page for additional details on setup and documentation: