仅显示第一张幻灯片的javascript内容 slider

Question

我的 home page 上有一个文本 slider ，应该根据选择的箭头单独显示幻灯片。目前，仅显示第一张幻灯片，之后的每张幻灯片都是空白的。制作每个单独的幻灯片放映时我缺少什么？

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');

    });
});

Answer 1

看看这个 fiddle .我将它缩小到最低限度。

我从具有固定宽度的 slider 蒙版开始，然后设置其他宽度。

Ludovico Grossi 关于让滑动元素向左浮动的说法是正确的。当它们是没有 float 的“ block ”元素时，它们会堆叠。如果将它们更改为“内联”元素，则它们不能具有固定宽度。它可以将它们设置为“inline-block”，但我不知道是否所有浏览器都支持它。将它们作为“ block ”并向左浮动是可行的。

我还必须进行一些其他更改。其中之一是 .animate()函数不会导致显示隐藏的元素。它在 documenation page 上这样说.而不是通过调用 .hide() 来隐藏幻灯片，它们只是通过将掩码元素的溢出设置为隐藏而在 View 之外。

我还将文本对齐中心放在幻灯片元素上，而不是容器元素上。

更新:

我创建了另一个 fiddle以 adeneo's fiddle 中的代码开头并包括必要的更改。我将注释放在所有添加、删除或更改的代码和 CSS 旁边。我不得不对 html 进行一项更改。我添加了 <div id="home">包裹一切的元素。没有它，CSS 选择器将无法匹配任何内容。