How to create image Slider with bxSlider Plugin For Blogger

Using bxSlider Plugin

Hi friends, a nice image slider is an awesome idea to enhance the look and feel for your blog or website and you will surely be like this type of customization for your Homepage.

Here, I'm going to show you how to create image slider using "bx-slider" plugin from the scratch. So, here I am gonna show you how to create for the same.

What is "Image Slider" ?

For absolute beginners

An image slider may be a presentation of or series of images purely for their own visual interest or artistic value, sometimes unaccompanied by description or text, or it may be used to clarify or reinforce information, ideas, comments, solutions or suggestions which are presented verbally.

Features of bxSlider -

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.

View Demo

Now, let's get started.

1- Open blogger dashboard Select "Layout"
2- Click on "Add a Gadget"
3- Choose "HTML/JavaScript" Gadget

4- Now paste Below Code inside it. Leave title blank

Click here for complete guide how to add Gadgets in blogger.

<ul class="bxslider">

<li><a href="#"><img src="https://dl.dropboxusercontent.com/s/3ia3cav5e4ao8k6/Untitled-1.jpg" title="Your Image Title First" /></a></li>

<li><a href="#"><img src="https://dl.dropboxusercontent.com/s/j802dn4y3pez0yd/Untitled-2.jpg" title="Your Image Title Second" /></a></li>

<li><a href="#"><img src="https://dl.dropboxusercontent.com/s/lq1lohbb5ffvm0p/Untitled-6.jpg" title="Your Image Title Third" /></a></li>

<li><a href="#"><img src="https://dl.dropboxusercontent.com/s/6rx9yh9kjtwg4bq/Untitled-7.jpg" title="Your Image Title Fourth" /></a></li>

</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/s/5lezc4p3oeowlfu/jquery.bxslider.min.js"></script>

<script src="https://dl.dropboxusercontent.com/s/ow7cnosuku254os/jquery.easing.1.3.js"></script>

<link href="https://dl.dropboxusercontent.com/s/markwruetiyit0n/jquery.bxslider.css" rel="stylesheet" />

<script type="text/javascript">

$(document).ready(function(){ $('.bxslider').bxSlider({

auto:true,

autoHover:true,

responsive:true,

captions:true,

autoControls:true,

autoControlsCombine:true,

mode:'fade'

});

</script>

5- Save it. Finish.

Preferred image Dimension should be 690pxX400px.

Customization:

1) Highlighted in Yellow color = Url of your image
2) Highlighted in Green color = Title of your image
3) Replace "#" with your Image Link.
4) Delete Below line from above code if you have already added this in your html DOM.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
5) Preferred image Dimension should be 690pxX400px.

And this is the example of image slider using "bx-slider" plugin. If you wish to know this in a great detail then go to following Link. for configuration select "Options" menu .

http://bxslider.com/

728x90 AdSpace