javascript - simple jquery slideshow with navigation? -

So I'm in the process of creating a very simple jQuery / CSS slideshow for a course, it's about ten pages long, And just works fine if you want to go in that sequence from the beginning, but if you want to refresh the page for any reason, then it sends you to the first page. Since it is for a long time, I want to be able to "click" on a certain page ... can not it be very complicated?

Here's my jQuery

  function checkNav () (if ($ ('active-slide'). Haclus ('first') ($ '' Prev '). Hide ();. $ (' Next. ') Show ();} and if ($ (' active-slide '). Haclas (' last ')) {$ (' $ ('Previous') show ().;} And {$ ('next.') Show (); $ ('previous') show ().}}} Var main = function () {$ ('. Next') Click $ (function () {var currentSlide = $ ('Active-Slide'); var nextSlide = currentSlide.next ('slide') ; Var currentDot = $ ('.- Active Dot'); var nextDot = currentDot.next (); // if NextSlide is finally If the slide is, then go back to the first (next slide. === 0) {next slide = $ ('slide'). First (); NextDot = $ ('.' Dot). First (); } Current slide.fadeout (500) .removeClass ('active-slide'); next slide. Fade in (1100). Andclass ('active-slide'); current dot.remaclaw ('active-dot'); nextDot AddClass ('active-dot'); checken ();}) // current slide function $ ('.'). (Function () {var currentSlide = $ ('. Active-slide '); Var prevSlide = currentSlide.prev ('slide'); Var currentDot = $ ('.active-dot'); Var prevDot = currentDot.prev (); // If there is a previous slide, then go back to the previous (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'); Checkon ();}); }; $ (Document) .ready (main);  

And here's what looks like HTML

  & lt; Div class = "slide-active slide first" & gt; & Lt; Div class = "content" & gt; & Lt; P & gt; The first slide & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "slide" & gt; & Lt; Div class = "content" & gt; & Lt; P & gt; The second slide & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "previous slide" & gt; & Lt; Div class = "content" & gt; & Lt; P & gt; Third slide & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "slider-nav" & gt; & Lt; Div class = "prev" & gt; Previous & lt; / Div & gt; & Lt; Ul class = "dots" & gt; & Lt; Li class = "dot-dot" & gt; & Amp; Bulls; & Lt; / Li & gt; & Lt; Li class = "dot" & gt; & Amp; Bulls; & Lt; / Li & gt; & Lt; Li class = "dot" & gt; & Amp; Bulls; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div class = "next" & gt; Next & lt; / Div & gt; & Lt; / Div & gt;  

Here it is ... I want to be able to click on one of the tablets and go to this slide ....

< Click on Div class = "post-text" itemprop = "text">

  $ ('ul.dots li') (function () {var num = $ (this) .index (); var currentSlide = $ ('Active-slide'); var next slide = $ ('. Slide: eq (' + num + ')'); var current dot = $ ('active-dot'); var nextDot = $ (this ); Current slide.Fedot (600) .removeClass ('active-slide'); Next slide.Fade in (600) .adclass ('active-slide'); current dot.rmvol ('active State-dot "); NextDotkaddClass (" active-dot "); Chekn ();});