创建多个滑块并使它们彼此分开运行答案

【问题标题】：Creating multiple sliders and making them function separately from one another创建多个滑块并使它们彼此分开运行
【发布时间】：2017-06-24 09:15:36
【问题描述】：

我目前正在为我正在创建的网站构建多个滑块。现在我相信我已经完成了一半，但偶然发现了一个我似乎无法解决的问题

由于有多个滑块，我设法得到length 或计算元素内显示的项目数（.slider）。 jquery length 中的值将作为on-click 触发器/事件的条件的一部分，即下面的if 条件。如何将length中的值传递给点击触发器，以使滑块左右移动

抱歉我的英语不好..

$(window).on('load', function() {


	var sliderWrapper      = $('.slider-wrapper'),
	    sliderWrapperWidth = sliderWrapper.width(),
	    slider             = $('.slider'),
	    slideItems         = $('.slider .slide-items'),
	    position           = 0;

    //var itemLengths = [];

	$('.slider-wrapper .slider').each(function() {
		var items = $(this).find('.slide-items').length;
		var sliderBox = $(this);

		//itemLengths.push(items.length); 
		slideItems.outerWidth( sliderWrapperWidth / 2 );


		sliderBox.width( slideItems.outerWidth() * items  )
    });

    $('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
        event.stopPropagation();
        if( position > 0 ) {
            position--;
            $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
        }
    });

    $('.slider-wrapper .slider .buttons .next').on('click', function(e) {
        event.stopPropagation();

	    if( position < totalSlides - 1 ) {
	        position++;
	        $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
	    }
    })


})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; 
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden; 
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; 
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0; 
}

.container .slider-wrapper .slider > div p {
  color: purple; 
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; 
}


.container .slider-wrapper .buttons div {
  background-color: cyan; 
}

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!DOCTYPE html>
<html>
<head>
	<title>Multiple Sliders</title>

	<link rel="stylesheet" type="text/css" href="style.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="script.js"></script>
</head>


<body>

<div class="container">

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>


        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>
        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>
        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>



</div>

</body>

</html>

【问题讨论】：

看看在您的活动中使用$(this)。它选择触发事件的元素。
仍在尝试弄清楚如何使用$(this) 来分别移动幻灯片。

标签： javascript jquery html css slider

【解决方案1】：

你可以这样使用：

$('.slider-wrapper').each(function() {
    var sliderWrapper      = $(this),
        sliderWrapperWidth = sliderWrapper.width(),
        slider             = sliderWrapper.find('.slider'),
        slideItems         = sliderWrapper.find('.slider .slide-items'),
        position           = 0;

    //itemLengths.push(slideItems.length); 
    slideItems.outerWidth( sliderWrapperWidth / 2 );


    slider.width( slideItems.outerWidth() * slideItems.length  );

    sliderWrapper.find('.buttons .prev').on('click', function(e) {
        ...
    });

    sliderWrapper.find('.buttons .next').on('click', function(e) {
        ...
    });
});

这样滑块的每个实例都有自己的变量和事件。

【讨论】：

【解决方案2】：

我在每个点击事件中都使用了$(this) 来存储与当前点击元素相关的变量。我还为每个滑块添加了一个data-slide 属性，它替换了position 变量，以便每个滑块都有自己定义的滑块位置。

我也把代码清理了一下，因为我很无聊。

$(document).ready(function() {

  $('.prev').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          currentSlide       = sliderWrapper.attr('data-slide');

      // Check if data-slide attribute is greater than 0
      if( currentSlide > 0 ) {
          // Decremement current slide
          currentSlide--;
          // Assign CSS position to clicked slider
          slider.css({'right' : currentSlide*slideItems.outerWidth() });
          // Update data-slide attribute
          sliderWrapper.attr('data-slide', currentSlide);
      }
  });

  $('.next').on('click', function(e) {
      event.stopPropagation();
      // store variable relevent to clicked slider
      var sliderWrapper      = $(this).closest('.slider-wrapper'),
    	    slideItems         = sliderWrapper.find('.slide-items'),
          slider             = sliderWrapper.find('.slider'),
          totalSlides        = slideItems.length,
          currentSlide       = sliderWrapper.attr('data-slide');

    // Check if dataslide is less than the total slides
    if( currentSlide < totalSlides - 1 ) {
        // Increment current slide
        currentSlide++;
        // Assign CSS position to clicked slider
        slider.css({'right' : currentSlide*slideItems.outerWidth() });
        // Update data-slide attribute
        sliderWrapper.attr('data-slide', currentSlide);
    }
  })

});

$(window).on('load', function() {

  $('.slider-wrapper').each(function() {
    var slideItems = $(this).find('.slide-items'),
    items = slideItems.length,
    sliderBox = $(this).find('.slider'),
    sliderWrapperWidth = $(this).width();

    slideItems.outerWidth( sliderWrapperWidth / 2 );
    sliderBox.width( slideItems.outerWidth() * items  );
  });

});

/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }

body {
line-height: 1; }

ol, ul {
list-style: none; }

blockquote, q {
quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

* {
box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto;
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden;
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0;
}

.container .slider-wrapper .slider > div p {
  color: purple;
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0;
}


.container .slider-wrapper .buttons div {
  background-color: cyan;
}

<div class="container">
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>

  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eget ex mi. Etiam a vestibulum ligula, id porta dui. Duis in iaculis quam. Integer aliquam justo nec nibh consequat vulputate.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
  <div class="slider-wrapper" data-slide="0">
    <div class="slider">
        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>

        <div class="slide-items">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
        </div>
    </div>
    <div class="buttons">
        <div class="prev">prev</div>
        <div class="next">next</div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【解决方案3】：

您的问题在于您使用了选择器。简而言之，事件函数内的选择器同时击中了两个滑块。但答案并不像使用 $(this) 那样简单。这是更长的答案：

jquery 的许多强大之处在于它使向元素事件添加侦听器变得微不足道。让我们拆开一段代码来了解发生了什么：

$('.slider-wrapper .slider .buttons .prev').on('click', function(e) {
    event.stopPropagation();
    if( position > 0 ) {
        position--;
        $('.slider-wrapper .slider').css({'right' : position*slideItems.width() });
    }
});

$('.slider-wrapper .slider .buttons .prev') 行是一个元素选择器，上面写着find ALL elements that have hierarchy of classes 'slider-wrapper slider buttons prev'。请注意 ALL - 这是您的代码出错的地方 - 我们稍后会修复它。该行的结尾是.on('click', function(e) {，即for EACH of the elements you found, listen for click events and fire the following function when you hear one。

所以 - 回顾一下，找到所有匹配的元素并在点击事件上触发一个函数。到目前为止一切都很好，但是点击事件内部发生了什么，以及它如何具体知道哪些匹配元素是函数中的上下文。或者在您的情况下，当我们只想影响与按钮相关的滑块时，我们如何阻止它影响两个滑块？

这是您问题的关键。从您的事件函数中查看这一行：

$('.slider-wrapper .slider').css({'right' : position*slideItems.width() });

这一行使用了一个选择器$('.slider-wrapper .slider')，它表示“查找具有此样式层次结构的所有元素”。我想一分钱现在可能会随你而去。当您只有一个滑块时，只有一个匹配元素，但页面上有两个滑块时，则有两个元素匹配此选择器。结果就是您所遇到的 - 单击一个按钮，两个滑块都会受到影响。

解决方案是修改此选择器以仅影响与按钮位于同一滑块中的元素，为此我们需要参考获得点击的按钮的上下文。查看 HTML，从按钮开始，我们需要向上到达带有 class='slider-wrapper' 的元素，然后找到带有 class='slider' 的子元素。选择器需要是：

$(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });

这里有几块jquery的魔法来解释一下。 $(this) 用于事件函数内部，指的是触发事件的元素。您将元素上的选择器连接到 class='prev'，所以当我们使用 $(this) 时，它就是我们从中选择的起始元素。

.parents() 是一个选择器，它从给定的起始元素向上遍历元素的祖先树。由于 jquery 链接（选择器之间的点），我们可以一个接一个地链接选择器，因此我们可以通过这种方式链接选择器来遍历 DOM。添加.parents('.slider-wrapper') 表示寻找拥有class='slider-wrapper' 的父母。

继续该过程，.find('.slider') 使用查找选择器从给定元素的 DOM 树中查找具有class='slider' 的任何子元素。

所有这一切的结果是，当您单击滑块 1 中的按钮时，所描述的选择器仅影响滑块 1。滑块 2 也是如此。

请注意，这里有一个广泛的外部选择以将事件侦听器应用于多个元素，然后在函数中使用 $(this) 正是 jquery 发明者的意图。使用祖先和子选择器，您就有了一种强大的方法，可以在复杂的 DOM 结构中轻松实现导航和定位。

背景阅读：jquery $(this), parents(), .find()

注意，我修复了您的示例代码中与缺少变量 totalSliders 相关的问题。我使用上述相同的技术来计算单击按钮所属的滑块中的滑块数。

var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;

我稍微修改了您的 HTML，因为我们不需要 5 个滑块来说明 tge 解决方案。

$(window).on('load', function() {


	var sliderWrapper      = $('.slider-wrapper'),
	    sliderWrapperWidth = sliderWrapper.width(),
	    slider             = $('.slider'),
	    slideItems         = $('.slider .slide-items'),
	    position           = 0;

	$('.slider-wrapper .slider').each(function() {
		var items = $(this).find('.slide-items').length;
		var sliderBox = $(this);

		slideItems.outerWidth( sliderWrapperWidth / 2 );

		sliderBox.width( slideItems.outerWidth() * items  )
    });


    $('.slider-wrapper .buttons .prev').on('click', function(e) {
        event.stopPropagation();
        if( position > 0 ) {
            position--;
            $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width() });
        }
    });

    $('.slider-wrapper .buttons .next').on('click', function(e) {
        event.stopPropagation();
        console.log('next');
        // fix - get the number of sections in THIS slider.
        var totalSlides = $(this).parents('.slider-wrapper').find('.slide-items').length;
        if( position < totalSlides - 1 ) {
	        position++;
	        $(this).parents('.slider-wrapper').find('.slider').css({'right' : position*slideItems.width()         });
	    }
    })

})

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

* {
  box-sizing: border-box; }

.container {
  max-width: 1280px;
  margin: 0 auto; 
}

.container .slider-wrapper {
  margin-bottom: 40px;
  background-color: grey;
  overflow: hidden; 
}

.container .slider-wrapper .slider {
  position: relative;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; 
}

.container .slider-wrapper .slider > div {
  padding: 10px;
  background-color: #e5d0d0; 
}

.container .slider-wrapper .slider > div p {
  color: purple; 
}

.container .slider-wrapper .buttons {
  display: flex;
  justify-content: space-between;
  background: beige;
  padding: 10px 0; 
}


.container .slider-wrapper .buttons div {
  background-color: cyan; 
}

/*# sourceMappingURL=style.css.map */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>1-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>1-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


    <div class="slider-wrapper">
        <div class="slider">
            <div class="slide-items">
                <p>2-1  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>
            <div class="slide-items">
                <p>2-2  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>

            <div class="slide-items">
                <p>2-3  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempus diam nec mauris vehicula, eget euismod lorem ultrices. Fusce suscipit nisi nisi, nec fermentum ligula finibus non. Cras scelerisque risus libero, quis faucibus enim elementum non. Ut vitae purus in enim aliquam sollicitudin non et dui. Duis nec varius lectus.</p>
            </div>


        </div>

        <div class="buttons">
            <div class="prev">
                prev
            </div>

            <div class="next">
                next
            </div>
        </div>
    </div>


</div>

【讨论】：