Nivo Slider যুক্ত করুন আপনার ওয়েবসাইটে

(HTML + CSS) দিয়ে তৈরি একটি ওয়েবসাইটে কিভাবে একটি SLIDER তৈরি করতে হয় এই ভিডিও টিউটোরিয়ালের মাধ্যমে সেটি দেখানো হয়েছে। এখানে আমি NIVO SLIDER ব্যবহার করেছি।

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>

Level New

আমি Albert Subir Mondal। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 7 বছর 2 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 37 টি টিউন ও 2 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 4 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস