jQuery Interactive Cycle Slides Plugin: jQSlid

by Skip McGraff · February 15, 2017

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.

=> Jaw-Dropping WordPress Theme Designs for any type of site (Insanely Popular)

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 the 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 Demo Download Source Code