আশা করি সবাই ভালো আছেন। আমিও ভালো আছি।
সবার মত আমি বলব না যে এস এম সুদীপ বিডি এর সাথে থাকলে সবাই ভালো থাকে।
তবে আমি চেস্টা করি সবাই কে ভালো রাখার।আর পরম করুনা ময় সৃষ্টি কর্তার কাছে প্রার্থনা করি যেন তিনি সবাই কে ভালো রাখেন।
আজ আমি আবার একটি বিষয়ে লিখতে চাচ্ছি।
Html and Css এর সাহায্যে কি ভাবে Image Slider বানাবেন।
অনেকেই এই বিষয় পারেন।কিন্তু আমি আজ এই টিউটোরিয়াল দিচ্ছি তাদের জন্য যারা পারেন না।
আর যারা পারেন তাদের কে অসংখ্য ধন্যবাদ।
 |
| Html and Css এর সাহায্যে কি ভাবে Image Slider বানাবেন। |
তবে শুরু করা যাক...
আমরা সবাই চাই আমাদের সাইট এ একটি স্লাইডার থাকুক।
একেক টি সাইট এ একেক ভাবে স্লাইডার তৈরি করে থাকেন।
স্লাইডার বেশিরভাগ সাইট এ জাভাস্ক্রিপ্ট এ তৈরি করা।
জাভাস্ক্রিপ্ট স্লাইডার সাইট এর লোডিং বারিয়ে দেয়।
এবং অনেক ডিভাইজে জাভাস্ক্রিপ্ট সাপোর্ট ও নেয় না।
এটি ১ টি চরম অসুবিধা তাই না।
অনেকে আবার হতাসও হয়।তারা আর সাইট এ স্লাইডারি ব্যবহার করেন না।
কিন্তু তারা হয়ত জানে না শুধু এইচ টি এম এল এবং সি এস এস এর সাহায্যেও এই স্লাইডার তৈরি করা সম্ভব।
আজ কে তাই আমি শুধু এইচ টি এম এল এবং সি এস এস এর সাহায্যে কি ভাবে স্লাইডার বানাবেন।
সেই বিষয়ে বিস্তারিত আলোচনা করব।
কোড নংঃ- ০১
<html>
<head>
<title>SMsudipBD.Com Html & Css Slider</title>
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="slider-holder">
<span id="slider-image-1"></span>
<span id="slider-image-2"></span>
<span id="slider-image-3"></span>
<span id="slider-image-4"></span>
<div class="image-holder">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwzzXJ73eHFXj4c7gVCApoOI0jA5nFT-hIpQx8ND5ZdH6e53k8gdE-TendTCBQ9BFQ3f-SKi9cyKFhJDtx6FgAv_hsCmPk14T_4AI6A-3hfSF4X2tVmfOj_gesXyqTc-BJ2eZiot3yAIgN/w72-h72-p-k-no-nu/hhhhhhhhhhhhhhhhhhhhhhhhhhhhh0000-980x400.jpg" class="slider-image" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBJvJkNKCf5QhvfnlKRzL7Lzqz6PIH3SrPYapzJITjlk4D6bo_MGpW_72iP6SDVqfJc63NTejPh_iUNOdv1c8qb5hOV8Dtly66V9crZ893-BOPC6NW3ye6qxd9NbZz2t507goNER9K2uJ/w256-h320/%25E0%25A6%25B8%25E0%25A7%2581%25E0%25A6%2596%25E0%25A7%2587%25E0%25A6%25B0+%25E0%25A6%25AA%25E0%25A6%25BE%25E0%25A7%259F%25E0%25A6%25B0%25E0%25A6%25BE.jpg" class="slider-image" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-mpuK7O-XGVk8pY65eu7qJm9CVoLm5eMuH0CF1SUpB09pLaU6YTaPHSaT3t6pFicDmi0aqVm4A1BQuxOk_mdx78KG72KoomBhJKGIOahFbgNTT4DoINYv4Luy41Gvg-5XzdfNyYkTjShc/w72-h72-p-k-no-nu/img+1.jpg" class="slider-image" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmsHMDyNqViWzL2QCrF4DwHyYTwZs3Px3ZkZx-CKxeJNRoeDUWfynZT-_Yze3ulcrVY4i07bhdouCIA1RGOQbDE7sOAPiin5HY4kH7652ORvidzzM1x9IHvPll_uuTItTssSUI-8F-fKj0/w272-h320/%25E0%25A6%2586%25E0%25A6%259C+%25E0%25A6%2585%25E0%25A6%25A8%25E0%25A7%2587%25E0%25A6%2595+%25E0%25A6%25A6%25E0%25A6%25BF%25E0%25A6%25A8+%25E0%25A6%25AA%25E0%25A6%25B0%25E0%25A7%2587+%25E0%25A6%25A4%25E0%25A7%258B%25E0%25A6%25AE%25E0%25A6%25BE%25E0%25A6%2595%25E0%25A7%2587+%25E0%25A6%25A6%25E0%25A7%2587%25E0%25A6%2596%25E0%25A6%25B2%25E0%25A6%25BE%25E0%25A6%25AE.jpg" class="slider-image" />
</div>
<div class="button-holder">
<a href="#slider-image-1" class="slider-change"></a>
<a href="#slider-image-2" class="slider-change"></a>
<a href="#slider-image-3" class="slider-change"></a>
<a href="#slider-image-4" class="slider-change"></a>
</div>
</div>
<!-- css style start by SMsudipBD.Com -->
<style typr='text/css'>
.slider-holder {
width: 800px;
height: 400px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-holder {
width: 3200px;
background-color: red;
height: 400px;
clear: both;
position: relative;
-webkit-transition: left 5s;
-moz-transition: left 5s;
-o-transition: left 5s;
transition: left 5s;
}
.slider-image {
float: left;
margin: 0px;
padding: 0px;
position: relative;
width: 800px;
height: 400px;
}
#slider-image-1:target ~ .image-holder
{
left: 0px;
display:block;
}
#slider-image-2:target ~ .image-holder
{
left: -800px;
display:block;
}
#slider-image-3:target ~ .image-holder
{
left: -1600px;
display:block;
}
#slider-image-4:target ~ .image-holder
{
left:-2400px;
display:block;
}
.button-holder
{
position: relative;
top: -20px;
}
.slider-change
{
display: inline-block;
height: 10px;
width: 10px;
border-radius: 50px;
background-color:#000;
border:3px dotted #ff12cf;
}
</style>
<!-- css style end by SMsudipBD.Com -->
</body>
</html>[/CODE]উপরিক্তে কোড আমি এক সাথে দিছি।ভেংগে ভেংগে দিলে হয়ত আরটিকেল বড় হয়ে যেত তাই ছোট করে দিলাম।
আপনারা যদি এটি ব্যবহার করেন , তবে বডির ভিতরে html & css style দেওয়া আছে।
আলাদা আলাদা ভাবেও কানেক্ট করতে পারেন।
পরিশেষে বলতে চাই , আমার এই আর্টিকেলে যদি এত টুকু ও সমস্যা অনুভব করেন বতবে নির্দ্বিধায় কমেন্ট বক্সে
বলে ফেলুন।
অবশ্যই আমি আপনাদের সমস্যা টি সমাধান করার সর্বচ্ছ চেষ্টা করব।
এত ক্ষন ধরে আমার এই টিউটোরিয়াল মনোযোগ সহকারে পড়ার জন্য আপনাকে অসংখ্য ধন্যবাদ।
অনেক সময় ব্যয় করে ১ টি টিউন বানাই , অথচ আপনাদের মন্তব্য আমি পাই না। তখন মনে হয় আমার টিউন গুলো কারো উপকারে আসে না।
আপনাদের মন্তব্য পেলে নতুন আরেক টিউন নিয়ে হাজির হব খুব শিগ্রই।
আগামি টিউন হবেঃ-
কিভাবে ব্লগারের Widget/Section মোবাইল ভিসিবল করবেন
কোন অসুবিধা মনে হলে নিচের কমেন্ট বক্সে কমেন্ট করে জানাবেন।আজ আর বেশি কিছু লিখছি না।
অবশ্যই আমার ভুল গুলো ধরায় দিবেন , আমি চেস্টা করব আমার ভুল গুলো শোধরানোর।
সকলের মঙ্গল ময় জীবন, সুসাস্থ কামনা করে আজকের টিউটোরিয়াল এখানেই শেষ করতেছি।
ভালো থাকবেন।
টাটা।
পোস্ট রেটিং করুন
|
SMsudipBD.Com
Web Development & Design. |
টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!