jQuery Content Slider

This article demonstrates how to slide content automatically or on a click using jQuery in ASP.Net.

You can download jQuery files form here: http://jqueryui.com/

First of all make a new website in ASP.Net and add a new stylesheet and add .js files and give a reference to the page, as in the following:

<link rel="stylesheet" type="text/css" href="css/slider.css" />

    <script src="scripts/jquery.min.js" type="text/javascript"></script>

    <script src="scripts/jquery-ui.min.js" type="text/javascript"></script>         

<script type="text/javascript">

    $(document).ready(function () {

        $("#featured > ul").tabs({ fx: { opacity: "toggle"} }).tabs("rotate", 5000, true);

    });

</script>

Main Div
 

<div id="featured" >

               <ul class="ui-tabs-nav">

               <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" alt="" height=50 width=50 /><span>DropDown Cascading in MVC4 Using Entity Framework</span></a></li>

               <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="images/image2-small.jpg" alt="" height=50 width=50/><span>Paging Sorting in MVC 4</span></a></li>

               <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" height=50 width=50/><span>Unit Testing in MVC 4 Using Entity Framework</span></a></li>

               <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" height=50 width=50/><span>First MVC 4 Mobile Application Using Entity Framework</span></a></li>

             </ul>

 

           <!-- First Content -->

           <div id="fragment-1" class="ui-tabs-panel" style="">

                    <img src="images/image1.jpg" alt="" height=250 width=410 />

                     <div class="info" >

                           <h2><a href="http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-use-full-text-search-in-sql-server-2008/" >How to Use Full Text Search in SQL Server 2008</a></h2>

                           <p>Full-Text Search in SQL Server lets users and applications run full-text queries against character-based data in SQL Server tables. Before you can run full-text queries on a table, the database administrator must create a Full-Text Index on the table.....<a href="http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-use-full-text-search-in-sql-server-2008/" >read more</a></p>

                     </div>

           </div>

 

           <!-- Second Content -->

           <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">

                    <img src="images/image2.jpg" alt="" height=250 width=410 />

                     <div class="info" >

                           <h2><a href="http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-configuresend-sql-server-database-mail/" >Configure and send E-Mail from SQL Server</a></h2>

                           <p>To build high-trafficked scalable web applications, it is recommended not to stuck your email code in the application code. Instead, we can use SQL Server to send all messages and emails. In this article, we will see how to configure your SQL Server 2008 to send emails....<a href="http://www.c-sharpcorner.com/UploadFile/raj1979/how-to-configuresend-sql-server-database-mail/" >read more</a></p>

                     </div>

           </div>

 

           <!-- Third Content -->

           <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">

                    <img src="images/image3.jpg" alt="" height=250 width=410 />

                     <div class="info" >

                           <h2><a href="http://www.c-sharpcorner.com/UploadFile/raj1979/Asp-Net-web-api-crud-operations/" >ASP.NET Web API CRUD Operations</a></h2>

                           <p>What is the ASP.NET Web API? The ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. The ASP.NET Web API is an ideal platform for building REST applications on the .NET Framework...<a href="http://www.c-sharpcorner.com/UploadFile/raj1979/Asp-Net-web-api-crud-operations/" >read more</a></p>

                </div>

           </div>

 

           <!-- Fourth Content -->

           <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">

                    <img src="images/image4.jpg" alt="" height=250 width=410 />

                     <div class="info" >

                           <h2><a href="http://www.c-sharpcorner.com/UploadFile/raj1979/simple-mvvm-pattern-in-wpf/" >Simple MVVM Pattern in WPF</a></h2>

                           <p>The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft which is specialized in the Presentation Model design pattern...<a href="http://www.c-sharpcorner.com/UploadFile/raj1979/simple-mvvm-pattern-in-wpf/" >read more</a></p>

                </div>

           </div>

 

             </div>

Run Application

 

Run the application and you will see the images and content rotating and it will change when you click on the right side image and title.




Image 1.




Image 2.



Image 3.



Image 4.

For more information, download the attached sample application.