TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি স্লাইডশো তৈরি করবেন?

2

আপনি ওয়েবসাইট নির্মাতা বা কন্টেন্ট ম্যানেজমেন্ট সিস্টেম ব্যবহার করছেন কিনা, আপনার সাইটের জন্য একটি স্লাইডশো তৈরি করা খুব সহজ। উদাহরণস্বরূপ, মিনিটের মধ্যে অত্যাশ্চর্য স্লাইডার তৈরির জন্য ওয়ার্ডপ্রেসের শত শত স্লাইডশো এবং গ্যালারি প্লাগইন রয়েছে । একইভাবে, Weebly এর মত সাইট নির্মাতারা একটি স্লাইডশো উপাদান প্রদান করে এবং এমনকি বুটস্ট্র্যাপের মত একটি কাঠামো একটি ক্যারোজেল উপাদান প্রদান করে । যাইহোক, যখন আপনি প্লেইন স্ট্যাটিক এইচটিএমএল সাইট তৈরি করেন তখন আপনার নিজস্ব কাস্টম স্লাইডশো কোড সন্নিবেশ করা ছাড়া অন্য কোন বিকল্প নেই। আপনি যদি এমন একটি স্বতন্ত্র স্লাইডশো ব্লক খুঁজছেন, এখানে জাভাস্ক্রিপ্ট সহ একটি সম্পূর্ণ স্লাইডশো কোড রয়েছে।

স্লাইডশো কেন ব্যবহার করবেন?

আপনার সাইটে একটি স্লাইডশো যোগ করা নিম্নলিখিতগুলিতে সাহায্য করে:

  • আপনার ওয়েব পেজে মার্জিত দেখায়।
  • একটি ল্যান্ডিং পৃষ্ঠায় একটি স্লাইডশো যোগ করা ব্যবহারকারীদের আকর্ষণ করবে।
  • আপনি স্লাইডগুলিতে আপনার সাইটে কয়েকটি গুরুত্বপূর্ণ পৃষ্ঠা দেখাতে পারেন এবং সেই পৃষ্ঠাগুলিতে ট্র্যাফিক চালাতে পারেন।

জাভাস্ক্রিপ্ট স্লাইডশো

যদিও একটি রেডিমেড স্লাইডশো তৈরির জন্য প্রচুর প্লাগইন পাওয়া যায়, জাভাস্ক্রিপ্ট ব্যবহার করে একটি সহজ স্লাইডশো তৈরির সোর্স কোড এখানে দেওয়া হল । আপনি আপনার ওয়েবসাইটে এই স্লাইডশো যোগ করতে নিচের দুই ধাপের প্রক্রিয়া অনুসরণ করতে পারেন।

স্লাইডশোর জন্য 1 স্ক্রিপ্ট

স্লাইডশো insোকানোর জন্য নিচের স্ক্রিপ্টটি আপনার ওয়েব পেজের ফুটার বিভাগে পেস্ট করুন। গুগল পেজস্পিডে রেন্ডার ব্লকিং রিসোর্স এড়াতে এবং পেজ লোডিং স্পিড উন্নত করতে আপনি আপনার ওয়েব পেজের বডি সেকশনের পরে কোডটি পেস্ট করতে পারেন ।

<script type="text/javascript"> // Set slideshow speed in milliseconds var slideShowSpeed = 3500; // Set duration of crossfade (seconds) var crossFadeDuration = 3; // Specify the image files var Pic = new Array(); // Just add as many as images as you want one by one // Replace the images with your own site images Pic[0] = 'Image1 URL Here' Pic[1] = 'Image2 URL Here' Pic[2] = 'Image3 URL Here' Pic[3] = 'Image4 URL Here' // do not edit anything below this line /*********************************************** * Get more website widget codes @ https://www.webnots.com/demos/ ***********************************************/ var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter= "blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); } // End --> </script>

স্লাইডশোর জন্য 2 টি HTML

পরবর্তী ধাপ হল আপনার পৃষ্ঠার বিভাগে নীচের HTML কোডটি কপি এবং পেস্ট করা। আপনি যখন স্লাইডশো দেখতে চান তখন আপনি এই কোডটি পেস্ট করতে পারেন।

<table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="" name='SlideShow' width=476 height=301> </td> </tr> </table> <script type="text/javascript"> runSlideShow(); </script>

 স্লাইডশোর জন্য অপশন কাস্টমাইজ করা

আপনি নীচের বিকল্পগুলি ব্যবহার করে জাভাস্ক্রিপ্ট স্লাইডশোর উপস্থিতি কাস্টমাইজ করতে পারেন।

  • স্ক্রিপ্টের ছবিগুলি আপনার জিতে যাওয়া সাইটের ছবি দিয়ে প্রতিস্থাপন করুন।
  • Pic [0], Pic [1], Pic [2], ইত্যাদির মত অ্যারে চালিয়ে আরও ছবি যোগ করুন
  • এ রাখা HTML কোডে আপনার স্লাইডশোর উচ্চতা এবং প্রস্থ সামঞ্জস্য করুন।
  • আপনার স্লাইডশোতে সীমানা যুক্ত করতে টেবিল বর্ডার, সেলপ্যাডিং এবং সেলস্পেসিং এট্রিবিউট পরিবর্তন করুন।
  • আপনি আপনার প্রয়োজন অনুযায়ী মিলিসেকেন্ডে স্লাইডশো এবং বিবর্ণ সময়কাল সামঞ্জস্য করতে পারেন।

এটা দেখতে কেমন?

স্লাইডশোটি নিচের মত দেখাবে এবং আমরা আপনার লেআউটের জন্য পূর্ণ প্রস্থের ছবি ব্যবহার করার পরামর্শ দিচ্ছি যাতে এটি সুন্দর দেখাবে।

কিভাবে জাভাস্ক্রিপ্ট দিয়ে একটি স্লাইডশো তৈরি করবেন?

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত