In this post we will learn about to create a HTML JQuery CSS slider where images are binding from a specific folder. Means you just have to add a folder name and rest of the work will be take care of the code.
All we need a pack of JQuery slider. As I found one from my hard disk, I will do with this.
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.
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.
Now lets create the Slider.cs file first. It will took two things. One is src (this is the source of the image) & second one is title (Title and alt of the image).
Now its time for the controller. This is the main thing to get 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 lets proceed with searching all the files/images from the desired folder.
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...
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);
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).
Now add the slider, as we are dealing with only the slider we don't need to worry about all other stuffs. 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....
Now build your project and run this. Enjoy the slider.
Download the full source code here.