Question

我有一个旋转木马滑块，在桌面版本中我有3张幻灯片，现在我希望在屏幕大小为＆lt; 2＆gt;时将2个子滑梯转换为3个子滑梯。 769px。

HTML：

<div class="carousel">
   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>


<div class="carousel">
   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>


<div class="carousel">
   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>

旋转木马由3张幻灯片组成，每张幻灯片都有3张滑盖。现在在移动设备中我希望每个旋转木马幻灯片都有2个子滑动，所以这是一个代码：

<div class="carousel">
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>


<div class="carousel">
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>

<div class="carousel">
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>

<div class="carousel">
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>

<div class="carousel">
    <div class="slide">image</div>
</div>

现在如何使用jQuery / Javascript？

第二次更新还有一个标题：

<div class="carousel">
<h2 class="titleslider">text</h2>

   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>


<div class="carousel">
<h2 class="titleslider">text</h2>

   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>


<div class="carousel">
<h2 class="titleslider">text</h2>

   <div class="slide">image </div>
   <div class="slide">image </div>
   <div class="slide">image </div>
</div>

Answer 1

如果您真的想使用Javascript / jQuery，可以尝试this之类的内容：

var BREAKPOINT = 768;

var groupBy = function(blockClass, elementClass, count) {
    var $blocks = $('.' + blockClass);
    var $elements = $('.' + elementClass);
    var elementsCount = $elements.length;
    var blocksCount = Math.ceil(elementsCount / count);

    while ($blocks.length < blocksCount) {
        var $newBlock = $blocks.last().clone().insertAfter($blocks.last());
        $newBlock.children(':not(.titleslider)').remove();
        $blocks = $blocks.add($newBlock);
    }

    for (var i = 0; i < elementsCount; i++) {
        var j = Math.ceil((i + 1) / count) - 1;
        $blocks.eq(j).append($elements.eq(i));
    }
    
    while ($blocks.length > blocksCount) {
        $blocks.last().remove();
        $blocks.length--;
    }
};

var checkWindowSize = function() {
    var $this = $(this);
    var width = $this.width();
    var lastWidth = $this.prop('lastWidth') || (BREAKPOINT + 1);

    if (lastWidth > BREAKPOINT && width <= BREAKPOINT) {
        groupBy('carousel', 'slide', 2);
    } else if (lastWidth <= BREAKPOINT && width > BREAKPOINT) {
        groupBy('carousel', 'slide', 3);
    }
    $this.prop('lastWidth', width);
};

var $window = $(window);
$window.on('resize', checkWindowSize);

if ($window.width() <= BREAKPOINT) {
    checkWindowSize();
}

.carousel {
    background: yellow;
    min-width: 768px;
}

.slide {
    display: inline-block;
    background: red;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div class="carousel">
    <h2 class="titleslider">text</h2>
    <div class="slide">image</div>
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>
<div class="carousel">
    <h2 class="titleslider">text</h2>
    <div class="slide">image</div>
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>
<div class="carousel">
    <h2 class="titleslider">text</h2>
    <div class="slide">image</div>
    <div class="slide">image</div>
    <div class="slide">image</div>
</div>

但我强烈建议您尝试使用CSS。如果你要澄清你的真实案例，也许我可以帮助你。

当子类为= 3时，在其他类中移动子类

1 个答案: