Horizontal Div Slider Jquery Demo

Hi friends, today i am going to show you how to slide horizontally.

If you want to implement in your project you can simply just download the project or copy past the code.

Only thing you need to import is jquery 1.4 or higher version will work. You can give css according to your requirement.

Screen 1

Screen 2

Screen 3

Screen 4

CSS:

<style type="text/css">

        #container

        {

            width: 642px;

            height: auto;

            overflow: hidden;

        }

        #list-container

        {

            overflow: hidden;

            width: 600px;

            float: left;

            border: solid 1px blue;

        }

        .list

        {

            background: #fff;

            min-width: 3400px;

            float: left;

        }

        #arrowR

        {

            background: yellow;

            width: 20px;

            height: 50px;

            float: right;

            cursor: pointer;

            margin-top: 90px;

            text-align: center;

            font-family: Arial;

            font-size: 20px;

            color: #000;

            padding-top: 25px;

        }

        #arrowL

        {

            margin-top: 90px;

            background: yellow;

            width: 20px;

            height: 50px;

            float: left;

            cursor: pointer;

            text-align: center;

            font-family: Arial;

            font-size: 20px;

            color: #000;

            padding-top: 25px;

        }

        .item

        {

            background: red;

            width: 140px;

            height: 240px;

            margin: 5px;

            float: left;

            position: relative;

            text-align: center;

            font-family: Arial;

            font-size: 20px;

            color: White;

        }

    </style>

HTML:

 <div style="width: 100%; height: auto;" align="center">

        <div style="width: 960px; height: auto;">

            <h1 style="color: grey;">

                Horizontal Slider

            </h1>

            <h2 style="color: grey;">

                (Slide When Left and Right button click)</h2>

            <div id="container">

                <div id="arrowL">

                    <

                </div>

                <div id="arrowR">

                    >

                </div>

                <div id="list-container">

                    <div class='list'>

                        <div class='item'>

                            1

                        </div>

                        <div class='item'>

                            2

                        </div>

                        <div class='item'>

                            3

                        </div>

                        <div class="item">

                            4

                        </div>

                        <div class='item' style="background: blue;">

                            5

                        </div>

                        <div class='item' style="background: blue;">

                            6

                        </div>

                        <div class='item' style="background: blue;">

                            7

                        </div>

                        <div class="item" style="background: blue;">

                            8

                        </div>

                        <div class="item" style="background: green;">

                            9

                        </div>

                        <div class="item" style="background: green;">

                            10

                        </div>

                        <div class="item" style="background: green;">

                            11

                        </div>

                        <div class="item" style="background: green;">

                            12

                        </div>

                        <div class="item" style="background: pink;">

                            13

                        </div>

                        <div class="item" style="background: pink;">

                            14

                        </div>

                        <div class="item" style="background: pink;">

                            15

                        </div>

                        <div class="item" style="background: pink;">

                            16

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

Jquery: 

<script src="Javascript/jquery-1.7.2.min.js" type="text/javascript"></script>

  <script type="text/javascript">

        $(document).ready(function() {

            var $item = $('div.item'), //Cache your DOM selector

            visible = 4, //Set the number of items that will be visible

            index = 0, //Starting index

            endIndex = ($item.length / visible) - 1; //End index

            $('div#arrowR').click(function() {

                debugger;

                if (index < endIndex) {

                    index++;

                    $item.animate({ 'left': '-=600px' });//Set width of your div here

                }

            });

            $('div#arrowL').click(function() {

                if (index > 0) {

                    index--;

                    $item.animate({ 'left': '+=600px' });//Set width of your div here

                }

            });

        });        

    </script>

Download Link: 

Download Complete Project 

 

Enjoyed this post? Share and Leave a comment below, thanks! :)