Stylish Carousel Slider on Mouse Over to Blog/Websites

Most of the Carousel Sliders used for music, games and movies website or blogs to scroll featured posts. Webmasters commonly install this widget at top position below header or at footer to display more posts in full length body. In addition to our previous Image Slider post in the article we bring you another wonderful and attractive CS which displays infinite posts. 

This widget is quiet different when compared with other Carousel Sliders, lots of advantages developed in this widget one of the main feature is mouse on scrolling posts. 

Webmaster’s don’t’ need to work hard for installing this widget on their blog/website, just check our below detailed furnished advantages before you do experiment. Let’s begin tutorials for adding widget.

Browse More Related Posts

More...

Advantages installing widget to blog/website

• Displays quality of posts in universal way
• Occupies less space and loads faster
• Compatible to all browsers available online
• Mouse on Scrolling posts
• Developed with CSS3 effect
• Easy customizable and friendly to blog/websites
• Without having right or left click buttons
• Attracts visitors with navigation menu style
• Different with other Carousel Sliders
• Images width: 150px; and height:120px

How to Install Carousel Slider to blogger?

Sign into your blogger account
From Blogger dashboard select ‘Layout’ link tab
Click on ‘Add a Gadget’ link tab
Click on ‘HTML/Javascript’ widget and copy below code paste in it

<style>
#BlogTariffCarouselSlider {
  height:130px;
  background-color:#eee;
  border:10px solid #08b2fe;
  position:relative;
  margin:50px 50px;
  overflow:auto;
}
/* Stylish Mouse over scroll
Carousel Slider by www.BlogTariff.com */
#BlogTariffCarouselSlider:before,
#BlogTariffCarouselSlider: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;
}
#BlogTariffCarouselSlider:after {
  left:auto;
  right:-4px;
}
#BlogTariffCarouselSlider .container {
  position:absolute;
  top:0;
  left:0;
  margin:5px 0 0 5px;
  width:300%;
  height:120px;
}
#BlogTariffCarouselSlider figure {
  display:block;
  background-color:white;
  float:left;
  width:150px;
  height:120px;
  margin:0 5px 0 0;
  position:relative;
  overflow:hidden;
}
#BlogTariffCarouselSlider 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;
}
#BlogTariffCarouselSlider figure img {
  display:block;
  border:none;
  margin:0 0;
}
</style>
<div id="BlogTariffCarouselSlider">
    <div class="container">
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
  <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
  <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </a>
        </figure>
        <figure>
            <a href="Link Here" title="Name for Title">
                <img alt="" src="Image URL Here" />
            </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'>
// Carousel Slider widget by blogtariff.com
// Tutorial at http://www.blogtariff.com/2013/08/stylish-carousel-slider-om-mouse-over.html/
// Free to use or share, but please keep this notice intact.
//<![CDATA[
(function($) {
    var config = {
        itemMargins: 5 // Distance between the thumbnails
    };
    var $thumbnailScroller = $('#BlogTariffCarouselSlider'),
        $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>

Code Customization:

• Replace Image URL Here with your post labeled image URL
• Replace Link Here with your Post link URL
• Replace Name for Title with your Post name Title
• Replace Background color #eee with your choice color by using our COLOR CHART
• Replace Border color #08b2fe with your Choice color by using our COLOR CHART

To add another Image to Slider just paste below code

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

Browse More Related Posts

More...