This is a responsive jQuery carousel slider. This amazing slider developed by flexslider.woothemes.com. It has some really cool features that makes you like it. The most cool feature is it is fully responsive; you don't have to tensed about the sliders width / height even all images width and height are auto adjustable. And also you can set minimum/maximum number of images to be appear on occasion of various size screen/browser. So overall it is quite a beautiful carousel slider. Here it is customized for blogger/blogspot so you can just copy and paste the code to install on your blogger blog. Check out the live demo by clicking the link below.
4. Save, and we're done.
NOTE:
Let’s Install the jQuery Carousel Slider to your Blogger Blog
- Go to Blogger Dashboard > Layout > Add a Gadget
- Select HTML/Javascript
- Copy the code below and paste on it.
<style type="text/css">
/*
* jQuery FlexSlider v2.0
* http://www.woothemes.com/flexslider/
*
* Copyright 2012 WooThemes
* Free to use under the GPLv2 license.
* http://www.gnu.org/licenses/gpl-2.0.html
*
* Contributing author: Tyler Smith (@mbmufffin)
*/
/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
outline: none;
}
.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}
/* FlexSlider Necessary Styles
*********************************/
.flexslider {
margin: 0;
padding: 0;
}
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
width: 100%;
display: block;
}
.flex-pauseplay span {
text-transform: capitalize;
}
/* Clearfix for the .slides element */
.flexslider a.intro {
bottom: 0;
color: rgba(0, 0, 0, 0.1);
font-size: 14px;
position: absolute;
right: 0;
text-decoration: none;
z-index: 99999;
}
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html[xmlns] .slides {
display: block;
}
* html .slides {
height: 1%;
}
/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
* include js that eliminates this class on page load */
.no-js .slides > li:first-child {
display: block;
}
/* FlexSlider Default Theme
*********************************/
.flexslider {
margin: 0 0 60px;
background: #fff;
border: 4px solid #fff;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
zoom: 1;
}
.flex-viewport {
max-height: 2000px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.loading .flex-viewport {
max-height: 300px;
}
.flexslider .slides {
zoom: 1;
}
.carousel li {
margin-right: 5px;
}
/* Direction Nav */
.flexslider li {
border: 0 none !important;
padding: 0 !important;
text-indent: 0 !important;
}
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;
position: absolute;
top: 50%;
cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
.flex-direction-nav .flex-next {
background-position: 100% 0;
right: -36px;
}
.flex-direction-nav .flex-prev {
left: -36px;
}
.flexslider:hover .flex-next {
opacity: 0.8;
right: 5px;
}
.flexslider:hover .flex-prev {
opacity: 0.8;
left: 5px;
}
.flexslider:hover .flex-next:hover,
.flexslider:hover .flex-prev:hover {
opacity: 1;
}
.flex-direction-nav .disabled {
opacity: .3!important;
filter: alpha(opacity=30);
cursor: default;
}
/* Control Nav */
.flex-control-nav {
width: 100%;
position: absolute;
bottom: -40px;
text-align: center;
}
.flex-control-nav li {
margin: 0 6px;
display: inline-block;
zoom: 1;
*display: inline;
}
.flex-control-paging li a {
width: 11px;
height: 11px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
text-indent: -9999px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(0, 0, 0, 0.9);
cursor: default;
}
.flex-control-thumbs {
margin: 5px 0 0;
position: static;
overflow: hidden;
}
.flex-control-thumbs li {
width: 25%;
float: left;
margin: 0;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: .7;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 1;
}
.flex-control-thumbs .active {
opacity: 1;
cursor: default;
}
</style>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script>
<script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4
});
});
});
</script>
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" />
</li>
<li>
<img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" />
</li>
</ul>
</div>
NOTE:
- Forget about width and height it will adjust auto.
- Replace the colored image URL with your own uploaded image URL(You can upload image on blogspot, flickr etc.)
- There is some other things you can change, see below. I guess I don't have to explain that because they are named like as they are.
animationLoop: false,
itemWidth: 210,
itemMargin: 0,
minItems: 1,
maxItems: 4
how to make this slider infininite loop
ReplyDeleteAwesome work...!!!
ReplyDelete(h)
ReplyDeletehow to make it appear in homepage only?...
ReplyDeleteI love this so much, thank you!
ReplyDeleteWhat is the exact dimensions that this slider takes btw? I love it but my images are all different crops and keep showing white borders.
ReplyDeleteLarkin Satu You can change "animationLoop: false," to "animationLoop: true,".
ReplyDelete(h) (h) (h) Thanks!
ReplyDeleteThank you for sharing this Post. We can now use this Image Slider tool in Blogger blog. Thank you for sharing the code.
ReplyDeleteHi. Its possible to use 2-times flexslider on that same page? Acctualy when I put second flexsider with other settings min & max items - dont work.
ReplyDeletethis is work..
ReplyDeletethanks :)
It´s not ajdusting to the images size :(
ReplyDeleteHi, this slider is amazing! Exactly what I was looking for! Thank you very much!
ReplyDeleteI'm just having a little trouble.. I don' know what really happens, so I thought maybe you can help me a bit..
When we open the blog, it has some kind of delay that shows just the first photo very big for a second, and then appears all the slider...
So, do you have a lead about what could happend, please?
This is the blog: http://igzemple.blogspot.com.br/
it's amazing .. but when i put it in my blog, the pics disappear .
ReplyDeleteMy template already has a different JQuery Slider, but I wanted to ad this one below it. But once I add the widget, my Main Slide stops working. Can you please let me know how I can fix this issue? Would really appreciate it. my website is www.tropics.atl.com
ReplyDeleteThanks
I got it, If your using this Slider on the same page with an existing JQuery Slider, just delete (script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"><> www.tropicsatl.com
ReplyDeleteits great widget but when i paste these codes on my blog its only show a line in result . what to do
ReplyDeletemy blog is http://tabletrom.blogspot.com
How can you make the photo a link?
ReplyDeleteI cant get it to work, I copied and pasted the code and added my own pic URL but it wont show up.
ReplyDeleteWhat am I doing wrong?
rkirkman1027@yahoo.com
Hi there! I'm not a real html hero, so here is a sort of basic (stupid?) question.. I do not know which URL I need to copy (in stead of the pink word) for the widget to show all of my blog images. Because I want to show more than one image (it's a slider..), which URL do I use to let the widget show multiple images? Thanks a lot:)
ReplyDeleteI put this in my blog but a line appears in the bottom front of the slider across the whole width. Does anyone know why that is?
ReplyDeleteRaymundo Estoy Igual... Qué Será?? : -?
DeleteHola necesito ayuda Puse esto en mi blog, pero una línea aparece en la parte inferior delantera de la corredera a través de todo el ancho. ¿Alguien sabe qué es eso?
DeleteHello! I put this on my blog and so far it's working awesome. However, in your demo 1, the top slider is huge and i'd like it that size. What are the dimensions for those and where do I change the sizing? I've toyed with it a few times but never got it to work. Please share your wisdom oh wise one! :)
ReplyDeleteThank you Very MUCH........(h)
ReplyDeleteit work good in the bottom of my blog but at top not why I want to place it at the top can you help please
ReplyDeleteThe points below are too big for me. Can I change this?
ReplyDeleteCould you? They look fantastic in the demo but awful big for me.
DeleteNOT WORKING :(
ReplyDeletethis is amazing and i cannot thank the creator enough!
ReplyDeleteHow can I convert this to your demo 2?
ReplyDeletehola, muy buen slider (o) , como puedo hacer vertical?
ReplyDeleteHello, very good slider (o), how I can do vertical?
This code is amazing, thank you so much for letting us use it! If you have time to reply, I was wondering how to go about removing the border around it? Thanks in advance!
ReplyDeleteHey,
ReplyDeleteis there a possibility to link the picture to weblinks? I mean is it possible to click on a picture in the slideshow and then getting to an other website.
Thank You
THANK YOU SOOOOOOOOOOO MUCH !! I spen like 3 hours trying to find this !! I LOVE YOU
ReplyDeleteThank you. I just stuck in there and it worked great. Fixing up to personalize. Awesome work and very well done. Thanks.
ReplyDeleteIs there a way to make this work for hubspot? I've been looking everywhere for a code exactly like this!
ReplyDeleteBravo ! et merci beaucoup ! it's fantastique ! (h)
ReplyDelete