Image Slider For Blogger
Blogger Image Slider, Content Slider, Dynamic Slider
Home
jQuery Slider
JavaScript Slider
CSS3 Slider
Responsive Slider
Dynamic Slider
FAQ
Contact Me
Nivo Slider - jQuery Image Slider For Blogger
Share
10
Today I'm sharing another awesome, beautiful image slider for Blogger/ BlogSpot blog. It is made with jQuery. and of course HTML and CSS but the main awesomeness, sliding effect is made with jQuery. This image slider is created by dev7studios.com/nivo-slider/. They did really a great job. This slider have downloaded more than 20,00000 times from their site. I have made a bloggerized version of the slider. See demo below.
DEMO
Lets Step forward to adding this jQuery Image Slider to Blogger
1. Go to Blogger Dashboard > Layout > Add a Gadget
2. Select HTML/Javascript
3. Copy the code below and paste on it.
4. Change images link with yours.
Share
10
Posted by Shuvojit Das
Labels: Blogger, Coding, Image Slider, JavaScript, jQuery, Widget
Share this post
Share to Facebook
Share to Twitter
Share to Google+
Share to Stumble Upon
Share to Evernote
Share to Blogger
Share to Email
Share to Yahoo Messenger
More...
Related Posts
Pure CSS3 Image Slider for Blogspot (Cycle Style)
Pure CSS3 Image Slider for Blogspot (Cycle Style)
01/03/2013 - 26 Comments
Add JavaScript Image Slider to Blogger Easily
Add JavaScript Image Slider to Blogger Easily
16/02/2013 - 100 Comments
FlexSlider Basic Image Slider Widget for Blogger
FlexSlider Basic Image Slider Widget for Blogger
27/01/2014 - 112 Comments
44 comments
alfredotMay 23, 2013 at 7:49 AM
Hi there, would it be possible to add a text link on a gradient background to this slider? Something similar to the JavaScript slider but where the caption is an actual (target-black) link. Also, I need to resize images and I see that doesn't seem to be an option in the code.
Many thanks
Reply
Replies
AdminMay 27, 2013 at 9:53 PM
Welcome @alfredot, You have to add the caption with your own html and css. Or you can use this javascript slider
There is a good news for you, I'll post a new jQuery Slider with your requirements... keep in touch.
Thanks - Admin
thestar14everMay 25, 2013 at 2:54 PM
it not working
Reply
Replies
AdminMay 27, 2013 at 9:56 PM
Please tell more specifically about your problem otherwise I couldn't help you.
I'm waiting to her from you..
Thanks -Admin
kevin chikristaJune 5, 2013 at 3:31 AM
it doesn't work. Do i have to do something with the downloaded file? the jquery file?
Reply
Replies
AdminJune 7, 2013 at 11:56 AM
jQuery script, and nivo slider script is already added in the slider code. your problem may solve.. thanks
AmberJune 7, 2013 at 10:55 AM
how can you edit so that the slider ONLY shows up on the homepage?
Reply
Replies
AdminJune 7, 2013 at 11:44 AM
A nice and tricky question you asked...
well you can do that with a single line blogger conditional code. as like...
Option - 1: In this way you have to add the code directly into template.
------------
SLIDER CODE HERE
______________________
Option - 2: You can add the slider into widget.
--------------
#HTML1 {
display: none;
}
--------------
[here #HTML1 is a example, find your slider widget id and use like this way.]
Thanks - Admin
AnonymousJune 11, 2013 at 8:49 AM
Hello, I'm having problems with this. I tried to tweak the code to match the dimensions and layout i want. But whenver the page refreshes, the photos make a mess in my whole homepage abut gets back in place after a few seconds. Here's the link.
Reply
AnonymousJune 11, 2013 at 9:09 AM
I can't paste the code here though. I may have done something wrong with the code. Sorry if I sound like a damsel in distress.
Reply
AdminJune 11, 2013 at 9:20 AM
add a "overflow: hidden;" rule to your slider widget css.
or use it
#slidewrap {
position: absolute;
overflow: hidden;
}
instead of -
#slidewrap{position:absolute;}
Reply
AnonymousJune 11, 2013 at 9:29 AM
Re: spilling photos.
AWESOME! IT WORKED! Thank you so much!
Reply
Mouthful Of RecipesJune 20, 2013 at 4:44 AM
Hi, how can I resize the images that they fit into the slider? What are the dimensions? Its displaying too big.
Reply
Replies
AdminJune 27, 2013 at 11:43 AM
Image dimension is 600x280PX. Use any size of image. For resizing I recommend Photoshop.
And then also change the width, height from here -
#pagewrap{
height:400px;
width: 640px;
}
#slider {
height: 280px;
width: 600px;
}
Adam TongJuly 3, 2013 at 2:04 AM
Hi are there any codes that i can use so that i can put in a link to each individual image in the image slider so that users can be redirected to the respective links?
many thanks.
Reply
Adam TongJuly 5, 2013 at 11:55 AM
Hi there, is it possible to change the sliding effects?
Reply
DALEX AGYJuly 5, 2013 at 12:00 PM
Hello, the code works great. However I can not seem to center the slider under my header logo. It seems to place it too much to the right
Reply
DALEX AGYJuly 5, 2013 at 12:12 PM
one more: is the anyway to change the duration of how fast the image changes to the next? right now its set to 1 second or so
Reply
AdhityaJuly 7, 2013 at 8:07 PM
Can I add some text along side the images? Please share the tips, I'm not so good in coding.
Reply
AdhityaJuly 7, 2013 at 8:19 PM
Mate, the images appear like a list not like a slide. Give me a hand please.
Reply
Suaz FmyJuly 27, 2013 at 12:01 PM
thank
Reply
Hader AliAugust 27, 2013 at 10:43 PM
hi..I added this to my blog http://haderali.blogspot.com/ but you can see that it is not working..all the pics showing separately on page instead of slideshow..
please please help me about that..how can i fix that error
Reply
Victoria VizcarraSeptember 30, 2013 at 10:58 PM
Hi! Where are the little round nav buttons at the bottom of the slider? They don't show up even in the demo. :/
Reply
Sydney LoganOctober 8, 2013 at 2:09 PM
Works great! Thank you!
Reply
Sydney LoganOctober 13, 2013 at 7:42 AM
Is there a way to adjust the speed of the slider? I need to slow it down.
Reply
AdminOctober 13, 2013 at 10:50 AM
You need to edit the jquery.nivo.slider.pack.js script at the following line
animSpeed:500,pauseTime:3000
Reply
Replies
Sydney LoganOctober 15, 2013 at 6:04 PM
Admin, I don't see that in the script anywhere.
AdminOctober 17, 2013 at 6:54 AM
Look at the last line of the script(http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js)
Reply
Replies
Sydney LoganOctober 23, 2013 at 8:09 AM
Done, thanks
Muh Yusuf NatsirJanuary 24, 2014 at 6:54 PM
its not working..
I have edit the jquey but, still can not work..
carigossipOctober 21, 2013 at 2:37 AM
These are really awesome, can i use two on the same blog
Reply
diana iordanidouJanuary 9, 2014 at 2:57 AM
you are amazing,works perfect,thank you so much
Reply
Chiranjibi SitaulaJanuary 15, 2014 at 9:12 PM
thanks alot for htis..
Reply
mimurni lamonganMarch 13, 2014 at 4:35 AM
how to resize the slider, I need width 960px and height200px
Reply
Hoà ng VũApril 29, 2014 at 9:42 PM
how to aligned center ????
Reply
Guru Nanak DarbarJune 11, 2014 at 11:04 AM
Really Nice Work
Reply
Re-Mastered MediaJuly 27, 2014 at 11:43 AM
How do I change the slider speed?
Reply
Re-Mastered MediaJuly 27, 2014 at 1:43 PM
How do I edit the jquery.nivo.slider.pack.js?
Reply
Chris CooperAugust 14, 2014 at 7:43 AM
How can I change the speed of the slider?
I need to make the images exactly fit that PX size for them to work don't I?
Thanks
Reply
lowonganOctober 25, 2014 at 5:19 PM
thanks,, it's working...
Reply
Benergy samApril 4, 2015 at 3:57 AM
Very Nice Info Thanks - Latest jQuery Plugins Demo
Reply
Howard LieApril 7, 2015 at 2:02 AM
Hi Admin, its working for my blog very well , thanks in advance
but are there any way to add text on the picture ... such as a sentence at the side of the picture but every picture with different text. Are there any way? Thanks
Reply
ynaharoApril 16, 2015 at 5:42 AM
Hi! Is there a way I can place this widget on a blog post? I can only add widget on my sidebar. I tried placing the codes on the HTML on the blog post, but it doesn't work. Hope you can help me. Thank you!
Reply
Akhil KApril 23, 2015 at 8:50 PM
how can i adjust the slider speed i cant find the pause time line in my code
Reply
:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer
Load more...
Need Help?
Do you need help installing or designing a beautiful slider for your blog? I'm capable to do almost anything on blogger, like designing a theme, customize, fix CSS, HTML, JavaScript. Anything you need to do on blogger, just knock me.
Contact at shuvojit33@gmail.com or hit the "Hire Me" button and drop me a message. I'll get back to you ASAP.
Hire Me
...
Join Fiverr and Get 5$
@fiverr.com/shuvojitdas
Contact Me | Portfolio
Popular Posts
How to add a Responsive Slideshow Widget to Blogger
Blogger Dynamic Slider by Label / Recent Posts
FlexSlider Basic Image Slider Widget for Blogger
Add JavaScript Image Slider to Blogger Easily
jQuery Carousel Slider for Blogger (FlexSlider)
© 2013-2018 Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top