Question

我确信这是一个快速而简单的答案，它现在还没有找到我。我为一个滑块构建了自定义html / css / js，从这样的数组中提取其内容：

$slides = [
    [
        'img'       => 'image1.jpg',
        'text'  => 'Slide One text',
        'svg'       => 'cat1'
    ],
    [
        'img'       => 'image2.jpg',
        'text'  => 'Slide Two Text',
        'svg'       => 'cat2'
    ],
    // First slide
    [
        'img'       => 'image3.jpg',
        'text'  => 'Slide Three Text',
        'svg'       => 'cat3'
    ],
    [
        'img'       => 'image4.jpg',
        'text'  => 'Slide Four Text',
        'svg'       => 'cat4'
    ],
    [
        'img'       => 'image5.jpg',
        'text'  => 'Slide Five Text',
        'svg'       => 'cat5'
    ],
];

我构建滑块的方式是css / js依赖于第三张幻灯片处于活动状态。然后滑动包装器重置为移动设备，阵列中的第一张幻灯片是渲染的html中的第一张幻灯片。我不想更改/更新css结构，因为它控制着大约5个媒体查询断点，并且非常特定于独特的设计。我希望有一种简单的方法可以重新排序html中的数组，因此在桌面上第三张幻灯片是第一张，而在移动设备上第一张幻灯片是第一张。有没有一种简单的方法可以做到这一点，我只是没想到？我的HTML看起来像这样：

        <div class="home-slider-wrap">
                <?php foreach ($slides as $index=>$slide): ?>
                    <div class="home-slider-slide slide<?php echo $index; ?> <?php if($index == 2){ echo 'active'; } ?>" data-slide="<?php echo $index; ?>">
                        <img src="/images/homepage/<?php echo $slide[img]; ?>" alt="<?php echo $slide['text']; ?>">
                    </div>
                <?php endforeach; ?>
            </div>

我想保留<?php if($index == 2){ echo 'active'; } ?>以便我不必更新js或css，但想重新排序数组。希望这是有道理的。

Answer 1

使用jQuery，您可以执行类似

的操作

awesome_print

重新排序从PHP数组

1 个答案: