jQuery

List of jQuery amazing content sliders

jQuery slider is a great way to display your picture on website. You can find a lot of jQuery slider that are free to download.

How to use them:
Most of these slider are combination of javascript/css/html files. Therefore, just follow these basic steps to include them into your website:

Copy all css/js/image files into your website folder
Inlude all css/js files in header/footer in you html page
copy given html piece of code anywhere to display slider
Right order/sequence is important to work properly

Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. There is literally no better way to make your website look totally stunning.

Amazing Slider

An easy-to-use Windows & Mac app that enables you to create beautiful, professional, responsive jQuery Slider, YouTube Video Gallery, WordPress Slider Plugin and Joomla Slideshow Module.

Featured Content Slider:

Create a Slick Auto-Playing Featured Content Slider

An image slider is an image slider and they’re all about the same, right? Not so fast. What are the main requirements for choosing any kind of web component? Compatibility, easy setup, high performance, and nice look and feel. With WOWSlider they’ve tried to create the perfect html slider that covers all these needs and even more.

JSSOR

Jssor Slider is touch swipe image slider carousel with 390+ caption slide effects. When touch Jssor Slider, it will freeze and then move to the direction that finger swipes to. It comes with javascript library source code.

Jssor Slider is responsive by calling API. The API method ‘$ScaleWidth’ is the best performance responsive slider carousel approach, Jssor Slider can be scaled to any size at realtime.

BX Slider

The Responsive jQuery Content Slider

Features: Fully responsive – will adapt to any device, Horizontal, vertical, and fade modes, Slides can contain images, video, or HTML content, Advanced touch / swipe support built-in, Uses CSS transitions for slide animation (native hardware acceleration!), Full callback API and public methods, Small file size, fully themed, simple to implement, Browser support: Firefox, Chrome, Safari, iOS, Android, IE7+, Tons of configuration options

Steps for jQuery Plugin Integration into Website

Most of the websites has rich and interactive user interface today. jQuery provide us a thousands of free plugins to enhance our website. Every business owner or website developer wants to use some jQuery plugins for his website.

if you know basic of html/css/js, you can easily integrate various jQuery plugin into your website. Most of these plugins have some common steps. All you need to use their js/css/html code step by step.

These steps are common to add various jQuery elements (like: gallery, slider, menu, light-box etc) into our website/html template.

We will use jQuery Nivo Slider in our example.

Steps for jQuery plugin integration:

1) Download jQuery file (optional)

All jQuery plugins use jQuery as a base file to work properly. Therefore, you can download jQuery file.

jQuery file most of the time named as “jquery-version.min.js” (for example: jquery-2.2.4.js or jquery-3.1.0.min.js”).

However, almost all jQuery plugins already includes jQuery files, so you can skip this and follow next step.

2) Download jQuery plugin (Nivo Slider) file

Whatever plugin you want to use, download it. Make sure you download latest jQuery plugin. It could be slider, gallery, menu, accordion, tabs, overlay or any other beautiful jQuery element. For an example, we can download jQuery Nivo Slider.

Most of these plugin comes with example. If example or demo pages are available, you can run and check to make sure that it is working. Nivo slider also has demo.html file. You can also check demo.html’s source code. You will get an idea that what css/js/image files are used for this plugin.

3) Simplify jQuery plugin (optional)

The purpose of this step is to simplify file/folders, so that we can remove unwanted files and focus should be on including the right files.

There are few files other than css/js/html files which are not mandatory for integration. They exists for some other or additional purpose. For example, in Nivo slider folder, you can delete (.gitignore, README.md, package.json etc files). Only css/js/html and image files are required for basic functionality.

Note: Please make sure plugin is working after deleting those files. You can check it by running demo file. If you are not sure that which file to delete, then do not delete and you can skip this step.

4) Download HTML template (optional)

If you already have your own html template or working with existing website, you can skip this step too. If not, you can download simple html templates.

It is good to experiment with simple html template. Because, If html template is rich in UI, it will already have a lot of jQuery plugins. Therefore, it will be little complex to focus on right thing. Simple template will make it easy. Once experimented with simple html template, you can try in other complex websites with more confidence.

In case your website/template already has jQuery file, there is no need to include it again.

5) Copy/Move all required js/css/image files into your template/website folder

You need to copy all js/css/image files(or folder) into your website folder. You can follow your own directory structure or simply copy file/folder as it is in jQuery plugin folder. At last you need to make sure that you are including all those files in html page with proper path.

6) Copy All js/css embedded code into your website page.

Copy all code to embedded css files into head and copy all code to include js files before body (or head).

7) Copy plugin’s main html code(div/li etc) into your website body, where you want to display that plugin’s functionality.

All jQuery plugin’s use some predefined html tags format (using div/li/img etc) along with some predefined class/id. You can copy that predefined html code anywhere to invoke that plugin’s functionality.

8) Fix js/css/image paths

You can now test your website page. It should work fine, if all js/css/images are including with proper paths. However, your js/css/image file location may differ from the original jQuery plugin folder structure. You can check each css/js path from page source code and fix them one by one.

9) jQuery plugin should be working by now. You can customize as per plugin options.

In simple words, if you have included jQuery plugin’s all js/css/images files properly, your plugin (for example slider) should work well. You can customize your plugin (such as slider) using different options from plugin’s documentation or website.