Swiper und Tabs

[Brubbel]

Moin Forum,
wir möchten in einem Tabs-Element (2 Tabs) jeweils einen Swiper-Slider verwenden. Das funktioniert im ersten Tab auch wunderbar - im zweiten haben die Vor- und Zurück-Pfeile keine Funktion. Ich kann die Elemente mit der gedrückten Maustaste "durchschieben" aber die eigentliche Funktion ist nicht da.

Bug? Feature? Irgendeine Abhilfe bekannt oder Bedienungsfehler?

Danke euch und VG

[Tim]

Hi,
ich denke das ist ähnlich gelagert wie Google Maps und andere JS-Elemente in Tabs (versteckten Elementen). Die Browser initialisieren keine Hintergrund-JS-Elemente. https://developer.mozilla.org/de/doc...Visibility_API

Du musst beim Klick auf den Tab das Element darin erneut triggern / initialisieren.

[Brubbel]

Oki, danke für den Tipp. Ich habe es dann jetzt so umgebaut und dadurch geht es:

1. Swiper Starttemplate aus dem Swiperaufruf eine Funktion gemacht und diese dann weiterhin normal aufrufen lassen:

<?php $GLOBALS['PCT_FRAMEWORK']['swiper_instance'] = $this->id; ?>
<script>
/* <![CDATA[ */
var swiper_<?php echo $this->id; ?> = null;
jQuery(document).ready(initswiper);

function initswiper() {
    swiper_<?php echo $this->id; ?> = new Swiper('#swiper_<?php echo $this->id; ?>', {
        effect: '<?php echo $this->field('effect')->value(); ?>',
        speed: <?php echo $this->field('speed')->value() ?: 3000; ?>,
        grabCursor: true,
        direction: '<?php echo $this->field('direction')->value(); ?>',
        spaceBetween: <?php if($this->field('spaceBetween')->value()): ?><?php echo $this->field('spaceBetween')->value(); ?><?php else: ?>0<?php endif; ?>,
        <?php if($this->field('autoplay')->value()): ?>
        autoplay: {
            delay: <?php echo $this->field('autoplay')->value(); ?>,
            disableOnInteraction: false,
        },
        <?php endif; ?>
        <?php if($this->field('loop')->value()): ?>loop: true,<?php endif; ?>
        navigation: {
            nextEl: '#swiper-button-next_<?php echo $this->id; ?>',
            prevEl: '#swiper-button-prev_<?php echo $this->id; ?>',
        },
        <?php if($this->field('pagination')->value()): ?>
        pagination: {
            el: '#swiper-pagination_<?php echo $this->id; ?>',
            clickable: true,
        },
        <?php endif; ?>
        slidesPerView: <?php if($this->field('slides_per_view')->value()): ?><?php echo $this->field('slides_per_view')->value(); ?><?php else: ?>1<?php endif; ?>,
        breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 0,
            }
        }
    });
}

/* ]]> */
</script>

<div class="<?php echo $this->class; ?> block<?php if($this->field('style')->value()): ?> <?php echo $this->field('style')->value(); ?><?php endif; ?>"<?php echo $this->cssID; ?> style="<?php if($this->field('height')->value()): ?>height: <?php echo $this->field('height')->value(); ?>px;<?php endif; ?><?php echo $this->style; ?>">
<div class="swiper-container<?php if($this->field('navigationhide')->value()): ?> hide-arrows<?php endif; ?><?php if($this->field('pagination')->value()): ?> swip-pagination<?php endif; ?><?php if($this->field('pagination_align')->value()): ?> <?php echo $this->field('pagination_align')->value(); ?><?php endif; ?>" id="swiper_<?php echo $this->id; ?>">
    <div class="swiper-wrapper"<?php if($this->field('pagination_padding')->value()): ?> style="padding-bottom:<?php echo $this->field('pagination_padding')->value(); ?>px;"<?php endif; ?>>
        <div class="swiper-slide">

2. Das Tabs Starttemplate so verändert, dass die obige Funktion beim Klick auf einen Tab aufgerufen wird (hier nur die veränderte Zeile mit dem Scriptaufruf):

<div onClick="initswiper()" class="tabs tabs_<?php echo $this->id; ?> <?php echo $this->field('schema')->value(); ?>">

Damit können nun auch in anderen Tabs die Slider genutzt werden.

[emka]

Hi zusammen,

hat sich in x4 hier etwas geändert? Ab dem zweiten Tab lassen sich die Swipes trotz der Anpassung analog Brubbel nicht nutzten.

Danke für einen Tipp