troubleshooting Question

URGENT HELP With Jquery Image Slider

Avatar of Mike Moore
Mike Moore asked on
jQueryJavaScriptJScript
4 Comments1 Solution696 ViewsLast Modified:
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 

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>

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;
}
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros