Hi and Happy New Year to you all 
Ok so im trying to make a slider in jquery and im stuck on making the nav bullets clickable. so if anyone can give me a few pointers i will be grateful. Please dont post solutions cause i want to struggle for a while lol, Check the code:
$(document).ready(function(){
$('.dropdown-toggle').click(function(){
$('.dropdown-menu').slideToggle(200)
});
$('.content-left').hover(function(){
$(this).addClass('active');
},
function(){
$(this).removeClass('active')
});
$('.arrow-next').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide')
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide')
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
});
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Games</title>
</head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<body>
<div class="wrapper">
<div class="nav">
<table class="table">
<tr>
<td>LOGO</td>
<td></td>
<td></td>
<td></td>
<td class="td-home">Home</td>
<td><a href="#">Games</a></td>
<td class="td-comingSoon"><a href="#">Coming Soon</a></td>
<td><a href="#" class="dropdown-toggle">Used Games</a></td>
<td></td>
<td></td>
<td><img src="images/search.png"></td>
</tr>
</table>
<div class="dropdown-menu">
<li><a href="#">Community</a></li>
<li><a href="#">PS2</a></li>
<li><a href="#">PS1</a></li>
</div>
</div>
<div class="slider">
<div class="slide active-slide" id="slider-content1">
<div class="content-right">
<img src="images/alien.jpg">
</div>
<div class ="content-left">
<h1>Alien: Isolation</h1>
<h2>An Eternal Terror</h2>
<p>Fifteen years after the events of Alien, Ellen Ripley's daughter, Amanda enters a desperate battle for survival, on a mission to unravel the truth behind her mother's disappearance. As Amanda, you will navigate through an increasingly volatile world as you find yourself confronted on all sides by a panicked, desperate population and an unpredictable, ruthless Alien. Underpowered and underprepared, you must scavenge resources, improvise solutions and use your wits, not just to succeed in your mission, but to simply stay alive.</p>
</div>
</div>
<div class="slide" id="slider-content2">
<div class="content-right">
<img src="images/batman.jpeg">
</div>
<div class="content-left">
<h1>Batman:Arkham Knight</h1>
<h2>Who is the Arkham Knight?</h2>
<p>In the explosive finale to the Arkham series, Batman faces the ultimate threat against the city he is sworn to protect. The Scarecrow returns to unite an impressive roster of super villains, including Penguin, Two-Face and Harley Quinn, to destroy The Dark Knight forever</p>
</div>
</div>
<div class="slide" id="slider-content3">
<div class="content-right">
<img src="images/division.jpg">
</div>
<div class="content-left">
<h1>Tom Clancy's The Division</h1>
<h2>Post-pandemic New York</h2>
<p>The Division takes place in New York three weeks after a lethal virus, released on Black Friday, has swept through the city. One by one, basic services have failed. Society has collapsed into chaos. The President invokes Presidential Directive 51, and The Division, a top-secret unit of self-supporting tactical agents, is activated. Leading seemingly ordinary lives, Division agents are trained to operate independently of command in this type of emergency situation. When the lights go out, their mission begins.</p>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev"><img src="images/arrow-prev.png"></a>
<ul class="slider-dots">
<li id="bullet1" class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next"><img src="images/arrow-next.png"></a>
</div>
</div>
<!-- <div id="content"> </div> not yet
<div id="footer"> </div> -->
</body>
</html>
EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.