URGENT HELP With Jquery Image Slider

Mike Moore
Mike Moore used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
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

Author

Commented:
That Worked Thanks
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial