Fork me on GitHub
Post Format
November 13, 2012

jQuery Interactive Cycle Slides Plugin: jQSlid

jQSlid is a simple jQuery plugin that offers parallel sliding for both content and the navigation. It can be used in various situations where sliding functionality is required. e.g You can use it for creating sliding banners and portfolio sliders with navigation and content sliding in parallel.

Using jQslid

Using jQSlid is pretty simple, just create navigation and content and assign “menu-item” class to each navigation item and “slide” class to each of the slide/page. Finally call the jQslid initializer function. Here are complete steps.

  • Add a reference to latest jQuery script
  • Add a reference to jQSlid.js file

Here is a complete working example of portfolio with jQSlid

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <title>jSlid - Interactive Cycle Slides</title>
    <link href="assets/style/style.css" rel="stylesheet" type="text/css" />
    <script src="assets/js/jquery-1.6.min.js" type="text/javascript"></script>
    <script src="assets/js/jqSlid.js" type="text/javascript"></script>

    <style type="text/css">
        #header
        {
            overflow: hidden;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function () {

            $('body').jQSlid({ navWrapper: '#navigation', sliderWrapper: '#content' });
        });

    </script>
</head>
<body>
    <div id="header">
        <ul id="navigation" class="clearfix">
            <li class="menu-item">
                <h2>
                    <a rel="#home" href="index.html#home">Home<sup class="slide-no"> —
                        1</sup></a></h2>
            </li>
            <li class="active menu-item">
                <h2>
                    <a rel="#portfolio" href="index.html#portfolio">Portfolio<sup class="slide-no">
                        — 2</sup></a></h2>
            </li>
            <li class="menu-item">
                <h2>
                    <a rel="#resume" href="index.html#resume">Resume<sup class="slide-no"> —
                        3</sup></a></h2>
            </li>
            <li class="menu-item">
                <h2>
                    <a rel="#contact" href="index.html#contact">Contact<sup class="slide-no"> — 4</sup></a></h2>
            </li>
        </ul>
    </div>
    <div id="content" class="clearfix">
        <div id="home" class="slide clearfix">
            This is home
        </div>
        <div id="portfolio" class="active slide clearfix">
            Potfolio Here
        </div>
        <div id="resume" class="slide clearfix">
            Resume Here
        </div>
        <div id="contact" class="slide clearfix">
            Contact here
        </div>
    </div>
    <div id="footer">
    </div>
</body>
</html>

View DemoDownload Source Code

No related posts.

7 comments

  1. Pingback: 40+ Free and Fresh jQuery Plugins and Tutorials

  2. Pingback: » 40+ Free and Fresh jQuery Plugins and Tutorials - Afghan Graffiti | Resource

  5. Pingback: 18 Latest & Useful jQuery Plugins For Designers & Developers « The Creative Project

Leave a Reply

Required fields are marked *.

*