Image Slider

JavaScript Image Slider For Blogger

Today I am sharing another cool slider which works with JavaScript and no jQuery and flash is needed.This slider contains a ribbon at the left top corner of slider and it is named as "What's Hot" also it contains a beautiful slice effect which slices image into 12 parts,these main features increase beauty of the slider.Another great feature of this slider is it is highly customizable so that to edit it as you wish and which will perfectly suits to your blog.This slider is created by menucool.com and I have created a bloggerized version of this slider to works perfect with blogger blog.See the demo of the slider by clicking on the demo button below,

Live Slider Demo

How To Add This Slider To Blogger?

1. Go to Blogger Dashboard > Layout
2. Click on Add a Gadget
3. Select HTML/JavaScript (below header)
4. Paste code inside it,

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi06OcoRwj7KLS1lq8tgaCH_LsxDsKDkGGNA7ZS6RhFuD8x66BOlHt5i2vYfpXtdOo9zqOWONXuhxKYsphTIgKcIZ6FONo4LWukMN2KE4vlnCZEB-qVHWT3fWEWFEM2uwosqyMNHGO-Sd4/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_T6iGJsnu5wFDpdhImPBkP35_MsN6P1WgL327GY2PN_2F3zoVIMVLNxJmF9VNbgWc96h67LG2pjxLxUHYRcOpJTilxR8jITD741wDJyXy6bNyVmsJGPNkRF9zoE7P7QYxS0gxPvF3kFI/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQHZjUY5PxoOt8brdafPOiQOWj9SSMxZyNs2sMTYezMhY9iLuQDQPwItLwSfmIIGY9hmlDhQL1jXMKabrYhK31MwSQ5cOfZ_xXrzX2vKDegb7FtNQpiPZv34rIQJSGuYwohpP4tXZLyMc/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style> 

<script src="http://helperblogger.ucoz.com/demo/js-slider/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-1.jpg" alt="Image Slider By helperblogger.com"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-2.jpg" alt=""/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-3.jpg" alt="The slide is a linking image"/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>

<a href="#"><img src="http://images.helperblogger.com/jsSlider/helperblogger.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

Important Note - Before adding  images to slider resize all of them to same size.

Color Codes Info -

      - Width Of Slider

Set the width of slider according to your image width also use the images of same width and same heights.

      - Height Of Slider

Set the height of slider according to images height also use images of same width and height.

      - Image URL

Replace all highlighted image URL's with your own images URL.

      - Image Caption

Here you can add your image caption.

      - Link To Image

If you want to add any link to image then replace # with your own image URL.

Finally save all your changes and you are done :)

 

http://www.helperblogger.com/2012/07/javascript-image-slider-for-blogger.html#more