How to implement carousel image slider in asp net using flexisel responsive jquery - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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. 

What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+

3 comments

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

Hi ,pls share the stylesheet which u hv refered

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


EmoticonEmoticon