I've been asked at a job application to make jQuery slider plugin from scratch.
I just graduated as a Computer Science Engineer and to be honest, I've never been taught in college about jQuery. At all.
The little I know about it, is because I've read docs and experimented a little.
But a jQuery slider is very very far away from my current abilities.
I was reading this article on github http://rafbm.github.io/howtomakeaslider/ which is quite illustrative, but still it would be worthless to just copy the code (which by the way I do not understand fully), because what I need/want is to understand how to do one.
On the small free-lance jobs I've done, it's been easy because I just look for plugins, but now I realize that I need to start learning how to make these by myself, and it would be good to start by doing a slider.
What are the things I need? Like I was reading I should create a slider class and create methods for next(), prev() and goTo() sliding-methods. The problem is that for what I hear javascript/jQuery is not a pure OOP language, and it is done differently.
What are the basic things I need to store the images inside an array, know the current position and slide to the next/previous one?
Help would be much appreciated. My HTML and CSS markup is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Slider Plugin</title>
<style type=text/css>
a{
text-decoration: none;
color: black;
text-align: center;
}
.slider{
width: 300px;
height: 200px;
overflow: hidden;
float: left;
}
.slider > ul{
position: relative;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: 0.5s left;
-moz-transition: 0.5s left;
-ms-transition: 0.5s left;
-o-transition: 0.5s left;
}
.slider > ul li img{
width: 300px;
height: 200px;
overflow: hidden;
}
.img-thumb-container > ul{
list-style: none;
margin: 0;
padding: 0;
}
.thumb{
width: 50px;
height: 50px;
display: inline-block;
text-align: center;
}
.img-thumb-container{
float: left;
height: 150px;
width: 200px;
}
</style>
<script src=js/jquery.js></script>
<script src=js/slider.js></script>
</head>
<body>
<div class=img-thumb-container>
<ul>
<a href=#><li><button type=button>↑</button></li></a>
<a href=#><li>
<img src=images/s1.jpg class=thumb>
</li></a>
<a href=#><li>
<img src=images/s2.jpg class=thumb>
</li></a>
<a href=#><li>
<img src=images/s3.jpg class=thumb>
</li></a>
<a href=#><li><button type=button>↓</button></li></a>
</ul>
</div>
<div class=slider>
<ul>
<li><img src=images/s1.jpg></li>
<li><img src=images/s2.jpg></li>
<li><img src=images/s3.jpg></li>
</ul>
</div>
</body>
</html>
This is the basic markup I need for what I understand.
