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

Add 'Auto Scrolling Latest Posts News Ticker' widget to Your Blogger blog
Sometimes few plugins drags readers attention indirectly forces them to stay...
Add Demo and Download Buttons below blogger posts with Hover effect
Number of attractive designed wordpress and blogger templates available...
How to Convert Normal images into Circle View effect on Mouse Over?
Whenever you do more work honestly you improve your skills maximize your...
Stylish Carousel Slider on Mouse Over to Blog/Websites
Most of the Carousel Sliders used for music, games and movies website or...
How to Add Menu type Imitation Blocks Widget to blog/website?
After sharing number of widget styles on our blog we bring you another...
Trick to Scroll Any Widget Sticky for Blog/Website
It is difficult to make visitor/reader convince to subscribe blog/website...
How to Display Copyright Author Digital Signature or DMCA Logo below each blogger post?
If any letter or circular received from anybody first we check below...

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>