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

Mike MooreAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Slick812Commented:
greetings Mike Moore, , not sure about suggestions to make your buttons change the displayed Image, , also not sure about some of your element arrangements for the fadeshow container.

But, as I see it the back forward button clicks need to first determine which image is displayed, and then fade that one out, and pick the next image and fade that one in. You currently do not record the image displayed (by number ,ID or DOM object), or mark the image (<div>) with a data-current or add a class to mark the current showing, if you add a class like shown, or current, then on button click, you can do a class search
$(".shown") and get the current displayed, and then fade it, remove the class "shown", and maybe use your .next() to get another image and to the other image add the class  "shown", and then fade it in.
It may or may not be helpful here, but you could add a class "first" to the initial image, and a class "last" to the final image, that way you will not need a cumbersome detector like your -
      if (!currentThumb.length) {
you can just test for the class -
     if ($( ".shown" ).hasClass( "last" ))
     else
     if ($( ".shown" ).hasClass( "first" ))

and then move to next image OR go to the class first or last image

- - - - - - - - - - - -
Also I do not beleive the -
      <div><img src="images/1.jpg"></img></div>  

need those useless <div> around them
0
Julian HansenCommented:
You can add this to your script file

	$('#arrowRight, #arrowLeft').click(function(e) {
		e.preventDefault();
		if (this.id == 'arrowRight') {
			$('#slideShow > div:first')
				.fadeOut(1000)
				.next()
				.fadeIn(1000)
				.end()
				.appendTo('#slideShow');
		}
		else {
			console.log('here');
			$('#slideShow > div:last')
				.prependTo('#slideShow')
				.fadeIn(1000)
				.next()
				.fadeOut(1000);
		}
	});

Open in new window


Working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike MooreAuthor Commented:
That Worked Thanks
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.