একটি ইমেজ স্লাইডার তৈরি করতে হলে আপনাকে এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট এর কাজ করতে হবে।
প্রথমেই নিচের এইচটিএমএল কোডগুলো কপি করে আপনি সাইটের যে জায়গায় ইমেজ স্লাইডার যুক্ত করতে চান সেখানে পেস্ট করে দিন। ইমেজ ট্যাগ এর সোর্স লিঙ্ক পরিবর্তন করে আপনার ইমেজের লিঙ্ক দিবেন এবং প্রয়োজনে আরো ইমেজ যুক্ত করতে পারেন।
<div class="slideshow-container">
<div class="img-box">
<img src="img1.jpg"/>
<div class="caption">Caption Text</div>
</div>
<div class="img-box">
<img src="img2.jpg"/>
<div class="caption">Caption Two</div>
</div>
<div class="img-box">
<img src="img3.jpg"/>
<div class="caption">Caption Three</div>
</div>
<div class="img-box">
<img src="img4.jpg" />
<div class="caption">Caption Four</div>
</div>
<a class="prev" onclick="slideImage(-1)"><</a>
<a class="next" onclick="slideImage(+1)">></a>
</div>
<div class="slider-dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>এইচটিএমএল এর কাজ শেষ হলে এবার সিএসএস এর কাজ। জাস্ট নিচের সিএসএস কোডটুকু কপি করে আপনার সিএসএস ফাইলের কোডের মধ্যে যুক্ত করে দিন অথবা এইচটিএমএল ফাইলে স্টাইল ট্যাগ এর ভিতরে পেস্ট করে দিন।
.img-box {
display: none;
width: 100%;
}
.img-box img {
vertical-align: middle;
width: 100%;
}
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
}
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 25px 10px;
margin-top: -22px;
color: white;
background-color: rgba(0,0,0,0.3);
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 5px 5px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0,0,0,0.5);
}
.caption {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
text-shadow: 0 0 5px black
}
.slider-dots {
padding: 20px;
text-align: center
}
.slider-dots .dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.slider-dots .active,
.slider-dots .dot:hover {
background-color: #717171;
}এইচটিএমএল এবং সিএসএস এর কাজ শেষে এবার কাজ জাভাস্ক্রিপ্ট এর। ইমেজ স্লাইডার সচল রাখার জন্য জাভাস্ক্রিপ্ট অবশ্যক। জাস্ট নিচের জাভাস্ক্রিপ্ট কোডগুলো কপি করে আপনার জাভাস্ক্রিপ্ট ফাইলের কোডের মধ্যে কিংবা এইচটিএমএল ফাইলে স্ক্রিপ্ট ট্যাগ এর ভিতরে পেস্ট করে দিন, তাহলেই আপনার কাজ শেষ।
var slideIndex = 1;
showSlides(slideIndex);
function slideImage(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("img-box");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = slides.length }
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
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";
}Download Project
তো আর্টিকেল মূলত শেষ। আপনি যদি পুরো প্রজেক্ট এর সকল কোড ডাউনলোড করে রাখতে চান তাহলে নিচে প্রজেক্ট এর গুগল ড্রাইভ লিঙ্ক দিলাম সেখান থেকে ডাউনলোড করতে পারবেন, ধন্যবাদ সবাইকে।