Horizontal Image Slider

Head Section

<link rel="stylesheet" href="lightslider.css" />

   

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

    <script src="lightslider.js"></script>

CSS

<style>

        ul {

            list-style: none outside none;

            padding-left: 0;

            margin: 0;

        }

        .demo .item {

            margin-bottom: 60px;

        }

        .content-slider li {

            background-color: #ed3020;

            text-align: center;

            color: #FFF;

        }

        .content-slider h3 {

            margin: 0;

            padding: 70px 0;

        }

        .demo {

            width: 800px;

        }

    </style>

Script

<script>

        $(document).ready(function () {

            $("#content-slider").lightSlider({

                loop: true,

                keyPress: true

            });

            $('#image-gallery').lightSlider({

                gallery: true,

                item: 1,

                thumbItem: 9,

                slideMargin: 0,

                speed: 500,

                auto: true,

                loop: true,

                onSliderLoad: function () {

                    $('#image-gallery').removeClass('cS-hidden');

                }

            });

        });

    </script>

HTML

<div class="demo">

       

        <div class="item">

            <ul id="content-slider" class="content-slider">

                <li>

                    <h3>1</h3>

                </li>

                <li>

                    <h3>2</h3>

                </li>

                <li>

                    <h3>3</h3>

                </li>

                <li>

                    <h3>4</h3>

                </li>

                <li>

                    <h3>5</h3>

                </li>

                <li>

                    <h3>6</h3>

                </li>

            </ul>

        </div>

    </div>

Download Source

Next Template