CODEWITHSUNDEEP
javascriptjqueryhtml
Adjit
Adjit

Reputation: 10305

jQuery image carousel not sliding

Trying create an image carousel whose speed relies upon mouse positioning (i.e. if the mouse is close to the edge of the screen it moves fast, directly in the middle it doesn't move etc.) My issue right now being that the image carousel doesn't move at all. Could be a variety of reasons for it not working, but I am not really sure as to why it isn't working or even if this is a 'good' carousel algorithm.

Created a speed function which I am positive needs work, but I will only be able to know that once I see the image carousel actually moving.

Fiddle

JQuery

$(document).ready(function(){
    $('.carousel').mousemove(function(e) {
        var mpos = e.pageX;
        var speed = $(this).getSpeed(mpos);
        var dir = $(this).getDir(mpos);
        var $ul = $(this).children('ul');
        var cwidth = $ul.width();

        $('#speed').html(speed);

        if(speed != 0) {
            if(dir == -1){
                $ul.animate({
                    left: 0
                }, speed, 'linear');
            }
            if(dir == 1){
                $ul.animate({
                    left: -cwidth
                }, speed, 'linear');
            }
        }

    });
});

$.fn.getSpeed = function(mpos){
    var width = $(this).width();
    var center = width/2;
    var ps = (mpos-center)/10;
    var speed = ps * ps - (width % 100);

    if(speed >= 0) return speed;
    else return 0;
};

$.fn.getDir = function(mpos){
    var width = $(this).width();
    var center = width/2;

    if(mpos > center) return 1;
    else return -1;
};

HTML

<div class="carousel">
    <ul>
        <li><img src="http://placehold.it/200x200"/></li>
        <li><img src="http://placehold.it/200x200"/></li>
        .
        .
        .
        <li><img src="http://placehold.it/200x200"/></li>
    </ul>
</div>
<div id="speed"></div>

Upvotes: 0

Views: 200

Answers (2)

ReynekeVosz
ReynekeVosz

Reputation: 136

There are several problems you have here.

First problem you got is, that position "relative" or "absolute" are missing on the ul.

carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 200px;
}

.carousel ul {
    position: absolute;
    display: block;
    list-style: none;
    white-space: nowrap;
}

Then you need to stop your animations before starting another:

$ul.stop().animate

But the biggest problem is, that your "speed" is not a real speed at all. If your speed is "100", it is very fast. This means that the animation will be done within 100 milliseconds! Thats so fast that you cannot see the animation.

So if you are moving your mouse near to the middle of you gallery it's moving fast and on the edges outside it's moving slow.

You could fix your speed by subtracting your actual mpos-value from a maximum-speed:

var speed = ps * ps - (width % 100);

// SPEED FIX
speed = 5000 - (speed * 2);

Here is the fiddle: http://jsfiddle.net/56rwR/1/

BUT!! this is buggy as hell because is has not a real speed.. only this animation time which is proportional to the ul-width..

I would recommend you to use a script like this here: http://bxslider.com/examples/ticker

and write an hover event which increases/decreases the speed.

Upvotes: 0

Trader
Trader

Reputation: 249

You have to fix your code to actually do what you want, but the main problem of not animating is fixed if you add the following css:

.carousel ul {
  position:relative;
  left:0px;

always check the documentation if you run into trouble: http://api.jquery.com/animate/

Upvotes: 1

Related Questions