blogspot visit counter

Tuesday 16 July 2013

Image slider in asp net

Image slider in asp net
Introduction :- 
 In this Post i am explain how i can implement the slider in asp.net.This is very easy to implement the slider in asp.net.

Description : -

In my previous post i have explained  implement the drop down menu using jquery. Here i am explain implement the j query slider in asp.net .

In this Post first we  include the  .js and .css file in our page .Image as show below


Inculde .js and .css  on asp.net page as shown below



<head runat="server">
    <title>Slider in asp.net</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="Styles/coin-slider.js"></script>

    <link rel="stylesheet" href="Styles/coin-slider-styles.css" type="text/css" />

    <link rel="stylesheet" href="Styles/coin-slider-styles.css" type="text/css" />
</head>

In This  slider you can set the width and height of the slider image as shown below
You can control the speed and delay of image and set width and height according to you web page this script write in jqueryslider.js .Full Source Code You Can Download link are give below


$.fn.coinslider.defaults = {
        width: 700, // width of slider panel
        height: 200, // height of slider panel
        spw: 7, // squares per width
        sph: 5, // squares per height
        delay: 1000, // delay between images in ms
        sDelay: 30, // delay beetwen squares in ms
        opacity: 0.7, // opacity of title and navigation
        titleSpeed: 500, // speed of title appereance in ms
        effect: '', // random, swirl, rain, straight
        links : true, // show images as links
        hoverPause: true, // pause on hover
        prevText: 'prev',
        nextText: 'next',
        navigation: true, // show/hide prev, next and buttons
        showNavigationPrevNext: true,
        showNavigationButtons: true,
        navigationPrevNextAlwaysShown: false
    };

Complete code as shown below



<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Slider in asp.net</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="Styles/coin-slider.js"></script>

    <link rel="stylesheet" href="Styles/coin-slider-styles.css" type="text/css" />

    <link rel="stylesheet" href="Styles/coin-slider-styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <center>
    <div id="games">
    <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/1.jpg" alt="http://dotnethubs.blogspot.in" /></a>
     <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/2.jpg"alt="http://dotnethubs.blogspot.in"  /></a>
      <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/3.jpg"  alt="http://dotnethubs.blogspot.in" /></a>
       <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/4.jpg"  alt="http://dotnethubs.blogspot.in" /></a>
        <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/5.jpg" alt="http://dotnethubs.blogspot.in"  /></a>
         <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/6.jpg"  alt="http://dotnethubs.blogspot.in" /></a>
         <a href=http://dotnethubs.blogspot.in target="_blank"><img src="img/7.jpg"  alt="http://dotnethubs.blogspot.in" /></a>
    </div>
    </center>
    </form>

    <script>
        $('#games').coinslider();
        </script>
</body>
</html>



Download sample code attached







1 comment:

Related Posts Plugin for WordPress, Blogger...