Add Amazing CSS3 Carousel Slider in your Blog

Carousel Slider is one of the best widget to display your featured post common way. It Is very popular because you it take small space and load faster. Most of the Carousel Slider able to display infinity posts. There are various use of this slider. Best user of Carousel Slider are movie and games based site. You can easily add your featured or latest movie and games through Carousel Slider. It make navigation friendly for this reason a visitors can easily navigate to specific post easily. Though we generally use Carousel Slider at the top area (below header) of the blogger template, as a result when a visitors visit your landing page then they can easily see the hottest posts. So I have tried to make little variation in Carousel Slider widget. This Carousel Slider is not like common one that a right or left button for scrolling rather I have added on this Carousel Slider mouse over scrolling effect. When you take your mouse pointer on right or left site of featured posts then it will scroll automatically. As well as a transparent caption will appear where you can simply write the content name. Another feature of this widget is that you can add infinity content. But this Carousel Slider you have to maintain manually.

For using this slider you have to select image and resize it to 150px width X 120px Height and upload it in any hosting server (e.g. Google, Photobucket, Image Shark) then get the link and finally add it into Carousel Slider.

Live Demo

So let’s proceed to the tutorial to install it into your blog. You can add this slider below header of above footer section. Just follow the below simple steps-

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your Layout tab.

Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.

Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.

Step 5 Place the Gadget below header. that's it.

<style>
#BloggerSpiceCarouselSlider {
height:130px;
background-color:#333333;
border:10px solid #000000;
position:relative;
margin:50px 50px;
overflow:auto;
}
/* CarouselSlider by www.bloggerspice.com */
#BloggerSpiceCarouselSlider:before,
#BloggerSpiceCarouselSlider:after {
content:"";
display:block;
position:absolute;
top:0;
bottom:0;
left:-4px;
width:4px;
height:100%;
box-shadow:0 0 4px black;
z-index:10;
}
#BloggerSpiceCarouselSlider:after {
left:auto;
right:-4px;
}
#BloggerSpiceCarouselSlider .container {
position:absolute;
top:0;
left:0;
margin:5px 0 0 5px;
width:300%;
height:120px;
}
#BloggerSpiceCarouselSlider figure {
display:block;
background-color:white;
float:left;
width:150px;
height:120px;
margin:0 5px 0 0;
position:relative;
overflow:hidden;
}
#BloggerSpiceCarouselSlider figcaption {
display:block;
position:absolute;
right:0;
bottom:-50px;
left:0;
background-color:black;
font:italic normal 11px Arial,Sans-Serif;
color:white;
padding:4px 10px;
text-align:left;
opacity:.8;
}
#BloggerSpiceCarouselSlider figure img {
display:block;
border:none;
margin:0 0;
}
</style>
<div id="BloggerSpiceCarouselSlider">
<div class="container">
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3-ObILx4gbejGygRCE6UVjR9tgYqy0VcCDXIW1yPVliqRWn1lIP4J3gwpnRwLKkdrombfePj0JQp-EoxVs42xAvcVItV-MzdHWz7VeSqHD8ILZAlMD1mA8FyW9sYe8Wr2lwGm_MSS4VeM/s1600/7.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_KTlkq77rDWhkVpsDJJI0prOhPu3bEdP90T_56i7y0PX2LiWPGxmvi7lqTO4S-uhXkud-yn718fxzYtP_XSr6b-qFmizQfsQVBagDPtrPCyDr0H4Tpxp_r27pxOcfsKwaP81arXeruCh2/s1600/9.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijMy5bWUUUxBmlWfJAX__5p-9VNiABtjgdoLOh4lxG7mAnQFVDIrfxRrESUl7Ed8vawtWCxp2kjf6sL2PegB1os3pOqi7zmEWw7i3QUD4O4h8ydbr1YNuWrCA3lPyFDqDYD6qtNkACEDjq/s1600/10.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7e3U621GjIi9TYNQYH1gXVlVrZJfUEwnpqIOVVs5vc6G2AQy-Fr0ukxT_lYEJRvrXwYoMszN8miiY6LRE9X0NOtxX-6QSpxYOm4boUxERhoKIzj61mnKeO0R23htXLpy9b55hFeSN-eTL/s1600/8.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5a_H774aboyw-Vk85RTnoQyHvharAS7l1wg1nNxf4iLryjDma0bJ3-dctyF6yCfsWUBjS1nh8pZEt79h8aSVhisFGLSAwxwVcr_zKRB26deM1gDeoT8DfGfjHDYR0yvi1gZYDqC37wm14/s1600/6.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbIWOgOTj3ZQjZnM9Tf_IbcOdeJOCMhYAowFWpVzpmHOQ29PUcXuCe6S46pCj500qNVwY7k6jfbynMxFUDOFCGE4hVETK9dmtnyiKFTssONiTD5Nrc_tSQ-7j1R9rvLfwspXp3eOxY_99J/s1600/4.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhgW-Qgn_b_-lh_6HLLap6V1dfumUe36RrTQ8sUKhNNxUmSCAc9CBNGdgHXOhiUe7pXuSNu66x5qGG1g0AG2297c6CKQ7U1_PRBdscDXMxMX5Szid0UO9nUnPd2_FjlR3QhuLvjzoiMvJm/s1600/3.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption2">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLYnSIEP7XxnVgaK16YDTXDcR55LIHzLwYDzfT__HCEjQZzYZb9VEjVX8t3XGP5E5yeV0szLgf1q4aX2bxx6KVlPKHSwdc4xy9Hdqy6DqBelBzh-tBegyQ62aX5IDq7gyornsNkyCxvmZV/s1600/2.jpg" />
</a>
</figure>
<figure>
<a href="#" title="Title for Caption">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7BMJKT7IRDv-4-lg6U90KSC4Qb92r27UVFW0hbd__u8V3AuLlK9_jc2BoZGe4AQrg2qloA1nZxmTwKv4L9Nk63bq-GxGM2-AnXrsthGUZ3sxWFE1a5eV-61CzlSQLfKMO_uVR0mYiKG6/s1600/1.jpg" />
</a>
</figure>
</div>
</div>

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type='text/javascript'>//<![CDATA[
(function($) {
var config = {
itemMargins: 5 // Distance between the thumbnails
};
var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
$container = $thumbnailScroller.find('.container'),
$item = $container.find('figure'),
item_length = $item.length,
item_width = $item.outerWidth(),
item_margin = config.itemMargins,
total_width = (item_width + item_margin) * item_length,
$window = $(window);
$thumbnailScroller.css('overflow', 'hidden');
$container.css('width', total_width);
// Auto caption builder & hover effect
$item.each(function(cap) {
if ($(this).children().attr('title')) {
cap = $(this).children().attr('title');
$(this).children().removeAttr('title');
$(this).append('<figcaption>' + cap + '</figcaption>');
}
}).hover(function() {
$(this).find('figcaption').stop().animate({
bottom: 0
}, 200);
}, function() {
$(this).find('figcaption').stop().animate({
bottom: -50
}, 200);
});
$window.on("resize", function() {
var o_l = $thumbnailScroller.offset().left,
t_w = $thumbnailScroller.width(),
c_w = total_width;
$thumbnailScroller.on("mousemove", function(e) {
if ($(this).width() < $container.width()) {
$container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
}
});
}).trigger("resize");
})(jQuery);
//]]>
</script>

Customization

Change #333333 for Background color of CarouselSlider
Change #000000for Border colorCarouselSlider
Replace # with post link
Alter Title for Caption with Post title
Replace Image URL Here with post Image link
To add more link just add code like below after </figure>

<figure>
<a href="#" title="Title for Caption">
<img alt="" src="Image URL Here" />
</a>
</figure>

If you need any help just feel free to contact me. I will help you to solve your problem.

33 comments

Abdul Samad Essani 7/31/2013 04:16:00 PM

Oh! Great Bro Keep It Up Thinking For Use It
- BloggerSpice 8/01/2013 06:29:00 AM
  
  thanks bro
- Syed faiq ul hussain 8/07/2013 06:37:00 PM
  
  Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
Techex 7/31/2013 04:50:00 PM

Nice Sharing brother this slider help us very much
thank you for sharing
- BloggerSpice 8/01/2013 06:29:00 AM
  
  yeh Rizwan specially for highlighting featured posts. Thanks to see you here.
- Syed faiq ul hussain 8/07/2013 06:38:00 PM
  
  Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
Unknown 8/01/2013 06:27:00 AM

Brother, you as always Bravo . you are cool.
was looking it for my new blog.
thanks a lot.
your blog is turning a great resource.
keep it going.

my small blog
www.parallelblogging.blogspot.com
- BloggerSpice 8/01/2013 07:00:00 AM
  
  Thanks dilip for a beautiful comment.
- Syed faiq ul hussain 8/07/2013 06:38:00 PM
  
  Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
MM Nauman 8/01/2013 09:09:00 AM

Thanks Bro Great Widget ...But Bro It Should Automatically Moves ...And I want to add extra urls what to to do......
- BloggerSpice 8/01/2013 10:12:00 AM
  
  Hi Nauman,I have update this post for adding new links. for adding more link follow the updates from end of the posts.
Unknown 8/04/2013 08:29:00 PM

Hotep
Great widget! I am already using it on my blog.I have one question,how do you make it only display on homepage.I added conditional tags that are supposed to make it show only my homepage,but it still shows on all other pages.my blog is www.knightsofimhotepebooklibrary.blogspot.com.

Thanks
- BloggerSpice 8/05/2013 07:05:00 AM
  
  Bro this widget is combination of CSS+JavaScript+CSS so its bit critical to add conditional tag. I will design different one where you can apply conditional tag. And thanks for your comment.
Syed faiq ul hussain 8/07/2013 06:36:00 PM

Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
Syed faiq ul hussain 8/07/2013 06:36:00 PM

Mohammad Fazle Rabbi Please Follow My Blogger And Like My Facebook Page Pleaseeeee My Name Is Faiq-Ul-Hussain
shaikh iliyas 8/15/2013 09:25:00 AM

great thanks brother
regars from

shayrikiduniya.com and mypremiumtrick.shayrikiduniya.com
Unknown 11/15/2013 02:44:00 PM

Is there anyway to make this carousel work in the presence of another caursel on your page.Im trying to add multiple slides but this one makes my other featured content slider not work
- BloggerSpice 11/17/2013 05:06:00 AM
  
  Hi Asar..of course it will work..but you have to use JS file only once..suppose I have used https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js file in the above tutorial. So if you want to use 2nd carousel then you must remove this js code line. Still confused :-? Duplication of JavaScript create conflict between 2 widget so use only one time.
Unknown 2/28/2014 05:43:00 AM

. you are cool.
was looking it for my blog.
thanks a lot.

my blog is urweb4u.blogspot.com
Unknown 1/11/2016 08:06:00 AM

NO MORE...... I LIKE YOU, I LIKE THE BED YOU
- BloggerSpice 1/11/2016 09:48:00 AM
  
  Thanks Giaitri.. for dropping your comment. :-d
computer innovations 5/12/2016 05:36:00 AM

Sir, it is being displayed vertically without front or back options please help, my site, http://musicmasti823.blogspot.com
- BloggerSpice 5/12/2016 06:06:00 AM
  
  In this case you can use Random post widget. Please visit the below URL for the widget.
  
  http://www.bloggerspice.com/2013/09/add-random-post-widget-with-large-wide.html
Anonymous 8/13/2016 01:28:00 AM

how can i use it inside blogger post
i tried to use it but it work well .. it only work good when i put it into gadget html/js
any idea ...
please help..
- BloggerSpice 8/14/2016 07:02:00 AM
  
  To make it work inside Blog Post please follow the below instruction...
  
  Step #1: Log in to your "Blogger account" and Go to your "Blogger Dashboard"
  
  Step #2: From Blogger Dashboard Click on -> Template -> Edit HTML
  
  Step #3: Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac)
  
  Step #4: Paste the below code Before/above]]></b:skin>
  
  #BloggerSpiceCarouselSlider {
  height:130px;
  background-color:#333333;
  border:10px solid #000000;
  position:relative;
  margin:50px 50px;
  overflow:auto;
  }
  /* CarouselSlider by www.bloggerspice.com */
  #BloggerSpiceCarouselSlider:before,
  #BloggerSpiceCarouselSlider:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:-4px;
  width:4px;
  height:100%;
  box-shadow:0 0 4px black;
  z-index:10;
  }
  #BloggerSpiceCarouselSlider:after {
  left:auto;
  right:-4px;
  }
  #BloggerSpiceCarouselSlider .container {
  position:absolute;
  top:0;
  left:0;
  margin:5px 0 0 5px;
  width:300%;
  height:120px;
  }
  #BloggerSpiceCarouselSlider figure {
  display:block;
  background-color:white;
  float:left;
  width:150px;
  height:120px;
  margin:0 5px 0 0;
  position:relative;
  overflow:hidden;
  }
  #BloggerSpiceCarouselSlider figcaption {
  display:block;
  position:absolute;
  right:0;
  bottom:-50px;
  left:0;
  background-color:black;
  font:italic normal 11px Arial,Sans-Serif;
  color:white;
  padding:4px 10px;
  text-align:left;
  opacity:.8;
  }
  #BloggerSpiceCarouselSlider figure img {
  display:block;
  border:none;
  margin:0 0;
  }
  
  Step #5: And locate the </head> section in your Blogger template
  
  Step #6: Finally copy following line of markup and paste it above </head>
  
  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
  <script type='text/javascript'>//<![CDATA[
  (function($) {
  var config = {
  itemMargins: 5 // Distance between the thumbnails
  };
  var $thumbnailScroller = $('#BloggerSpiceCarouselSlider'),
  $container = $thumbnailScroller.find('.container'),
  $item = $container.find('figure'),
  item_length = $item.length,
  item_width = $item.outerWidth(),
  item_margin = config.itemMargins,
  total_width = (item_width + item_margin) * item_length,
  $window = $(window);
  $thumbnailScroller.css('overflow', 'hidden');
  $container.css('width', total_width);
  // Auto caption builder & hover effect
  $item.each(function(cap) {
  if ($(this).children().attr('title')) {
  cap = $(this).children().attr('title');
  $(this).children().removeAttr('title');
  $(this).append('<figcaption>' + cap + '</figcaption>');
  }
  }).hover(function() {
  $(this).find('figcaption').stop().animate({
  bottom: 0
  }, 200);
  }, function() {
  $(this).find('figcaption').stop().animate({
  bottom: -50
  }, 200);
  });
  $window.on("resize", function() {
  var o_l = $thumbnailScroller.offset().left,
  t_w = $thumbnailScroller.width(),
  c_w = total_width;
  $thumbnailScroller.on("mousemove", function(e) {
  if ($(this).width() < $container.width()) {
  $container.css('left', -((e.pageX - o_l) * (c_w - t_w) / t_w));
  }
  });
  }).trigger("resize");
  })(jQuery);
  //]]>
  </script>
  
  Step #7: And click "Save template” button from the Top.
Unknown 6/02/2018 09:54:00 PM

gracias muy bueno :)
- BloggerSpice 6/03/2018 11:24:00 AM
  
  de nada ;)
Alex 8/10/2018 10:12:00 PM

Hey, First of all thanks.
I found the right thing on your blog.
But I want my recent posts to automatically go into the slider.
Please help.
- BloggerSpice 8/26/2018 07:35:00 AM
  
  Hi Alex :)
  Thanks for your query. Hopefully I will release a automatic slider Widget very soon.

BloggerSpice: SEO and Money Making Strategies

Search this blog

Add Amazing CSS3 Carousel Slider in your Blog

Customization

33 comments

Float AdSense And Display Ad Banner on Left or Right Side of Your Blog

15 Hot SEO Google Chrome Extensions for Website Traffic, Clicks, and Rank Analysis

30+ Blogging Resources You need to know to Improve your Blog

How to Resolve Bengali Font Issues in Google Chrome: A Comprehensive Guide

How to Create a Password Protected Page in Blogger?