Swiper - Show navigation arrows on hover and in mobile view

Front End Components General
#1

https://www.teddy-talk.com/ls-shop.php?offset=72

The above page is using the Nested Repeat Regions and Travel Catalog with Swiper guides. There is an issue where the slides are stacked vertically. Please scroll to the bottom of the page to see the affected items.

Also, how to only show the navigation arrows on hover of the slide and when there are more than one image or in mobile view?

#2

Please explain why repeat children does not work.

Repeat children step displays images vertically stacked:

            <div id="repeat2" is="dmx-repeat" dmx-bind:repeat="query2">
              <div class="swiper-slide">
                <img class="img-fluid" dmx-bind:src="/img/members/{{query2[$index].user_id}}/m_{{query2[$index].user_id}}-{{query2[$index].post_id}}-{{query2[$index].filename}}">
              </div>
            </div>

On the other hand, listing each slide works:

            <div class="swiper-slide" dmx-show="query2[0].user_id">
              <img class="img-fluid" dmx-bind:src="/img/members/{{query2[0].user_id}}/m_{{query2[0].user_id}}-{{query2[0].post_id}}-{{query2[0].filename}}">
            </div>
            <div class="swiper-slide" dmx-show="query2[1].user_id">
              <img class="img-fluid" dmx-bind:src="/img/members/{{query2[1].user_id}}/m_{{query2[1].user_id}}-{{query2[1].post_id}}-{{query2[1].filename}}">
            </div>
            <div class="swiper-slide" dmx-show="query2[2].user_id">
              <img class="img-fluid" dmx-bind:src="/img/members/{{query2[2].user_id}}/m_{{query2[2].user_id}}-{{query2[2].post_id}}-{{query2[2].filename}}">
            </div>
#3

The swiper-slide should be the direct child of the slider component. Instead of using the repeat children use the dynamic attribute repeat directly on the slide.

image