Possibly The Nigh Uncomplicated Jquery Slider

Do you lot accept jQuery inward your site or weblog too infinite to insert 10 lines of code? If the answer is yes, too you lot desire to accept an automatic slideshow, this is the simplest code I've seen thence far. So, having a succession of images added within a box amongst a mutual full general container, would laissez passer on this result:

Related: Image Slider using solely CSS

How to add together a Simple jQuery Slider to Blogger

Step 1. Adding the JavaScript

If you lot don't accept jQuery, thence you lot should add together this business only higher upward the </head> tag to brand the slideshow work:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>

Where the </head> tag tin last found? Go to Template > Edit HTML > click anywhere within the code expanse too press the CTRL + F keys. Inside the search box, type this tag too hitting Enter to discovery it:

</head>

Once confident that you lot accept the library inward your template, let's add together the below script every bit well, which volition brand the ready of images charge every bit a slider:

<script type="text/javascript">//<![CDATA[
$(function(){
    $('#slider div:gt(0)').hide();
    setInterval(function(){
      $('#slider div:first-child').fadeOut(0)
         .next('div').fadeIn(1000)
         .end().appendTo('#slider');}, 4000);
});
//]]></script>

Finally, relieve the changes past times clicking the "Save Template" button. And now, that nosotros finished adding the scripts, let's add together the images to where nosotros desire to show...

2. Create/Add the HTML for the Slider

After implementing the higher upward scripts inward the template (although, nosotros could add together them straight into a gadget, on a page or fifty-fifty within the shipping service HTML), nosotros volition exercise the slider similar the i above.

Use the next HTML construction to present the icon slider:

<div id="slider">
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
    <div><img src="IMAGE_URL"/></div>
</div>

- every bit a gadget: become to Layout, click "Add a gadget" too direct the "HTML/JavaScript" option
- within a post/page: exercise a novel shipping service too glue the code within the HTML box.

So this is all you lot need. For me, it is quite lightweight too efficient, much to a greater extent than than close libraries that are used present - perhaps, besides often.

jQuery Slider Settings

The final 3 numbers of this slider volition allow us to accommodate some things. All of them are expressed inward milliseconds (4000 = four seconds):

fadeOut(0): Time for the outgoing icon
fadeIn(1000): Time for the adjacent image
('#slider');},4000): Time spent inward each image

How it Works

$('#slider div:gt(0)').hide();
With gt(x) we select all the divs from the expose (x). In this case, 0 is the first, thence what this business does is to shroud (hide()) all the boxes - except the first, that volition last the icon visible initially.

setInterval(function(){ [what nosotros volition do] }, 4000);
We ask to reiterate a few things from fourth dimension to fourth dimension too nosotros tin hit this with setInterval - the delay fourth dimension betwixt each set.

$('#slider div:first-child').fadeOut(0)
Within each of these intervals, nosotros take (fadeOut) the get-go box (div:first-child) amongst a fade out effect, thence that images are out of visibility...

.next('div').fadeIn(1000)
...and brand the next box (next) to seem gradually (fadeIn).

.end().appendTo('#slider');
Finally, this volition present the get-go icon too volition deed it to the end (appendTo) of the "list".

end() resets the expose of elements that nosotros deed forrard amongst next(). Thus, the get-go kid made before to disappear, is the i that is sent downwardly the stack, too non the icon that is currently visible.

3. Customizing the Slider

Even though, nosotros don't ask CSS to brand the slider work, nosotros tin even thence alter its await to display images inward dissimilar sizes, include captions, or fifty-fifty amend the transition. Here are some ideas:

Text 1

Text 2

Text 3

This is a long text 4

In the higher upward example, nosotros limited the size of the container too prevented the overflow of larger images. Finally, nosotros added rounded borders too centered the slider.

#slider {
overflow: hidden;
width: 500px;
height: 300px;
border:3px corporation #242424;
border-radius: 40px;
margin: 0 auto;
padding: 0;
position: relative;
}

If nosotros would accept made the nurture box of the images positioned absolutely, they would accept overlapped each other. For this reason, nosotros accept ready the "position" of the container to "relative".

As for the images, nosotros volition ready the width to 100% to brand them fill upward the entire container too the min-height to 300px, to fill upward up all the available tiptop of the nurture box, thence that at that topographic point volition last no empty infinite or thence them.

#slider > div {
position:absolute;
top:0;
left:0;
}
#slider img {
width:100%;
min-height:300px;
margin:0;
padding:0;
border:0;
}

To add together to a greater extent than elements similar a text or caption, nosotros volition enclose the text inward span tags too volition ready the seat to "absolute". And to brand the text seem at the bottom of the image, nosotros volition work the bottom property:

#slider bridge {
position: absolute;
bottom: 17px;
display: block;
width: 100%;
margin:0;
padding: 15px 0;
color: #fff;
background: #242424;
font-size: 18px;
line-height:18px;
text-align:center;
}

If you lot desire alter the await of this slider - become to Template, hitting the Customize push clitoris too click on the Advanced > Add CSS tab too glue the higher upward CSS codes within the empty box.

The HTML markup for this final example, would await similar this:

<div id="slider">
<div><a href="Link_URL1"><img src="Image_URL1" /></a><span>TEXT1</span></div>
<div><a href="Link_URL2"><img src="Image_URL2" /></a><span>TEXT2</span></div>
<div><a href="Link_URL3"><img src="Image_URL3" /></a><span>TEXT3</span></div>
</div>

Please banker's complaint that if you lot add together it within the post's HTML, don't switch dorsum to the compose tab, every bit this mightiness take the bridge tags of the icon captions too the text mightiness non last displayed properly.

Share this post