Image Slider - In Skeleton FrameWork | Tutorial For Beginners

naveed
4-10-2017

Image Slider In Skeleton


What will you Learn?

  • You Will Learn How To Add Slider In Skeleton FrameWork

- Example Of Slider -


  • Skeleton Slider
  • Skeleton FrameWork
  • Skeleton Template

As you Know Skeleton FrameWork Does not Come With Silder but at any point if we want so we can add our own slider in this tuturials iam telling you how to add Flex Slider What you need to do is just go to flex slider website and download Slider And then you will get something like this


Skeleton

From This We want Just Fonts Folder , flexslider.css , jquery.flexslider.js Files put flexslider.css on the head section , And Html Code in the body Section Or Wherever you want your slider And Last js Files at the bottom of the body as you can see below


- Code | for | Code -

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

HTML - Code
<div class="flexslider">
<ul class="slides">
<li>
<img src="SkeletonTemplates/books.jpg" />
</li>

<li>
<img src="SkeletonTemplates/book1.jpg" />
</li>
<li>
<img src="SkeletonTemplates/capriola.jpg" />
</li>

</ul>
</div>
js - Code
<script src="http://ajax.googleapis.com/ ajax/ libs/ jquery/1/jquery.min.js"></script>

<script defer src="js/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
start: function(slider){
$('body').removeClass('loading');
}
});
});
</script>