ASP.NET AND SQL SERVER: Image slider in asp.net using jquery

create simple drop down menu using jquery

Categories :- Image Slider In asp.net with example

Introduction : -

This is very easy to implement the slider in asp.net .In my previous article i have explained very nice example for implement the slider in asp.net.

This is very simple and easy to use slider in our web page. in this post you can adjust the width and height as well as time delay of image

In this article you have to include a one .js file like this

Jquey Function is like this

Complete Source As shown below

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
     <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <style type="text/css">
        #slideshow #slideshowWindow
        {

    width:512px;
    height:200px;
    margin:0;
    padding:0;
    position:relative;
    overflow:hidden;
        }

    #slideshow #slideshowWindow .slide {
    margin:0;
    padding:0;
    width:512px;
    height:384px;
    float:left;
    position:relative;
        }
   </style>

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

            var currentPosition = 0;
            var slideWidth = 600;
            var slides = $('.slide');
            var numberOfSlides = slides.length;
            var slideShowInterval;
            var speed = 2000;

            slideShowInterval = setInterval(changePosition, speed);

            slides.wrapAll('<div id="slidesHolder"></div>')

            slides.css({ 'float': 'left' });

            $('#slidesHolder').css('width', slideWidth * numberOfSlides);

            function changePosition() {
                if (currentPosition == numberOfSlides - 1) {
                    currentPosition = 0;
                } else {
                    currentPosition++;
                }
                moveSlide();
            }

            function moveSlide() {
                $('#slidesHolder')
                .animate({ 'marginLeft': slideWidth * (-currentPosition) });
            }

        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div id="slideshow">
    <div id="slideshowWindow">

        <div class="slide">
            <img src="img/1.jpg" alt="http://dotnethubs.blogspot.in"/>
        </div>

        <div class="slide">
            <img src="img/2.jpg" alt="http://dotnethubs.blogspot.in"/>
        </div>

        <div class="slide">
            <img src="img/3.jpg" alt="http://dotnethubs.blogspot.in"/>
        </div>

        <div class="slide">
            <img src="img/4.jpg" alt="http://dotnethubs.blogspot.in"/>
        </div>

    </div>
</div>
</center>
    </form>

</body>
</html>

Download sample code attached

ASP.NET AND SQL SERVER

Pages

Tuesday, 16 July 2013

Image slider in asp.net using jquery

2 comments: