Here I’m sharing a cool JavaScript image slider for blogger. It could be easily usable as featured content on blogger blog. This image slider is created by menucool.com. A really cool slider is this. It has pretty nice sliding effect, and a less loading time as created by Javascript, no jQuery or flash used. And another thing is it’s easily customizable. I have customized it little to suite perfectly for blogger blog. See Demo or download source code from below link.
Let’s Install the Image Slider to your Blogger Blog
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
2. Select HTML/Javascript
3. Copy the code below and paste on it.
<style type="text/css">
/* http://dimpost.com */
#sliderFrame {
position: relative;
width: 700px;
margin: 0 auto 40px;
}
#slider {
width: 700px;
height: 306px;
/* Make it the same size as your images */
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyCAXs4aBrxATNP5nWahOkQGyUzeNv99njcBVhVgH9hWc7cRsjYKcOsRxEIWnygVmvQohIAG3v3EtEmN56aoVo5tq6z4Z1vvT7gvO0sdCD_gfXmOxrgFXnGkqOzGV4k2_a6L4FCrdQHp-t/s1600/loading.gif) no-repeat 50% 50%;
position: relative;
margin: 0 auto;
/*make the image slider center-aligned */
-webkit-box-shadow: 0px 1px 5px #999999;
-moz-box-shadow: 0px 1px 5px #999999;
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position: absolute;
border: none;
display: none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index: 2;
display: none;
position: absolute;
top: 0px;
left: 0px;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
/* Caption styles */
div.mc-caption-bg,
div.mc-caption-bg2 {
position: absolute;
width: 100%;
height: auto;
padding: 0;
left: 0px;
bottom: 15px;
z-index: 3;
overflow: hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color: black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color: #EEE;
z-index: 4;
padding: 10px 0;
text-align: center;
}
div.mc-caption a {
color: #FB0;
}
div.mc-caption a:hover {
color: #DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top: 320px;
left: 280px;
/* Its position is relative to the #slider */
width: 150px;
background: none;
padding-left: 20px;
position: relative;
z-index: 5;
cursor: pointer;
}
/* each bullet */
div.navBulletsWrapper div {
width: 11px;
height: 11px;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1xFlIQwVoNJv5lprNvSmr6LgLzMPSmVm2Gs302_on2WRU1CxUp3FHP5cTJRB6OWalJM1MYJY25n_KNKBFTIrhQp6C3hO_RNk2eJZQjOFarQ7mPmt_xn2Onw3aGRddgWTMLcrbQaWh-ty/s1600/bullet.png) no-repeat 0 0;
float: left;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
margin-right: 11px;
/* distance between each bullet*/
_position: relative;
/*IE6 hack*/
}
div.navBulletsWrapper div.active {
background-position: 0 -11px;
}
.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.2);
font-size: 16px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
/* --------- Others ------- */
#slider {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
}
</style>
<script src="http://project.dimpost.com/image-slider/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7VX53D2ICSdS80N0fNIympO2BMi-8lX2OLRQqPBpW3hJO9vVC-bXIJjazsL1X2EnuPG8Z-cGr9__jABiq05DgUWW1e0IHq5WeOee_aWQkEgL1XGiaTMjCl5HU102fReaxpMfTo1vXz_d/s1600/image-slider-1.jpg" alt="#htmlcaption1" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB6rQsRW7HL7PFAkEhCwKk4Yy0Yepvh9Q3VVerue6D_v8zzS_t1vGwcZxctSqY1WXoGJE9cv51sUCv5kwOtOthrECm7mVVHWxHouk7gLa0JxysrxnN2G-9EY-_m7eyIKpxTorTWA_rqJ-c/s1600/image-slider-2.jpg" alt="Go UP!" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7dyAQM2otOe2yLY-emRMZdZbFGrz5YE-WSzY6YPtutsXPOKWVveij8xTCOqnLHi1BanACvLEQ5twXehdG3_wj2B2ljGQP_oGVf33AM3LwASYvMAG_t_yF9ooD-56jq_0lz4txXPhhk0GH/s1600/image-slider-3.jpg" alt="Pure Javascript. No jQuery. No flash." /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil4UGnn51DMJlQSm7o1Sg-laUhCQv8KvDc2cBOQjTTM78GJGdJ_3Ra0bgWwssUXfbM1IB2kNDvdwVGgKS02cT7nqcGxT31Arw1xMcxeDfbLfRmQnfRI00upgGmpulYs7kfFJUBzfX5KymD/s1600/image-slider-4.jpg" alt="#htmlcaption2" /></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl2kvSEVtucai-Uxdiib5xdbDOsEkbV3fY_3MOvCFmJNOy81Gghu1DHv-KLZWVO7JmSpgQd6k2E8M2kdjjI83-A8votn8aiQmxQcHoSPTbQbgpM-MM-55t79bzphEncYVlLXCRMkQBEMSN/s1600/image-slider-5.jpg" alt="Stay Connected" /></a>
</div>
<div id="htmlcaption1" style="display: none;">
Image Slider by <a href="http://dimpost.com/" target="_blank">DIMPost.com</a>
</div>
<div id="htmlcaption2" style="display: none;">
<a href="http://www.w3schools.com/css/" target="_blank">CSS</a> <a href="http://www.w3schools.com/js/default.asp" target="_blank">JavaScript</a> Rocks.
</div>
</div>
4. Now you can change Image URL with your own image, slider link/permalink, image caption etc. as your way.
how can we remove the slider from posts page :-b ?
ReplyDeletethanks
Hi, how can I delay time for these slides? Thanks.
ReplyDeleteNice slider. I wonder if you could make it automatic, like, if a certain category is chosen, it is automatically added to the slider.
ReplyDeleteNice work :) only one cuestion: how can i change the transition effect between images?
ReplyDeleteTo change transition effect you have to edit this
Delete-------------------
var sliderOptions=
{
effect: "series1",
effectRandom: false,
}
------------------
From >> http://dimpost.googlecode.com/files/js-image-slider.js
you can make it(effect: "series1",) series "series1".
or a single effect, for example: effect:"8"
single effect 1-17 is available.
See more here: http://www.menucool.com/slider/javascript-image-slider-demo1
How it is possible to edit from "http://dimpost.googlecode.com/files/js-image-slider.js" as the css we use is actually a downloadlink.
Deleteworked like a charm. thanks for sharing..
ReplyDeletenice
ReplyDeleteThanks ! I was wondering if it's possible to show the slider only on homepage and not on every post pages ?
ReplyDeleteAny way of keeping this only on the homepage of blogger? vs showing up on all posts?
ReplyDeletewill keep looking, post here if I find any solutions, thanks!
90
tnx (k)
ReplyDeleteNice your tutorial,
ReplyDeleteI like this slider, easily usable, but conflick with my lof slider, please look at oyinayashi.bogspot.com is there solution ?, thank you
Thanks for the post.
ReplyDeleteHow can I change the position of my slider, and still keep the sidebar side.
Sorry my english. I'm a Brazilian. :)
Thank you so much
ReplyDelete:)
same question like anonymous :)
ReplyDeleteBRILLIANT WORK!! Congratulations!!
ReplyDeleteIt's exactly what I was looking for my Blog. I'm in Blogger, and I could add this slideshow in my posts, just pasting the code you gave us. And works PERFECT!
Just one question, How should I add the js script (var SliderOptions) in YOUR code to customize transitions etc? It would be great to give different values in every different post. I guess that's possible. Excuse me, I'm a dumb beginner...
Thanks a lot for your help!!!
I want an Image slider ,automatic and manual Slideshow as well as when cursor goes hovers the image, text overlay appears.
ReplyDeleteNice slider ..............
ReplyDeleteThanks
i want slider homepage only.how can remove other pages
(k) perfect
ReplyDeleteworked like a charm. thanks for sharing..
ReplyDeleteThanks very very much. It works great!!!!
ReplyDeleteLike many people here, i too wanted the slider to appear only on the home page and not the blog posts. Here is what i did...copy and paste the code in the HTML editor for the page(eg. the home page) and not as a gadget/widget. It worked !
ReplyDeletehere is a link to my blog and you may see it working (unless i have removed it for some reason...sry about that)
www.awesomereviewsandstuff.blogspot.in
Awesome programming mainly i liked the comments ..keep going bro :-)
ReplyDeleteI'm an idiot. When I change the width of my slider, it only gets bigger on the right. I can't seem to center it. Any suggestions. Thanks so much.
ReplyDeleteIf you give us your blog url, it'll be easy to find out the problem :)
Deletehttp://youwillbecut.blogspot.com/
ReplyDeleteHere's the URL. This is the site I test gadgets on before I add them to my own website. www.BryanMorrisComedy.com Where it should behave the same.
You can see it is far too far to the right and it wont expand to the left.
Any advice would be greatly appreciated. Obviously I'm very new at this.
Thanks you
@Briyan, You have to keep the image and slider size same. Make the #sliderFrame wudth 866px too :)
DeleteAnother tips- drag and rearrange your slider widget. Currently it is in tab section so there seems like some mix-up, drag the slider widget more top or little bottom. The preview foe a better result.
I can't seem to get my images to show up...any advice? I'm hosting them on flickr. www.beeyogafusion.com
ReplyDelete@Gretchen It seems everything is ok now.
ReplyDeletewhen I change the width of my slider, it only gets bigger and the icon button is not in the middle?
Deletethank you (k) , I want to ask how can I make the picture full screen cover. full screen, not zooming mode.. please answer, thanks :d
ReplyDeleteGuys, guys, guys we need help. We got your slider works perfect! However,how we can change the size of the image? Please help us we are new bloggers, our blog is
ReplyDeletehttp://freekarame.blogspot.gr/
Thanks in advance
Cheers!
I am very new to HTML and have had no previous experience with it. I have successfully downloaded the slider to my page, but I am having troubles changing the default images to my own. Any suggestions on how to do that?
ReplyDeletei have applied it to my blog but am having problems with changing the size of the image url i pasted to auto fit the slide please some one help ooo
DeleteYou are a lifesaver! I’ve been looking everywhere for this, and am I excited! It works
ReplyDeleteperfectly! Thank you so much for this awesome tutorial!
Thank U.....Its Wonderful.......i have applied it on my blog
ReplyDeletehttp://wallpaperspackz.blogspot.com
I added width & height size with respect of frame size to match up into img src= tag but image not resizing. Orginal size loading in slide.
ReplyDeleteOtherwise, Great wrok!!!
every post that i made has 5 images i want to display it using slide show is these possible? these blogger.com
ReplyDeletehow we can change images???
ReplyDeleteHi,
ReplyDeleteIs it possible to add a hyperlink to the images to link to other pages of my blog?
Thanks
whenever i add this to my blog, it just runs an empty frame, doesnt show any pictures, i did put in links from my picasa web albums but it doesnt show the pictures, just an empty frame, wt shd i do?
ReplyDelete:)
ReplyDeletenice...
i have only one question. i set the slider into my blog but setting the images to fit the width of the slider is my major problem. how do i make sure that the images all fit into the slider. my blog is bancolaliwatamu.blogspot.com
ReplyDeleteHelp.
i also cant figure out how to add images
ReplyDeleteplease help, how to change the size for border image, i was change wid and height but does't works..
ReplyDeleteI am trying to edit the transitions in the original JS file, but when downloaded, I get a microsoft error and can't open the file to edit it. Any suggestions??
ReplyDeleteworks fantastic! (h)
ReplyDeletealthough its worked out, but the first picture is too long.
ReplyDeleteBut after that its ok.
Could you please check my URL? www.krista-mocafkitchen.blogspot.com
@Anastasia Krisnawati, It seems everything is ok now
Deletebtw, your blog is so delicious (o)
Hi,
ReplyDeleteVery interresting.
How can i do to put a link on each pictures ?
Thank You
how can I make the images autofit in the slider?
ReplyDeletemy slidder doesn't want to load at all :(
ReplyDeletewww.shop-athome.com
Hello :) Great Job on the sliders. I have one query that others have already asked before, can this slider be retained only on the home page? If not, which other slider would you recommend? Thanks!!!
ReplyDeleteawesome boss...helped a lot thank u so much
ReplyDeleteThank you so much you Men .!!
ReplyDeleteNeed to figure out how to make the image and everything bigger
ReplyDeleteHello, thank you for your work.
ReplyDeleteJust a question, how can you add multiple sliders on the same blogger page?
Thank you!
I'm an idiot. When I change the width of my slider, it only gets bigger on the right. I can't seem to center it. Any suggestions. Thanks so much.
ReplyDeleteperfecto
ReplyDeleteTHANK YOU SO MUCH. It is working perfectly on my website powered by blogger
ReplyDeletehttp://www.managementmasala.com/2014/04/how-millennials-gen-y-loyalty-is.html
I have used it only for post header and have slightly reduced it to a different size.
Can you please guide how to AUTO fit the images in it. Thanks Again
Thank you so much. Your slider works like a charm. I've tried so many that had glitches and just didn't respond. Yours was simple and easy to install.
ReplyDeleteOk...I think I need help (if possible plz) :)
ReplyDeleteHere is my blog (Blogger - I am developing on Chrome): http://faisalnet5home.blogspot.com/
Trying to implement image slider based on this given example (url: http://imagesliderforblogger.blogspot.com/2013/02/add-javascript-image-slider-to-blogger.html#.U3Vu3IFdXD5), however just seeing the empty frame....no image!
In chrome debug window, seeing this warning message:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Source is saying: js-image-slider-1.js
Any help plz? Thanks a lot :)
Hi I need help centering the slider. The images and slider are the correct size, but it is hanging to the right a little. I would like it to be centered. Any tips?
ReplyDeleteAll about HR learning.....
ReplyDeletehttp://www.scoutshrm.blogspot.com
Hey friend this is an awesome slider but i need a small help.
ReplyDeleteThat is i want to display caption like "pure javascript no...." in the left side for some compability.Is is possible.Please help
how to make it change the image in a simple way???
ReplyDeleteThanks for your help to add slider in my blog.
ReplyDeletecan i force the image in the slider to be stretched to the slider.
ReplyDeleteIn my blog it is looking very unpleasant please help
Thanks a ton i was going through Google day and night and finally i found your great article (k)
ReplyDeleteNice job, it works well for me :)
ReplyDeletehow to make the the images auto adjust to the sliders width and height please help and thank you
ReplyDeleteI used this slider on my Bangla Blog. Really Awesome Slider Without Flash. (h)
ReplyDeleteThanks,
Rupayon 24
I added the slider to my blog but the images are not sliding / changing and hyperlink to the post also doesn't work. Please check out my blog and suggest me how to rectify, as I need the slider seriously.
ReplyDeleteHi, i want to use one of these sliders but I don't understand how can I change the effect and the pause time. I have downloaded the js-image-slider.js document, but all I have is that in the Notepad and I don't know how can I take that to my blog. I'm using blogger. If anybody can help me, thanks!
ReplyDeleteawsem yar ...very nice slide yar....admin..kuch or new dalo mast bali
ReplyDeleteProblem solved! I uploaded the .js file to Google Drive
ReplyDeleteThanks You so much... :)
ReplyDeleteHello!
ReplyDeleteThank you for this amazing slider!
I have a question about it. I would like to know if it is possible to replace the url images by RSS feed of my blog. I am looking for a way to make images of latest posts automatically added.
I don't know if it's possible with a javascript. Thank you in advance for your answer :)
This is so perfect! You are my savior!
ReplyDeletei can't find HTML/Javascit option.
ReplyDeletethanks
ReplyDeleteHow can I make this slider responsive? meaning scale to whatever device is viewing?
ReplyDeleteGreat job due...but i have a question ..how to center align the images inside the slider,is thee any way to auto align the images even if it doesn't match the slider resolution ??
ReplyDeleteWorked fine for me, thanks
ReplyDeleteThank you so much. Your slider works like a charm. I've tried so many that had glitches and just didn't respond. Yours was simple and easy to install.
ReplyDeleteThis is great:) Thank you (k) How to change so the slides would only change when clicked?
ReplyDeleteRather pedantic, but how do you change the colour of the selector dots underneath the pictures? Thanks
ReplyDeleteGracias amigo.. muy bueno tu post
ReplyDeleteHow to use TWO SLIDERS in a Static Page. I tried to change 'div id' but invain.
ReplyDeleteTry this
ReplyDeleteA) Prepare:: a Photoshop action for 700 width and 306 height image size and convert all your images to the 700x306 size , ( I don't want to disturb the above JS code )
B) Convert::In Photoshop 1) File> Automate>Batch 2) choose your action then select source file containing your images 3) select your Destination folder to save resized images 4) OK
Lovely, but please is there no way to make it automatically use recent post on my blog using my feed url? Any any please, can you show mme how? Thank you.
ReplyDeletehow makew responsive with device.. i try but not working with small device.. tks
ReplyDeletethanx it worked like a charm but how do i auto fit image in the slide
ReplyDelete:( please help me i added two sliders on my home page but this one is not working properly when i change the width of slider frame to 250px it hold at an effect ...my blog is
ReplyDeletewww.readersdiary.co
its important please check
Very Nice ,,,Thanks you
ReplyDeletehow to setting time for delay, please... (example : 10 second)
This code seem to dont work any longer. Please help! Thanks!
ReplyDeletecould you please help me???
ReplyDeletehttp://practicals4me.blogspot.in/ this is my blog address.
I'm beginner of blogger. I added images in your code from my blog but image size is not correct as Frame...so please help me....
I like the simplicity of cut-and-paste, no code adjustments were needed. thanks!
ReplyDelete