JavaScript Image Slider ব্লগারের জন্য।

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

LIVE DEMO

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

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

/* 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/AVvXsEh6ObX013HR0122wFEgb5dpMs6KozaXDq9oFNm-qRYeuq83TvvvlkxJRmhvW1IxS-k7XMzgiPOHhflN9Vp6oqDJ5nEHF5gOImTG4RVSHNwaxBG019qs2-8MXwudwUazu1Mkea4z2QaUxhA/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/AVvXsEi9oXMCIub3bSwTAsnN7KlBpKrDCUhUstZVcHC3ucG_JD2FXbzAAq7IhLhHaLKjtyrGUPX8Ao1RLfDzXWRU__0fif9453OJlhEjTJQ6ErdP2S-1ItcmZ3tzuQ_aBkYr6c99kkNsOt4vfd8/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/AVvXsEgMNwO-RAOOaAvz4Xhb4On2UnyToOx81EHvLVtQf7pl8mJfHWqQ_uoJSk2TFCSpBI_j-9LdWlmoYSlN7fVqnpgoQpoUeAZz22pD0orcstPewVTrjn05QvcqXtt4HqZG61LoUrLaWd6XqdQ/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>

স্লাইডের উচ্চতা ও প্রস্থ পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন

স্লাইডারের ছবি পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন।

ছবিতে লিংক দেওয়ার জন্য এই চিহ্নটি পরিবর্তন→ # করে নিন।
আমার এই পোস্টটি ভাল লাগলে অবশ্যই লাইক দিতে ভুলবেন না।

Facebook Comments Plugin Bloggerized by BloggerTricks.Biz

JavaScript Image Slider ব্লগারের জন্য।

Post a Comment

Total Pageviews

Test Footer 2

Recent Post

Popular post

Labels

Blog Archive

Taka Exchange Rate