ADs by Techtunes ADs
ADs by Techtunes ADs

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

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

ADs by Techtunes ADs

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>

ADs by Techtunes ADs
Level New

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


টিউনস


আরও টিউনস


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


টিউমেন্টস