javascript content slider displaying only first slide

Question

I have a text slider on my home page, that should display slides individually according to which arrow is selected. Currently, only the first slide is showing and each slide thereafter is blank. What am I missing to make each individual slide show?

jsfiddle

jQuery(document).ready(function($){
    // Setup Variables
    var slides = $('#slider_mask .slide_container').children();
    var total_slides = slides.children().length;
    var slide_width = $('#slider_mask').width();
    var current_slide = 0;

    slides.not(':first').hide();
    // Set the width of the slide_container to total width of all slides
    $('#slider_mask .slide_container').width(slide_width*total_slides);

    // Handle Right Arrow Click
    $('#slider_mask .right_button').on('click', function() {

        current_slide++;

        if(current_slide == total_slides){ current_slide = 0; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');


    });

    // Handle Left Arrow Click
    $('#slider_mask .left_button').on('click', function() {

        current_slide--;

        if(current_slide < 0){ current_slide = total_slides-1; }

        var negative_margin_required = current_slide*slide_width;
        $('#slider_mask .slide_container').stop().animate({marginLeft:-negative_margin_required+'px'},'fast');

    });
});

John S · Accepted Answer

Check out this fiddle. I scaled it down to a minimum.

I started with the slider mask having the fixed width and set the other widths off of that.

Ludovico Grossi is correct about making the slide element float left. When they are "block" elements without the float, they stack. If they are changed to "inline" elements, they cannot have a fixed width. It worked to set them to "inline-block", but I don't know if that is supported in all browsers. Having them as "block" and float left works.

I also had to make some other changes. One of which was that the .animate() function does not cause a hidden element to be shown. It says this on the documenation page. Instead of hiding the slides by calling .hide(), they simply are out of view by having overflow set to hidden for the mask element.

I also put the text-align center on the slide elements, rather than the container element.

UPDATE:

I created another fiddle that starts with the code from adeneo's fiddle and includes the necessary changes. I put comments next to all the code and CSS that was added, removed, or changed. I had to make one change to the html. I added the

element that wraps everything. Without it the CSS selectors don't match anything.

javascript content slider displaying only first slide

Answers (2)

Related Questions