TUTORIAL LESSON 2: Picture Slideshow

Difficulty rating: 3/5

Description:

Step 1: Installation

To start you need to download Cycle2 from: Cycle2 & remember to add the jQuery Library link to your HTML page, jQuery before the closing body tag. Just like in tutorial 1.

Step 2: Import cycle2.min.js

Include jquery.cycle2.min.js add the script over to you scripts folder & before closing body tag.


    <script src="scripts/jquery.cycle2.min.js"></script>

Step 3: Implement Content...

Now in your HTML add pictures to showcase & CSS styles


HTML


            <div class="cycle-slideshow"
            data-cycle-timeout="200">
            <img src="images/cat1-600.jpg">
            <img src="images/cat2-600.jpg">
            <img src="images/cat3-600.jpg">
            <img src="images/cat4-600.jpg">
            <img src="images/cat5-600.jpg">
            <div class=cycle-pager">
            </div>
            </div>
        
        

CSS


            .cycle-slideshow  {
                width: 300px;
                height: 300px;
                border: 2px dashed #E5F6F5;;
                }


            .cycle-pager {
                width: 100%;
                height: 50px;
                position: absolute;
                text-align: center;
                overflow: hidden;
                }


            .cycle-pager span {
                width: 26px;
                height: 50px;
                display: inline-block;
                color: rgba(137,192,150,1);
                cursor: pointer;
                }

            .cycle-pager span.cycle-pager-active {
                 color: rgba(255,147,104,0.7);
                }
        
        

Step 4: Javascript !?!

To make the slideshow you do not need to edit any Javascriot of jQuery because the plugin does it all.