Description :

Hi Every one, today we are going to see how to create Jquery Image Slider Web part in SharePoint. One of my reader requested that how can we use Jquery image slider in SharePoint 2013, we can achieve it in lot of different ways one way is using custom webparts and second way is content editor web part. Now we are going to how we can do it with custom web part.  

1.  How to create a Visual Web Part in SharePoint 2010 / 2013 ?
2. How to added a SharePoint Mapped files in a Web Part ?
3. How to Deploy the Visual Web Part into SharePoint 2010 / SharePoint 2013 ?
4. How to Add a Custom Web Part into SharePoint 2010 / SharePoint 2013 page ?

 

Step 1 :

1. Created a visual studio web project.
2. Select the SharePoint Solutions template such as SharePoint 2010 or SharePoint 2013 - Empty Project.
3. Give a name to project and click Ok.

 

Step 2 :

1. Enter the site url
2. Select the type of the solution as a farm solution.
3. Visual Web Part cannot be a sandboxed, as it needs to work outside the sandbox in order to load the underlying user control for the Visual Web Part.
4. Click finish

 

Step 3 :

1. Now we are about to add a visual web part to our project.
2. Right click on project and Select Add -> New Item -> Visual Web Part.
3. Give a name to it. In my case it's jquerySlider and then click on Add button.

 

Step 4 :

 

Step 5 :

1. Please skip this step i am just let you know how we can use this option to add some stuff to our project very easily.
2. So for our project we need jquery library and image slider library.
3. We can add the jquery library using Manage NuGet Packages.

 

Step 6 :

1. Now we are going to add Layouts folder to our project.
2. We are going to use the Layouts folder for keeping our jquery files such as jquery, image slider libraries and custom jquery file.
3. Now we are going to add script folder to Layouts/JquerySliderWebPart folder.
4. Just right click on /Layouts/JquerySliderWebPart folder and select Add -> New Folder and named as Scripts.
5. Then add our jquery-1.9.1.min.js, jssor.slider.min.js and customJavaScript1.js file to /Layouts/JquerySliderWebPart/Scripts folder.

Step 7 :

Step 8 :

Step 9 :

 

Step 10 :

  [javascript] jQuery(document).ready(function ($) { var options = { $AutoPlay: true }; var jssor_slider1 = new $JssorSlider$('slider1_container', options); }); [/javascript]

   

Step 11 :

1. Now add SharePoint Images mapped folder to our project by right click on the project ->Add -> SharePoint "Images" Mapped Folder
2. Add your images to Images/JquerySliderWebPart/ folder.

Step 12 :

Step 13 :

 

1. Here the logic is that in code is First we added jquery-1.9.1.min.js
2. Then we added jssor.slider.min.js - it's jquery image slider library
3. Then we added CustomJavascript1.js - Here we initialized the jquery image slider options and bind jssor slider to "#slider1_container" div in jquerySlider.ascx.
4. That's it. When ever a new page load happens then the page loads jquery, jssor.slider and finally loads our CustJavaScript1.js
5. So the code in CustomJavaScript1.js will pick the images in "#slider1_container" div and starts the image sliding.

[csharp] <%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="jquerySlider.ascx.cs" Inherits="JquerySliderWebPart.jquerySlider.jquerySlider" %> <script type="text/javascript" src="../_layouts/JquerySliderWebPart/scripts/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../_layouts/JquerySliderWebPart/scripts/jssor.slider.min.js"></script> <script type="text/javascript" src="../_layouts/JquerySliderWebPart/scripts/CustomJavaScript1.js"></script> <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"> <!-- Slides Container --> <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;"> <div><img u="image" src="../_layouts/images/JquerySliderWebPart/02.jpg" /></div> <div><img u="image" src="../_layouts/images/JquerySliderWebPart/03.jpg" /></div> </div> </div> [/csharp]

Step 14 :

1. Just click on deploy and enjoy the jQurey Image Slider.

Step 15 :

1. Now are going to see how to add web part to SharePoint page.
2. Open the SharePoint site and Navigate to a page where you want to display your web part and then click on edit button of page.
3. Then click on Insert - > Web Part

   

Step 16 :

1. Our web part will always resides in custom categories.
2. So Click on Custom in categories tab -> Select our jQuereySliderWebPart -> Click on Add.

Step 17 :

1. Finally your out put will be here :-)