Ten Cute Track#3

If you are bored of slideshows showing same effects from left to right, you should check this awesome Card Deck Slideshow from Dynamic Drive. The title describes the thing, each div unhinged from a specified point to uncover the next one giving an over all effect of “uncovering cards” or "falling leaves". Card Deck Slideshow supports both images and paragraphs. There are lots of features to this slideshow but I only copied one sample and simplify it.

1. The first thing you need to do is to save the following files into your computer. Simply right click on it and choose “save link as”.

carddeckslideshow.js
carddeckslideshow.css

Now upload those files on your template by going to Weebly > Design > Edit CSS/HTML > Upload New Files > select the two file you’ve just downloaded. Save your template.

2. To understand better, create a normal page with no header and name it “Card Test”. Open the advance settings of that page. To do that simply go to Pages > click Card Test on the left > click advance settings on the right > scroll down and on the header code box, paste the following codes:

<link rel="stylesheet" href="http://myweeblytricksdemo.weebly.com/files/theme/carddeckslideshow.css" />

<style>

.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}

.stackcontainer{
margin: 10px;
}

#demo1{
width: 300px !important;
height: 300px !important;
margin-left: 0px;
}

#demo1 h4{
margin: 0;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="http://myweeblytricksdemo.weebly.com/files/theme/carddeckslideshow.js">

/*
* 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.
*/

</script>

<script>

var demo1 = new carddeckslideshow({
    id: 'demo1',
    autoplay: true,
    cycles: 2,
    persist: false,
    hingepoint: "middle",
    pause: 3000,    
})
</script>

Tweet