দৃষ্টিনন্দন Slideshow যুক্ত করুন আপনার webpage এ . html ,css ও javascript দিয়ে তৈরী .

 
আমদের অনকের ইচ্ছে হই নিজেদের website অ একটা দৃষ্টিনন্দন slideshow যুক্ত করি
কিন্তু জানি না কিভাবে করতে হবে . আজ আমি আপনদের শিখাবো কিভাবে slideshow যুক্ত করতে হয় . আমি web design and developing শিখছি . এখনো বেশি কিছু শিখতে পারি নি . HTML , css শেষ করে javascript শিখছি . তাই আমি আপনাদের সাথে একটি slider সারে করব আর দেখিয়ে দিব কিভাবে ছবি add করবেন ইন্টারনেট এ অনেক ঘাটাঘাটি করে বের করছি .
এ slider টি দিয়ে আপনি আপনার ইচ্ছে মত ছবি slide করতে পারবেন .
আগে নিচের স্ক্রিপ্ট টি দব্ন্লাদ করে নিন ……..
Download
প্রথমে এটি উনজিপ করে নিন . এবার index.html  ফাইল টি jakono browser  এ ওপেন করুন . দেখবেন কি shunder  slider  . এবার শিখে  নিন কিভাবে ছবি add করবেন বা delete  করবেন  .
যে  ছবি টি রাখবেন তা প্রথমে photos  folder টি তে রাখুন  .
index.html ফাইল টি notepad এ ওপেন করুন .নিচের  line  টি  khuje ber korun abong কপি করে line  টির নিচে paste করুন  .
<li><img src=”photos/blue-fish.jpg” width=”500″ height=”300″ alt=”Blue Fish” /></li>
এবার paste kora line টি  তে blue-fish.jpg এর স্থানে আপনার image এর নাম লিখে . দিয়ে format   লিখে দিন যেমন shefat.jpg .
নিচের  line  টি  khuje ber korun abong কপি করে line  টির নিচে paste করুন  ..
<li onclick=”slideshow.pos(3)”>4</li>
এবার 4  এর স্থানে 5  লিখে দিন  . কাজ শেষ . এবার save  করুন  . তারপর index .html  ফাইল টি  যেকোন browser  এ  run  করুন  .
এভাবে যত গুলো pic  add  করবেন ততগুলো পক slideshow  তে শো করবে .
যতগুলো pic  add  করবেন সেই অনুপাতে number  বাড়তে থাকবে  যেমন আরেকটি পিক add  করলে number  হবে  6  tarpor 7  এভাবে cholte থাকবে .  মনে রাখবেন প্রতিটি pic  এর জন্য দুইটি tag  বাড়াতে  হবে . আর যারা css  জানেন তারা css  এডিট করে এটি আরো সুন্দের করতে পারবেন  .কেমন হলো জানাবেন . সবাই  কে ধন্যবাদ .
Share this article :
 

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

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Incomonline |World's First, The Largest and Most Popular Bangla Technology Social Media... - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger