Solved: URGENT HELP With Jquery Image Slider

Hi all,

I have made a jquery image slider and it works fine however I need to add some additional functionality and am struggleing.

I just need to make the two arrows work so when they are clicked it will scroll through the gallery left and right.

any help asap would be great

here is the code :

jquery

$(document).ready(function () { // this function loads all code before it runs

    var timer = ''
    var currentImage = $('#slideShow > div:first') // set first Image for slideshow
    var currentThumb = $('#thumbs > img:first') // Set first Image for Thumbnails
    $('#end').attr('disabled', 'disabled') // attach disabled attribute to end button
    $('#end').css({
            "background": "#e74c3c"
            , "opacity": "0.3"
            , "cursor": "not-allowed"
        }) // set css rules when the end button is inactive
    $("#slideShow > div:gt(0)").hide(); //hides all images greater than 0 
    $("#thumbs > img:eq(0)").css({
            "border": "2px solid #3498db"
            , "opacity": "1"
        }) // set css rules for active thumbnail
    function start() {
        timer = setInterval(function () {
            $('#slideShow > div:first') // Target div Element within #sideShow
                .fadeOut(1000) // fade out current image
                .next() // select next element 
                .fadeIn(1000) // fade in next element
                .end() // End the process 
                .appendTo('#slideShow'); // add functionality to slideshow element
            currentThumb.css({
                    "border": "3px solid #3498db"
                    , "opacity": "0.5"
                }) // apply css rules to active thumbnail 
            currentThumb.next().css({
                    "border": "3px solid #3498db"
                    , "opacity": "1"
                }) // apply css rules once it changes to next thumbnail
            currentThumb = currentThumb.next() // set veariables value to next 
            if (!currentThumb.length) { // checks if the length does not have a valid value 
                currentThumb = $('#thumbs > img:first') // sets back to first image
                currentThumb.css({
                        "border": "3px solid #3498db"
                        , "opacity": "1"
                    }) // applies css rules back to defult
            }
        }, 3000); // sets slideshow timer to 3 seconds per slide
    }
    $(document).on('click', '#start', function () { // onclick event for strat button 
            start();
            $(this).attr('disabled', 'disabled') // sets the value of the start button to disabled = True
            $(this).css({
                    "background": "#e74c3c"
                    , "opacity": "0.3"
                    , "cursor": "not-allowed"
                }) // applies css styles when button is disabled
            $('#end').removeAttr("disabled") // enables end button when start button is clicked
            $('#end').css(({
                    "background": "#3498db"
                    , "opacity": "1"
                    , "cursor": "pointer"
                })) // applies styles when end button is disabled 
            for (var i = 0; i < 5; i++) { // for loop to change cursor style for all thumbnails
                $("#thumbs >  img:eq(" + i + ")").css({
                    "cursor": "not-allowed"
                })
            }
        }) // end for loop
    $(document).on('click', '#end', function () { // onclick event for end button
        location.reload() // resets the slideshow by reloading the page 
    })
     
}); // End ready function

Open in new window

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Image Slide Show</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>

<body> 
<div id="container">
<div id="slideShow">
<div><img src="images/1.jpg"></img></div>    
<div><img src="images/2.jpg"></img></div>     
<div><img src="images/3.jpg"></img></div>     
<div><img src="images/4.jpg"></img></div> 
<div><img src="images/5.jpg"></img></div> 
</div> 
<div id="arrowLeft"><img src="images/arrowLeft.png"></img></div>
<div id="thumbs">
<img src="images/1.jpg"></img>  
<img src="images/2.jpg"></img>    
<img src="images/3.jpg"></img>     
<img src="images/4.jpg"></img> 
<img src="images/5.jpg"></img> 
</div>
<div id="arrowRight"><img src="images/arrowRight.png"></img></div>
</div>
</div>
<div id="btn">
<button id="start">Start</button>
<button id="end">Stop</button>
</div>
</body>

</html>

Open in new window

CSS

/* START CSS RESET */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/* END CSS RESET */
body{
background-color: #2373a7;
}
#slideShow{
width: 900px; 
height: 550px; 
margin: 15px auto;
box-shadow: 3px 10px 20px #13537c;
border: 0spx ; 
border-radius: 40px;
}

#slideShow img{
width: 900px; 
height: 550px;
border: 0px ; 
border-radius: 40px;
position: absolute;
}

#thumbs{
margin: 0px auto;
width: 900px;
}

#thumbs img{
height:55px;
width: 55px; 
border: 3px solid #a4cfeb ; 
border-radius: 200px;
display: inline; 
float: left;
margin-left: 60px; 
box-shadow: 3px 10px 10px #13537c;
margin-bottom: 10px; 
cursor: pointer;

}

#btn{
width: 900px;
margin: 0 auto;
}

#btn #start, #end{
width: 430px; 
height: 70px; 
border: none; 
border-radius: 5px;
margin-left:8px;
margin-top: 5px;
color: white; 
background: #3498db;
box-shadow: 3px 10px 10px #13537c;
font-size: 16px;
cursor: pointer;
}
 

#arrowRight, #arrowLeft{
margin: 0px auto;
width: 900px;
}

#arrowRight img, #arrowLeft img{
height: 50px;
width: 50px; 
padding: 5px; 
border: 3px solid black ; 
border-radius: 200px;
display: inline; 
float: left;
margin-left: 60px; 
box-shadow: 3px 10px 10px #13537c;
margin-bottom: 10px; 
cursor: pointer;
}

Open in new window