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

• Download source - 6.5 MB

Introduction

In this post, we will learn about to create a HTML jQuery CSS slider where images are binding from a specific folder. This means you just have to add a folder name and rest of the work will be taken care of by the code.

All we need is a pack of jQuery sliders. As I found one from my hard disk, I will do with this.

Step 1

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

As we all can see, the assets folder is the resources that we have imported from our HTML jQuery. 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 model 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 title (Title and alt of the image).

namespace MVCImageSliderFromFolder.Models
{
    public class Slider
    {
        public string src { get; set; }
        public string title { get; set; }
    }
}

Step 4

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

Before proceeding, we must have to discuss about 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.

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. To do this..

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

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, the last part is left to do. 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).

<link rel="stylesheet" href="../assets/bjqs.css">
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans:300' 
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="../assets/demo.css">

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../assets/js/bjqs-1.3.min.js"></script>
<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 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....

<div id="banner-fade">
    <ul class="bjqs">
       @foreach (var item in Model)
       {
           <li>
               <img src='@Html.DisplayFor(modelItem => item.src)'
                     title='@Html.DisplayFor(modelItem => item.title)' alt="">
           </li>
       }
    </ul>
</div>

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

<script>
jQuery(function ($) {
        $('.secret-source').secretSource({
             includeTag: false
        });

        $('#banner-fade').bjqs({
             height: 320,
             width: 620,
             responsive: true
        });
});
</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 of the JavaScript functions are different.

Now build your project and run this. Enjoy the slider.