October 10, 2017

Free Responsive Slider jQuery Plugin For Blogger

- Advertisement -
Responsive Slider
Some bloggers surf the best blogger template with a responsive slider jQuery Plugin. But, there is no matter if you found a good blogger template without a slider. A responsive slider plugin can install to your template.

In this article, I will share a beautiful blogger slider plugin with you. This slider is a flat slideshow. It has slide titles on the right side position and flows from the left side of the slider. Each images should 1300px width and 450px high.

There are some tutorials show how to install it. This responsive slider jQuery Plugin is not only suitable for Blogger templates. But it is good for all kind of HTML website template and WordPress Templates. To install this responsive slider, you have to understand some basic HTML Code but however, let's try these tips below.


Responsive Slider jQuery Plugin

How to Change Slider Images and Titles?

These below sample codes are things that you have to concentrate on them to change all images and slider titles. To change the images, you have to replace your image URL in "ADD Image URL Here". And to customise your slider titles you have to rewrite on "Slider Title Show on Slideshow".
<div class="slideshow_wrapper">
  <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:100%;margin:0 auto;">
    <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
      <ul class="amazingslider-slides" style="display:none;">
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow"/></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
        <li><img src="ADD Image URL Here" alt="Slider Title Show on Slideshow" /></li>
      </ul>
    </div>
  </div>
</div>

How to Remove or Add Image Slideshow?

It depends on your demand, how many images slideshow you need to display on your blog slider. If you need to remove an image slider on this responsive slider, you just delete a line of code from <li> to </li> tag.

And to add an image slider, copy a line of the existing <li> to </li> tag then add the image and title.

To Change Slider Title Size and Background
This below CSS Code will help you to change title size and background.
.amazingslider-title-1 {
    display: table;
    position: relative;
    font: Normal 26px 'BebasNeuewebfont';
    letter-spacing: 1px;
    color: #ffffff;
    white-space: nowrap;
    background-color: #545442;
    padding: 20px;
}
If you have any question about this responsive slider, please leave a comment below and I will respond to you as soon as possible.

Was this article helpful?

Yes
No
Thanks! Your feedback helps us improve blogsupporter.com
Keo Sopherth

I love web and I am a Blogger and Author at Blog Supporter (Siem Reap, Kingdom of CAMBODIA) / www.blogsupporter.com / info at blogsupporter dot com

- Advertisement -
- Advertisement -
Advertise Here (330 x 280)

0 comments:

*** Although every comment is appreciated, due to time constraints I could not be able to respond for some comment. Remember that comments are regulated and could spend sometimes to appear. All spam comments or "COMMENT WITH HYPERLINK" will certainly be removed. Thanks for recognising!