0

In my image carousel, the main thing that changes is the value of the margin-left. From knowing this value, I wanted to try to interpret a slide number (like 'Image 3 of 4'). I got the number of all slides with:

var all_slides_width = $('#gallery_wrapper').outerWidth();
var slide_width = $('.image_content').outerWidth();
var slide_quantity = all_slides_width / slide_width;

Then I wanted to get the number of the currently visible image with:

var margin_left = parseInt($('#gallery_wrapper').css('margin-left'));
var slide_count = parseInt(-margin_left + slide_width) / slide_width;

and displaying it with:

<span class="slide_number"></span>
<script>
    $( '.slide_number' ).text( 'Image ' + slide_count + " of " + slide_quantity);
</script>

The problem is, that the margin-left changes with every new slide. So I need a loop that changes the slide_count every time the margin-leftchanges. How can I achieve this? A setTimeout of every second was obviously very inefficient. Here's a fiddle of my current status: http://jsfiddle.net/cqgnvsce/

Retador
  • 223
  • 1
  • 3
  • 11

1 Answers1

1

I just deleted your timeout and self-call from slide_number(). Is that what you were trying to do? http://jsfiddle.net/76zfn6ga/ You're already calling slide_count whenever you call slide() so I don't see a need for a loop. In fact, why don't you call slide_number() from within slide()?

var slide_number = function () {
    var margin_left = parseInt($('#gallery_wrapper').css('margin-left'));
    var slide_count = parseInt(-margin_left + slide_width) / slide_width;
    $('.slide_number').text('Image ' + slide_count + " of " + slide_quantity);
};
Clayton Leis
  • 1,288
  • 9
  • 20
  • The problem that occured now, is that everything is shifted – image 2 is now image 1, etc… And I actually would like to see "Image 1 of 1" when the first slide is loaded? Do you have an idea how that could be implemented? – Retador Oct 14 '14 at 19:28
  • But putting slide_number() into slide() is still a very good idea! :) – Retador Oct 14 '14 at 19:29
  • I bet you can get that on your own. – Clayton Leis Oct 15 '14 at 12:54