(HTML + CSS) দিয়ে তৈরি একটি ওয়েবসাইটে কিভাবে একটি SLIDER তৈরি করতে হয় এই ভিডিও টিউটোরিয়ালের মাধ্যমে সেটি দেখানো হয়েছে। এখানে আমি NIVO SLIDER ব্যাবহার করেছি।
Nivo Slider Download Link: https://github.com/Codeinwp/Nivo-Slider-jQuery
Nivo Slider Download Link: https://github.com/Codeinwp/Nivo-Slider-jQuery
//head tag এর মধ্যে <head></head> এই .css ফাইল গুলোর লিঙ্ককে কপি করতে হবে।
<link rel="stylesheet" type="text/css" href="css/bar/bar.css"/>
<link rel="stylesheet" type="text/css" href="css/dark/dark.css"/>
<link rel="stylesheet" type="text/css" href="css/default/default.css"/>
<link rel="stylesheet" type="text/css" href="css/light/light.css"/>
<link rel="stylesheet" type="text/css" href="css/nivo-slider.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="stylesheet" type="text/css" href="fonts/stylesheet.css"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
//slider div এর মধ্যে <div class="slider"></div> এই লাইন গুলো কপি করতে হবে।
<div class="slider-wrapper theme-light">
<div class="nivoSlider" id="slider">
<img src="images/1.jpg" title="This site developed by Albert Subir Mondal"/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt="" title="This site developed by Albert Subir Mondal"/>
<img src="images/4.jpg" alt=""/>
</div>
</div>
// body tag এর মধ্যে <body></body> কোন এক জায়গায় এই গুলো কপি করতে হবে।
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
No comments:
Post a Comment