Member Avatar for FarrisFahad

Hello all, I created this image slider and I need some tweeking with the code to make it work perfectly. I can't seem to know what is the problem ...
Here is the code:
jQuery:

$(document).ready(function(e) {

    images = ['picture-1.jpg', 'picture-2.jpg', 'picture-3.jpg', 'picture-4.jpg'];
    index = 0;

    function rotate_image(){
        $('#Images').css('background-image', 'url(images/' + images[index] +')');
        $('.Current-Picture').eq(index).css('background-color', '#FFF');
        $('.Current-Picture').eq(index-1).css('background-color', 'rgba(0,0,0,0.5)');
        index++;
        if(index == images.length){
            index = 0;
        }
    }

    $('#al').click(function(){
        $('#Images').css('background-image', 'url(images/' + images[index] +')');
        $('.Current-Picture').eq(index).css('background-color', '#FFF');
        $('.Current-Picture').eq(index+1).css('background-color', 'rgba(0,0,0,0.5)');
        index--;
        if(index == 0){
            index = images.length - 1;
        }
    });

    $('#ar').click(function(){
        $('#Images').css('background-image', 'url(images/' + images[index] +')');
        $('.Current-Picture').eq(index).css('background-color', '#FFF');
        $('.Current-Picture').eq(index-1).css('background-color', 'rgba(0,0,0,0.5)');
        index++;
        if(index == images.length){
            index = 0;
        }
    });

    rotateImage = setInterval(rotate_image, 3000);

    $('#Images').mouseover(function(){
        clearInterval(rotateImage);
    });

    $('#Images').mouseleave(function(){
        rotateImage = setInterval(rotate_image, 3000);
    });

});

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Rotating Experement</title>
</head>

<body>
<br />
<div id="Images" style="background-image:url(images/picture-1.jpg);">
    <div id="Images-Upper">
        <div id="Arrow-left"><img id="al" src="images/arrow-left.png" width="50" height="100" /></div>
        <div id="Arrow-right"><img id="ar" src="images/arrow-right.png" width="50" height="100" /></div>
    </div>
    <div id="Images-Lower">
        <div id="Current-Picture">
            <div class="Current-Picture"></div>
            <div class="Current-Picture"></div>
            <div class="Current-Picture"></div>
            <div class="Current-Picture"></div>
        </div>
    </div>
</div>
<script src="../jquery-1.11.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>

You can find the end project at: http://www.farrislab.net/jquery-slider
Inspect the code and tell me what you think ...

Let me explain the problem:
How the code should work: I want the image wrapper to move from one image to the other every three seconds. And if mouseover the image should stop from changing. And there is a left and right arrows. When clicked it should chnage to the next or prevoius image.

The problem: The right or next image button works great. But the left or previous button is not working well. Sometimes the image do not show and the bottom circles which tells you what image you are on does not work properly.

To understand more please visit the website and play a little with the interface

Thank you in advance
Farris

  • 2 Contributors
  • 1 Reply
  • 299 Views
  • 57 Minutes Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for diafol

A bit of code duplication here. Maybe you can wrap the whole "rotate" thing up in one function:

var index = 0;
var rotateImage;

rotate(inc)
{
    index = index + inc;
    if(index < 0) index = images.length - 1; //previous less than first go to last
    if(index > images.length - 1) index = 0; //next more than last go to first
    $('#Images').css('background-image', 'url(images/' + images[index] +')');
    $('.Current-Picture').eq(index).css('background-color', '#FFF');
    $('.Current-Picture').eq(index-1).css('background-color', 'rgba(0,0,0,0.5)');
}

$('#al').click(function(){
    rotate(-1);
});

$('#ar').click(function(){
    rotate(1);
});


$('#Images').mouseover(function(){
    clearInterval(rotateImage);
});
$('#Images').mouseleave(function(){
    rotateImage = setInterval(rotate(1), 3000);
});

rotateImage = setInterval(rotate(1), 3000);

Getting late here so only gave cursory look. Don't think this will solve setInterval. Will come back tomorrow.

Edited by diafol
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.