Reorder HTML rendered from PHP Array

Question

I'm sure there is a quick and easy answer to this, it's just not coming to me right now. I have built custom html/css/js for a slider that pulls its content from an array like this:

$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'
    ],
];

I built the slider in a way that the css/js is dependent on the third slide being active. The slide wrapper then resets for mobile and the first slide in the array is the first slide in the rendered html. I do not want to change/update the css structure as it is controlling about 5 media query breakpoints and very specific to a unique design. I am hoping that there is a simple way that I can just reorder the array in the html, so that on Desktop the third slide is the first and on mobile the first slide is the first. Is there an easy way to do this that I'm just not think of? My html looks like this:

        <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>

I want to keep the <?php if($index == 2){ echo 'active'; } ?> so that I don't have to update the js or css, but want to reorder the array. Hope that makes sense.

If you're reloading the page, have the PHP reorder the elements before resending the page to the client. If it has to be done clientside, you'll have to add JS to sort() the array, then rerender everything that changed. This can probably also be done with extra css in the media queries. — Shilly
– Shilly, Commented Feb 1, 2017 at 16:24

charlietfl · Accepted Answer · 2017-02-01 16:20:47Z

1

Using jQuery you could do something like

$(function(){
    if($(window).width() > deskTopBreakpointValue ){         
      var $first = $('.home-slider-slide.active');
      $('.home-slide-wrap').prepend($first);
    }

    // now initialize your slider code

})

answered Feb 1, 2017 at 16:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MrBizle Over a year ago

You would probably want to remove it before prepending it to avoid duplication

charlietfl Over a year ago

@MrBizle that can't happen...when you move an element it has to be removed from it's current location in order to be put in a new one and is all handled by prepend()

Collectives™ on Stack Overflow

Reorder HTML rendered from PHP Array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related