প্রযুক্তির-খেলা.কম: 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/AVvXsEg2n6QE62927INkK1uOzdPgtfmcZx_PKK8-zjNGJDY0IHSjwUeI2E3SiYevX_VzmV58kM9Sp8_E0OaZp2CubyvNX5EtGatp_um2YJGCibfPkXQCTTanJrIDlEQgJ9cVP29gXBgZTUfJBek/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/AVvXsEihN-uDM_Ee3nXCYDJY_hWxDl2XdEIHUGs8HZR8awsqCTsESJEBb-BkwHMN5ICzstT66Hjaod5GHXhjz54SmmNRGZEeDMUeZoSf0ENvChgVz_ijx60Z6VaIqbx0EGWaI6A6-8rRjdhi12M/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/AVvXsEgK2erVIv4hw6l-gr21CXDM-oaFO-RyI_8WmJyucsUWNszR4j1g0XilRXDGBCmgxZB0n2CH_TxZEyiZl95D_a36aLOl6SBrZKJN9i9NObz6V_KoGh5sANcuARM9xa6JlsN3_zsk-ZSXx_4/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>

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

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

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

প্রযুক্তির খেলা ব্লগস্পট থেকে তার নিজস্ব ডোমেইনে
তাই ভিজিট করুন আমার সাইটে www.projuktirkhela.com

শুক্রবার, জানুয়ারী ৪

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

কোন মন্তব্য নেই:

একটি মন্তব্য পোস্ট করুন

জনপ্রিয় পোস্ট সমূহ

আমার সম্পর্কে

Search (Don't Edit)

ব্লগ লাইব্রেরী

বিভাগ

সম্প্রতিক মত্নব্য

প্রযুক্তির খেলা ব্লগস্পট থেকে তার নিজস্ব ডোমেইনে তাই ভিজিট করুন আমার সাইটে www.projuktirkhela.com