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

[Brubbel]

Ich weiß, der Thread ist alt aber ich brauchte das auch gerade mal wieder und falls das jemand mal sucht und verunsichert ist ... ich habe es auf einer Seite unter C4.13.37 und X4.3.4 (ja, nix sagen ... ) erfolgreich so angewendet. Geht also immer noch.