Redux slides (how to make them dynamic)?

Question

PHP

Good day!
I'm pulling a template on wordpress (I'm doing it for the first time) as the framework chose Redux.
There was a problem when adding a slider, the fact is that the slider has several photos, and when adding a function from the framework, only one photo is shown, html is not duplicated to display all loaded slides in redux.
Function code:

'title'      => __( 'Slides', 'redux-framework-demo' ),
        'id'         => 'additional-slides',
        'desc'       => __( 'For full documentation on this field, visit: ', 'redux-framework-demo' ) . '<a href="//docs.reduxframework.com/core/fields/slides/" target="_blank">docs.reduxframework.com/core/fields/slides/</a>',
        'subsection' => true,
        'fields'     => array(
            array(
                'id'          => 'opt-slides',
                'type'        => 'slides',
                'title'       => __( 'Slides Options', 'redux-framework-demo' ),
                'subtitle'    => __( 'Unlimited slides with drag and drop sortings.', 'redux-framework-demo' ),
                'desc'        => __( 'This field will store all slides values into a multidimensional array to use into a foreach loop.', 'redux-framework-demo' ),
                'placeholder' => array(
                    'title'       => __( 'This is a title', 'redux-framework-demo' ),
                    'description' => __( 'Description Here', 'redux-framework-demo' ),
                    'url'         => __( 'Give us a link!', 'redux-framework-demo' ),
                ),
            ),
        )
    ) );

Slides output code:

<div class="sider_container">
                                    
    
                                        <div class="slide_item">
                                    <img src="<?php if (isset($brainiak['opt-slides']) && !empty($brainiak['opt-slides'])) { echo $brainiak['opt-slides'][0]['image'];}?>" alt="<?php echo $brainiak['opt-slides'][0]['title']; ?>" class="img-responsive"></div>
                            
                            </div>

Please tell me what needs to be done so that when adding new slides, the HTML design

<div class="slide_item">
                                    <img src="" alt="" class="img-responsive"></div>

was duplicated in the tag <div class="sider_container"> </div>
, and all available slides from the admin panel were displayed?

Answer 1

First, you need to understand what you are doing, in what form the data is returned to you, and how to process it.

<div class="sider_container">
    <div class="slide_item">
        <?php if( ! empty( $brainiak['opt-slides'] ) ) {
            foreach ( $brainiak['opt-slides'] as $val )
                echo '<img src="' . $val['image']. '" alt="' . $val['title'] .'" class="img-responsive">';
        } ?>
    </div>
</div>

for the beauty of the code, you can do this

printf('<img src="%s" alt="%s" class="img-responsive">', $val['image'], $val['title']);