LIVE DEMO

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">

 /* JavaScript Image Slider By http://www.projuktirkhela.blogspot.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(http://4.bp.blogspot.com/-2AdmLJaub9w/T_2NGQHAKfI/AAAAAAAACjk/ZHsOsqRyBEk/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/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(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/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://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<br />
<div id="sliderFrame">
<div id="ribbon">
</div>
<div id="slider">
<a href="#"><img alt="Image Slider By helperblogger.com" src="http://2.bp.blogspot.com/-2AYG4zsRllk/UObWkRWcttI/AAAAAAAABMs/2Y6XEFKJt9E/s1600/helperblogger.com-1.jpg" /></a>

<a href="#"><img alt="" src="http://3.bp.blogspot.com/-0_jXOtrGtCo/UObWlDBOcVI/AAAAAAAABMw/XiL07lv052A/s1600/helperblogger.com-3.jpg" /></a>

<a href="#"><img alt="The slide is a linking image" src="http://3.bp.blogspot.com/-FgmddpI_W7A/UObWl9sGyuI/AAAAAAAABM4/86O1EQz6YpI/s1600/helperblogger.com-2.jpg" /></a>

<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="http://2.bp.blogspot.com/-XTed7dLFeTc/UObWm_Aew-I/AAAAAAAABNA/n3aSbCnkf0M/s1600/helperblogger.com-5.jpg" /></a>

<a href="#"><img alt="#htmlcaption" src="http://1.bp.blogspot.com/-qEJa3jBQ67c/UObWnGc28kI/AAAAAAAABNI/hZZHcsZyzuM/s1600/helperblogger.com-4.jpg" /></a>
                </div>
</div>
</div>

স্লাইডের উচ্চতা ও প্রস্থ পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন
#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;

#slider {
 width: 500px;
 height: 218px;

 <a href="#"><img alt="Image Slider By helperblogger.com" src="http://2.bp.blogspot.com/-2AYG4zsRllk/UObWkRWcttI/AAAAAAAABMs/2Y6XEFKJt9E/s1600/helperblogger.com-1.jpg" /></a>

<a href="#"><img alt="" src="http://3.bp.blogspot.com/-0_jXOtrGtCo/UObWlDBOcVI/AAAAAAAABMw/XiL07lv052A/s1600/helperblogger.com-3.jpg" /></a>

<a href="#"><img alt="The slide is a linking image" src="http://3.bp.blogspot.com/-FgmddpI_W7A/UObWl9sGyuI/AAAAAAAABM4/86O1EQz6YpI/s1600/helperblogger.com-2.jpg" /></a>

<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="http://2.bp.blogspot.com/-XTed7dLFeTc/UObWm_Aew-I/AAAAAAAABNA/n3aSbCnkf0M/s1600/helperblogger.com-5.jpg" /></a>

<a href="#"><img alt="#htmlcaption" src="http://1.bp.blogspot.com/-qEJa3jBQ67c/UObWnGc28kI/AAAAAAAABNI/hZZHcsZyzuM/s1600/helperblogger.com-4.jpg" /></a>
                </div>
ছবিতে লিংক দেওয়ার জন্য এই চিহ্নটি পরিবর্তন→ # করে নিন। 
আমার এই পোস্টটি ভাল লাগলে অবশ্যই লাইক দিতে ভুলবেন না।