স্লাইড-শো কিভাবে করবেন?
স্লাইড-শো কি? এই প্রশ্নের সহজ উত্তর হচ্ছে, অল্প জায়গায় অনেকগুলো কন্টেন্টকে ইউজারের সামনে তুলে ধরাকে স্লাইড-শো বুঝানো হয়। সেটা ছবি হোক বা লেখা অথবা ভিডিও। যে কোন কিছু হতে পারে। যা প্রতিনিয়ত স্লাইড হয়ে ইউজারের সামনে সুন্দর ভাবে উপাস্থাপিত হয়, অথবা ইউজারের ইচ্ছে অনুযায়ী স্লাইড হয়ে ইউজারকে ওয়েবসাইটের কন্টেন্ট সম্পর্কে প্রাথমিক ধারনা দিতে সহায়তা করে। আমি এখানে সিম্পল একটি স্লাইড-শো করে দেখালাম, যা নিজে থেকেই স্লাইড হবে না তবে ইউজার তার ইচ্ছে মোতাবেক স্লাইড করতে পারেন। দুই পাশে তীর চিহ্নতে ক্লিক করলে স্লাইড হবে। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="slider-style.css">
</head>
<body>
<div class="slider-container">
<div class="slider" id="slide_image">
<div class="img">
<img src="images/bandarban.jpg" alt="Bandarban">
<span class="place-name">Nilachol - Bandarban</span>
</div>
<div class="img">
<img src="images/cox-bazar.jpg" alt="Cox bazar">
<span class="place-name">Sea Beach - Cox Bazar</span>
</div>
<div class="img">
<img src="images/sundarban.jpg" alt="Sundarban">
<span class="place-name">Sundarban - Khulna</span>
</div>
<div class="img">
<img src="images/chittagong.jpg" alt="Chittagong">
<span class="place-name">Foy's Lake - Chittagong</span>
</div>
<span class="img">
<img src="images/botanical-garden.jpg" alt="rangamati">
<span class="place-name">Botanical Garden - Dhaka</span>
</div>
<span id="prev">«</span>
<span id="next"> »</span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.js"></script>
<script>
$('#slide_image').cycle({
fx: 'scrollDown',
speed: 'slow',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
</body>
</html>
ডেমুতে ব্যবহ্নত সিএসএস ফাইল
* {
margin: 0;
padding: 0;
}
.slider-container {
height: auto;
width: 90%;
margin: auto;
position: relative;
}
.slider {
position: relative;
padding: 0px;
margin: 0px;
border: 3px double #ccc;
box-shadow: 0px 8px 12px rgba(0, 0, 0, 0.7);
}
.img {
position: relative;
width: 100%;
}
.slider img {
width: 100%;
height: 100%;
position: relative;
}
#prev {
position: absolute;
color: white;
font-size: 22px;
top: 43%;
left: 0px;
z-index: 99;
background: green;
padding: 2px 5px;
cursor: pointer;
border: 1px solid #fff;
border-left: none;
}
#next {
position: absolute;
color: white;
font-size: 22px;
top: 43%;
right: 0px;
z-index: 99;
background: green;
padding: 2px 5px;
cursor: pointer;
border: 1px solid #fff;
border-right: none;
}
#next:hover,
#prev:hover {
color: red;
}
.place-name {
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 22px;
padding: 7px 0;
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
z-index: 999;
display: block;
}
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন এইচটিএমএল আইকন
বিস্তারিত দেখুন ওয়েবের যত ফন্টস
বিস্তারিত দেখুন সিএসএস এনিমেশন
বিস্তারিত দেখুন হরেক রকম মেনু
বিস্তারিত দেখুন রকমারি বাটন
বিস্তারিত দেখুন