আমি নিয়ে আসলাম একটি ইমেজ স্লাইডার। ইমেজ স্লাইডার কি? এই রকম কোন প্রশ্ন আছে নাকি আপনার কাছে। যদি থাকে তাহলে নিচে এর ডেমো দেখে নিশ্চিত হয়ে নিন।এই স্লাইডারটি কি আপনার ব্লগে যুক্ত করতে চান? তাহলে নিচের নির্দেশনা অনুসারে এগিয়ে চলুন।

LIVE DEMO

প্রথমেআপানর ব্লগে প্রবেশ করুন
তারপর আপনি নাক বরাবর নিচের দিক Layout এ চলে যান।
তারপর Add a Gadget এ ক্লিক করে HTML/JavaScript সিলেক্ট করে নিন।
তারপর নিচের কোডটি সিলেক্ট করে সেখানে paste করুন
তারপর শেষ কাজ, এবার সেভ করুন।

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_0HfyKP0k_nPf4Y2S5kVct90q6l0Ebe1ELaAX4MYgpPpdglIbMmFrqcCDNMfpWUpNVXV3agp1BdY_aJraKhEOp5B632JDGfaHCkfOr7USVoX-dVez861_-1jfb6fFPjLQDiQMI4aLODA/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/AVvXsEjEvwY6xrQAbtcMiHOrjePVO4_jnMrssSRuWSwtDKV0EjAi01kv-VBfpzMo2aHoW5POd__Moz1p149ZNsVCiLuIO-qYP0eipXMS_mNjNJaaptvdGbwWb-lpTbdmN3eEAHXSdgqq9hKPuAI/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/AVvXsEiHK2vBavRJJHpoiZV2OOGjXvesH8jREF6FWmGcIjv64VH0cUu5_jtUH4MR-5xKy_84vCJJLQzYhV-DtZLILYNvK0LLlk14wAy46KzPcWc8pkInY4sGNJ87Su-fkE4n39YLwVlGj4ic-H4/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4iOjNjuH7Zz8uQF-2UcYqNAKiSbVw2yVJScyFDiuR42kRFWmwtDqVME0nQxhP_C2tuWthTPcN-q3PUe79MthRMrzLcUrAdiuOnTohsOjVn5qn15Kic-KVStMZ0tmNRj3tGwcKhP7oBg7/s1600/helperblogger.com-1.jpg" /></a>

<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQmKzntfSg559sAldVZ8FZvxl-imgD59n6ToRL9tDUo0KPc6gzhnAb_2yuobWnyUeu_Mnn01fD3cMotQQi3qo66MP1EACQFlflL9VAQRj57pgSEGnZQHFyFYQK2l_ipIU_r4PRKhypvrG/s1600/helperblogger.com-3.jpg" /></a>

<a href="#"><img alt="The slide is a linking image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UpYezNgSh7bMGLSN89EkLo8iCaZw-bkmgYScnb8yRcjK6nsiq__PiAI98c_1DKpFl6VsL6gNCens-apmuZGbYMb1DFC9RMW4g-NlZD4GnguWwtrJA8qUuFCe0aUQ3Kaxn_LRwCSvSiLB/s1600/helperblogger.com-2.jpg" /></a>

<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKLy6dWgC0-o9wfolsoCeWZu-aUu6DLqbBqiAaYoY2UOwserWG8gifMaHHUhRBZtdSqox0A1fPxbmEgmtuhR0NqbIAnAfpUrJU_iC0kIic67hx1chwPuwgU2MtmNsVMBe5-9zZvbAmPTxD/s1600/helperblogger.com-5.jpg" /></a>

<a href="#"><img alt="#htmlcaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVehm49SpVCYXsMhJUKXQmy7PeCVi8BlKdffc50XrseW9kAefBmd5x7hzyW8lG9-WJ4LkJA4vLlfzNe5Kgpp3DMBjEnW_FDLAUUxdZdrVg1oKa2nve66JhJAfN4YOhLNJN2Pq8S-heHvCO/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE4iOjNjuH7Zz8uQF-2UcYqNAKiSbVw2yVJScyFDiuR42kRFWmwtDqVME0nQxhP_C2tuWthTPcN-q3PUe79MthRMrzLcUrAdiuOnTohsOjVn5qn15Kic-KVStMZ0tmNRj3tGwcKhP7oBg7/s1600/helperblogger.com-1.jpg" /></a>

<a href="#"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQmKzntfSg559sAldVZ8FZvxl-imgD59n6ToRL9tDUo0KPc6gzhnAb_2yuobWnyUeu_Mnn01fD3cMotQQi3qo66MP1EACQFlflL9VAQRj57pgSEGnZQHFyFYQK2l_ipIU_r4PRKhypvrG/s1600/helperblogger.com-3.jpg" /></a>

<a href="#"><img alt="The slide is a linking image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-UpYezNgSh7bMGLSN89EkLo8iCaZw-bkmgYScnb8yRcjK6nsiq__PiAI98c_1DKpFl6VsL6gNCens-apmuZGbYMb1DFC9RMW4g-NlZD4GnguWwtrJA8qUuFCe0aUQ3Kaxn_LRwCSvSiLB/s1600/helperblogger.com-2.jpg" /></a>

<a href="#"><img alt="Pure Javascript. No jQuery. No flash." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKLy6dWgC0-o9wfolsoCeWZu-aUu6DLqbBqiAaYoY2UOwserWG8gifMaHHUhRBZtdSqox0A1fPxbmEgmtuhR0NqbIAnAfpUrJU_iC0kIic67hx1chwPuwgU2MtmNsVMBe5-9zZvbAmPTxD/s1600/helperblogger.com-5.jpg" /></a>

<a href="#"><img alt="#htmlcaption" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVehm49SpVCYXsMhJUKXQmy7PeCVi8BlKdffc50XrseW9kAefBmd5x7hzyW8lG9-WJ4LkJA4vLlfzNe5Kgpp3DMBjEnW_FDLAUUxdZdrVg1oKa2nve66JhJAfN4YOhLNJN2Pq8S-heHvCO/s1600/helperblogger.com-4.jpg" /></a>
                </div>
ছবিতে লিংক দেওয়ার জন্য এই চিহ্নটি পরিবর্তন→ # করে নিন।

JavaScript Image Slider ব্লগারের জন্য। দারুন একটি স্লাইডার

Written By Palash Saha on সোমবার, ৭ জানুয়ারি, ২০১৩ | ৫:৫৩ PM

LIVE DEMO