কীভাবে ইমেজ স্লাইড শো তৈরি করতে হয় সাথে এইচটিএমএল, সিএসএস এবং জাভা স্ক্রিপ্ট ব্যবহার করে ।

আপনি কী শিখতে আগ্রহী কীভাবে স্লাইড শো তৈরি হয়।

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

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

কীভাবে কী করবেন এবং কীভাবে কাস্টমাইজেশন করতে হয়। সব কিছু এই টিউটোরিয়াল এ ব্যাখ্যা করার চেষ্টা করব ।

প্রথমে সোর্স কোড দেখে নিন এবং আমি নিচে ব্যাখ্যা করব ।

Source Code:|css|html|js|

<style> .mySlides {display: none;} img {vertical-align: middle;} .slideshow-container { max-width: 1000px; position: relative; margin: auto; display:flex; flex-direction:rows; text-align:center; justify-content:center; border-radius:10px; } .myImg { border-radius: 25px cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 25;} .dot { height: 15px; width: 15px; margin: 0 2px; background-color: #49b8f4; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .active { background-color: #787878; } .fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } @media only screen and (max-width: 300px) { .text {font-size: 11px} } </style> <div id="loader" class="circle"></div> <div class="slideshow-container"> <div class="mySlides fade"> <img class="myImg" src="/priyo.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo2.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo3.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo4.jpg"/> </div> <div class="mySlides fade"> <img class="myImg" src="/priyo5.jpg"/> </div> </div> <br/> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div> <script> var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 1000); // } </script>

🍃

১. সিএসএস

সিএসএস অংশে আপনি চাইলে অনেক কিছু ই পরিবর্তন করতে পারবেন । তবে দেখতে হবে কোনো ভাবেই যেন ভুল না হয় । যেমন : আপনি চাইলেন আমি border-radius কে আরো radius করব কিন্তু আপনি 10px কে 500px দিয়ে দিলেন । এটা কী শো করবে আপনি কী ভাবছেন? কমেন্ট বক্স এ জানাবেন ।

উদাহরণ সিএসএস : .dot {
background-color: #49b8f4;
}
#49b8f4 না দিতে চাইলে আপনি আপনার মনের ইচ্ছে মতো রং পছন্দ করে দিতে পারেন । কেউ আপনাকে কিছু বলবে না ।

২. এইচটিএমএল

এখানে চাইলে আপনি আরো ফটো এবং ডট যুক্ত করতে পারেন । কীভাবে করবেন অধিক ফটো যুক্ত করবেন :

    <div class="mySlides fade">
         <img class="myImg" src="/priyo.jpg"/>
    </div>

এটি কপি করে পেস্ট করেন । আর ইমেজ এড্রেস যুক্ত করুন src তে।

কীভাবে অধিক ডট যুক্ত করবেন -

<span class="dot"></span>

এটি কপি করে পেস্ট করেন ।


বিশেষ দ্রষ্টব্য : সুন্দর দেখার জন্য আপনি যে কয়টি ফটো যুক্ত করবেন ঠিক সেই কয়টি ডট যুক্ত করতে হবে ।

৩. জাভা স্ক্রিপ্ট

আপনি এখানে তেমন কিছু কাস্টমাইজেশন করতে পারবেন । তবে হ্যা পারবেন, যদি আপনার জাভা স্ক্রিপ্ট সম্পর্কে দক্ষতা থাকে।  আপনাকে আমি এখানে শুধুমাত্র শিখাব । ইমেজ স্লাইড শো এর সময় নির্ধারণ করতে । অর্থাৎ আপনার একটি ফটো কতক্ষণ শো করবে ।
জাভা স্ক্রিপ্ট অংশে □ setTimeout(showSlides, 1000); এটি খুজে বের করুন । এখানে বুঝানোর জন্য আমি এক সেকেন্ড দিয়েছি । আপনি বলতে পারেন এক সেকেন্ড কিন্তু এখানে ১০০০ কেন দিয়েছেন? উত্তর সংক্ষিপ্ত ভাবে দিচ্ছি ১০০০ মানে ১ সেকেন্ড । ২০০০ মানে ২ সেকেন্ড । ১০০০০ মানে ১০ সেকেন্ড ।  তারপর আপনি ১০০০ কে পরিবর্তন করে আপনার প্রয়োজন অনুযায়ী সময় নির্ধারণ করুন ।

উদাহরণ :
setTimeout(showSlides, 2000);


রেজাল্ট বা ফলাফল :


শেষ কথা:
আপনি যদি কাজটি সঠিক ভাবে সম্পূর্ণ করতে পারেন । তাহলে এই সোর্স কোড ব্যবহার করে আপনি সহজেই যেকোনো ফটো আপনার ওয়েবসাইটে স্লাইড শো করতে পারবেন । কোনো সমস্যা হবে না ।

বিশেষ দ্রষ্টব্য :
সোর্স কোড এ কোনো ভুল নেই ।কারণ পরীক্ষা করা হয়েছে এবং তা আপনারা উপরে রেজাল্ট হিসেবে দেখছেন ।



My Talk:

ধন্যবাদ আপনাকে এই ব্লগ টি পড়ার জন্য । আসসালামু আলাইকুম! আমি শেখ জুবায়ের । কিছু কথা বলতে চাই । আসলে অনেক কষ্ট করে, চিন্তাভাবনা করে, প্রত্যেক বিষয়বস্তু সম্পর্কে জ্ঞান অর্জন করে এবং অনেক সময় নিয়ে এই আর্টিকেল বা কন্টেন্ট বা ব্লগটি লিখেছি । তাবে কিছু বানান বা বাক্যের ভূল হতে পারে । আশা রাখি ক্ষমা সুন্দর দৃষ্টিতে দেখবেন ।   তবুও কোনো সমস্যা হলে কমেন্ট বক্স এ জানাবেন । আমি আপনার প্রশ্নের যথাযথ উত্তর দেওয়ার চেষ্টা করব ।  আশা রাখি উপকারে আসবে । অউপকারে আশার মতো কিছু লিখিনি   আমি এটি আমার বিশ্বাস। 



🍃

My Talk:

Thank you for reading this blog.
Hi, Assalamualaikum! I am Sheikh Jubayer. I want to say something. Actually I have written this article or content or blog with a lot of difficulty, thinking and taking a lot of time. However, there may be some spelling or sentence mistakes. I hope you will see the apology in a good light. Hope you benefited. However, if there is any problem, leave a comment. I will try to answer your question properly. Thank you!