Weebly Tricks #52 - Card Deck Slideshow

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.

CLICK HERE FOR LIVE DEMO

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>

This above code contains the necessary files and settings to make your slideshow working. You need to change/ edit the following:

Red marked text = replace it with your own website address.

Green marked text = define the dimension of your photos/ text box.

And on the last part are the settings for your slideshow which has the values need to be edited according to your preferences. You may visit the code source on the demo page for the whole details of these settings.

After editing your page head code, click “save and edit” button.

3. To begin with your HTML mark up, drag an “embed code” element  to your page and paste the following code:

<div id="demo1" class="stackcontainer">

    <div class="inner">
        <div>
         Here is a tutorial on how to adjust or remove the gaps between photos either vertically or horizontally. At some rare circumstances, you may want to make a bigger picture out of smaller ones. The goal to this is the ability to click each smaller photo while still visualizing the bigger one. By removing the spaces or gaps on each photo, you can experiment the appearance of your images.
        </div>
    </div>
 
    <div class="inner">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6YVt-5N2wQ0OR6uDZxRshYHaXVbjSUKzCgeULvpsIFR_1RvBmQA8lIaLl2d5qBi7-O19H0d7eaVYgCycjM9mbfDkDRmSVCF5P9i6XG6YgWbSz2UpFa-h5t4SQYrsayQ0F3FNg6d8Df27n/s1600/Adjusting++Removing+Gaps+Between+Images+++MY+WEEBLY+TRICKS.png" />
    </div>
 
    <div class="inner">
        <div>
        Recently, I made a tutorial "Free Footer for Free Weebly Accounts", now here comes the level 2 for that. Another interesting footer trick from Tutorialzine called "Slide-Out Footer" because it only shows fully when you scroll last to your site's bottom. This is another alternative footer for Free Users in Weebly since it only requires styling. Time to make your Weebly even better.
        </div>
    </div>
 
    <div class="inner">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR0ggrhhyX7GISRXY09ESu_tlIdIxbRZSXjp3Gi48sfsDwUDj1cLHV3BI_573fspkmFN39npZJ8N7Kaiq1mNYXRXTjiO6Nc-6DO-9jLJt8_Z9C9xVtSHMpP84ZVXa0zUHju6cMPUmAP5sQ/s1600/Slide-Out+Footer+for+Free+Weebly+Accounts.jpeg" />
    </div>
 
    <div class="inner">
        <div>
        Your next content here.....
        </div>
    </div>

</div>

<div style="margin-top:1em; margin-left:0px">
<a href="javascript:demo1.navigate('prev')">Previous Slide</a> / <a href="javascript:demo1.navigate('next')">Next Slide</a>
</div>

The code above uses same contents as seen on the demo page. There are five contents for the slideshow wrap inside the DIV “inner”. You may want to use photos or paragraph style. I highlighted in yellow a DIV for a single content. 

Once you’re done editing your HTML, you may want to center it by using Weebly’s built-in for centering codes. Simply click anywhere on the code and click the center alignment on a small window that will pop up.

There you go! You’re done with the tutorial. Please follow same steps on the real page you want to edit and tell me if it works!

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!