当子类= 3时，将子类移动到其他类中

Move subclass in other class when the subclass are = 3

本文关键字：子类 其他 移动 3时      更新时间：2023-09-26

我有一个旋转滑块，在桌面版本中我有3个幻灯片，现在我想把3个subslide转换成2个subslide，当屏幕大小为<769px _x002E_=">

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个滑梯。现在在移动设备中，我希望每个carousel幻灯片都有两个subslide这是在

后面的代码
<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>

如果你真的想用Javascript/jQuery做这件事，你可以尝试这样做:

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。如果你能说清楚你的真实情况，也许我能帮你。

相关文章：