Tuesday, January 12, 2016

How to implement carousel image slider in asp net using flexisel responsive jquery

In this article I am going to explain how to implement carousel image slider in asp net using flexisel responsive jquery. 


Description:
To implement this functionality I am using flexisel responsive jquery plugin.

Implementation:
Add the script and style in head section of webform.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.flexisel.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script>
        $(window).load(function () {
            $("#imagecarousel").flexisel({
                visibleItems: 4,
                animationSpeed: 1000,
                autoPlay: true,
                autoPlaySpeed: 3000,
                pauseOnHover: true,
                enableResponsiveBreakpoints: true,
                responsiveBreakpoints: {
                    portrait: {
                        changePoint: 480,
                        visibleItems: 1
                    },
                    landscape: {
                        changePoint: 640,
                        visibleItems: 2
                    },
                    tablet: {
                        changePoint: 768,
                        visibleItems: 3
                    }
                }
            });
        });
</script> 

Complete HTML markup of webform:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.flexisel.js" type="text/javascript"></script>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
     <ul id="imagecarousel">
                <asp:Repeater ID="mylist" runat="server">
                    <ItemTemplate>
                        <li><a>
                              <asp:Image ID="Image1" runat="server" Width="150px" ImageUrl='<%# Eval("PhotoPath","~/img/{0}") %>' /><br />
                             <asp:Label ID="lbl" runat="server" Text='<%# Bind("photoname") %>'></asp:Label>
                        </a></li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
    </div>
    <script>
        $(window).load(function () {
            $("#imagecarousel").flexisel({
                visibleItems: 4,
                animationSpeed: 1000,
                autoPlay: true,
                autoPlaySpeed: 3000,
                pauseOnHover: true,
                enableResponsiveBreakpoints: true,
                responsiveBreakpoints: {
                    portrait: {
                        changePoint: 480,
                        visibleItems: 1
                    },
                    landscape: {
                        changePoint: 640,
                        visibleItems: 2
                    },
                    tablet: {
                        changePoint: 768,
                        visibleItems: 3
                    }
                }
            });
        });
</script> 
    </form>
</body>
</html>

Build and run the project.



DEMO:

How to implement carousel image slider in asp net using flexisel responsive jquery

   In this article we have learn how to implement carousel image slider in asp.net. I hope you enjoyed this article. Please post you comment, query and feedback about this article. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email. 

3 comments:

  1. Hi Administrator,
    I looking for download source of post, but I don't see it, could you share source help to me.

    ReplyDelete
  2. Hi ,pls share the stylesheet which u hv refered

    ReplyDelete
    Replies
    1. I have upload the CSS and JS files. Now you can download.

      Delete