Image Slider (From Folder, Without Database) In MVC 4.0

Binding images to a folder means you just have to add a folder name and the rest of the work will be taken care of by the code itself. All we need is a pack of jQuery sliders. As I found one from my hard disk, I will do it with this.

 

Step 1

 

After creating a new project, you have to put all the resources like images, JavaScript, and CSS files into a new solution. We have taken an empty MVC project as a Razor View engine.

 

 

We all can see the assets folder is the resource that we have imported from our HTML jQuery. The img folder in assets is the main folder from which we are fetching the images to create a slider.

 

Step 2

 

As we take an empty project, we have to build a new controller. So, we created a new controller named HomeController and in Models folder, created a new model named Slider.cs.

 

Step 3

 

Now, let's create the Slider.cs file first. It will take two things. One is src (this is the source of the image) and the second one is the title (Title and alt of the image).

1. namespace MVCImageSliderFromFolder.Models  
2. {  
3.     public class Slider  
4.     {  
5.         public string src { get; set; }  
6.         public string title { get; set; }  
7.     }  
8. }  

Step 4

 

Now, it's time for creating the controller. This is the main thing that is used to manage all the images,  and then send that to the View part to show.

 

Before proceeding, we have to discuss the algorithm which is actually happening.

 

Get the Folder Name -> Search all the images (.jpg, .png and others...) -> Make a list of that with source and title -> Send to View for showing the slider.

 

So, let's proceed with searching all the files/images from the desired folder.

1. string[] filePaths = Directory.GetFiles(Server.MapPath("~/assets/img/"));  

In this way, we will get all the files in the folder ~/assets/img. Now, we have to create a List of type Slider to pass this to View. 

1. List<Slider> files = new List<Slider>();  
2. foreach (string filePath in filePaths)  
3. {  
4.       string fileName = Path.GetFileName(filePath);  
5.       files.Add(new Slider{  
6.             title= fileName.Split('.')[0].ToString(),  
7.             src = "../assets/img/" + fileName  
8.       });  
9. }  

Now, in the List files, we have the source and the title of all the files/images present in img folder. Now send this to View by return View(files);.

 

Step 5

 

Now, we still have to do the last part. Bind the model to View part and your slider is ready.

 

First of all, add the resources at the top of the HTML file (Header section).

1. <link rel="stylesheet" href="../assets/bjqs.css">  
2. <link href='http://fonts.googleapis.com/css family=Source+Code+Pro|Open+Sans:300' rel='stylesheet' type='text/css'>  
3. <link rel="stylesheet" href="../assets/demo.css">  
4. <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>  
5. <script src="../assets/js/bjqs-1.3.min.js"></script>  
6. <script src="../assets/js/libs/jquery.secret-source.min.js"></script>  

Now add the slider. As we are dealing with only the slider we don't need to worry about all the other stuff. If it is a full web page, then you can add a Partial View and pass the Model on that and create the slider portion in that Partial View.

 

To create the slider:

1. <div id="banner-fade">  
2.     <ul class="bjqs">  
3.        @foreach (var item in Model)  
4.        {  
5.            <li>  
6.                <img src='@Html.DisplayFor(modelItem => item.src)'  
7.                      title='@Html.DisplayFor(modelItem => item.title)' alt="">  
8.            </li>  
9.        }  
10.     </ul>  
11. </div>  

Write a loop to create the li within the ul. All your work is done. The only thing left is to call the JavaScript function to run the slider. To call this:

1. <script>  
2. jQuery(function ($) {  
3.         $('.secret-source').secretSource({  
4.              includeTag: false  
5.         });  
6.   
7.         $('#banner-fade').bjqs({  
8.              height: 320,  
9.              width: 620,  
10.              responsive: true  
11.         });  
12. });  
13. </script>  

This one will differ from slider to slider, as I took this one they have called it in this way. In other sliders, calling the JavaScript functions is different.