I found a specific Swiper option to disable this behaviour, but I couldn’t find it in the settings of your widget. How do I keep autoplay enabled all the time? Maybe there’s a way to remotely update Swiper option via custom code chunk? Please, advise.

i’m not a code geek, so i’m lacking some skills, but is it possible to do it with css, and is there any help with or guide with this?

thanks in advanced, aslo for the plugin.

"viewScript": "file:./view.js"

i still need to enqueue the JS & CSS files with php like the old ways. If i don’t enqueue assets then the block won’t work on frontend.

This is my view.js file :

import Swiper from 'swiper';
import { Autoplay, Keyboard, Navigation, Pagination, Scrollbar } from 'swiper/modules';

// Import Swiper styles
// import 'swiper/css';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';

// import styles bundle
import 'swiper/css/bundle';

// import "./styles.css";

// This should only be output on the frontend of the site - NOT the editor

document.addEventListener('DOMContentLoaded', () => {
    const swiper = new Swiper('.swiper', {

        // configure Swiper to use modules
        modules: [Navigation, Pagination, Autoplay, Keyboard, Scrollbar],

        // Optional parameters
        direction: 'horizontal',
        autoplay: {
            delay: 2000,
        },
        loop: true,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
})

This is my block.json file :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "mcx/simple-slider",
    "version": "0.1.0",
    "title": "Horizontal & vertical slider.",
    "category": "gutenberg-blocks",
    "icon": "slides",
    "description": "A simple slider with horizontal or vertical layout.",
    "attributes": {
        "images": {
            "type": "array",
            "default": []
        }
    },
    "example": {
        "attributes": {
            "preview" : true
        }
    },
    "supports": {
        "html": true,
        "color": {
            "background": true,
            "text": true
        },
        "spacing": {
            "padding": true,
            "margin": true
        },
        "anchor": true,
        "align": true
    },
    "textdomain": "simple-slider",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "viewScript": "file:./view.js"
}

And this is how i enqueue via php :

add_action('wp_enqueue_scripts', 'mcx_gsbp_enqueue_swiper_styles');

function mcx_gsbp_enqueue_swiper_styles()
{

    // Enqueue Swiper library JS
    wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), '6.8.4', true);

    // Enqueue Swiper library CSS
    wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), '6.8.4');
}

Am i doing something wrong or this is the intended behavior ?

"viewScript": "file:./view.js"

i still need to enqueue the JS & CSS files with php like the old ways. If i don’t enqueue assets then the block won’t work on frontend.

This is my view.js file :

import Swiper from 'swiper';
import { Autoplay, Keyboard, Navigation, Pagination, Scrollbar } from 'swiper/modules';

// Import Swiper styles
// import 'swiper/css';
// import 'swiper/css/navigation';
// import 'swiper/css/pagination';
// import 'swiper/css/scrollbar';

// import styles bundle
import 'swiper/css/bundle';

// import "./styles.css";

// This should only be output on the frontend of the site - NOT the editor

document.addEventListener('DOMContentLoaded', () => {
    const swiper = new Swiper('.swiper', {

        // configure Swiper to use modules
        modules: [Navigation, Pagination, Autoplay, Keyboard, Scrollbar],

        // Optional parameters
        direction: 'horizontal',
        autoplay: {
            delay: 2000,
        },
        loop: true,

        // If we need pagination
        pagination: {
            el: '.swiper-pagination',
        },

        // Navigation arrows
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

        // And if we need scrollbar
        scrollbar: {
            el: '.swiper-scrollbar',
        },
    });
})

This is my block.json file :

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "mcx/simple-slider",
    "version": "0.1.0",
    "title": "Horizontal & vertical slider.",
    "category": "gutenberg-blocks",
    "icon": "slides",
    "description": "A simple slider with horizontal or vertical layout.",
    "attributes": {
        "images": {
            "type": "array",
            "default": []
        }
    },
    "example": {
        "attributes": {
            "preview" : true
        }
    },
    "supports": {
        "html": true,
        "color": {
            "background": true,
            "text": true
        },
        "spacing": {
            "padding": true,
            "margin": true
        },
        "anchor": true,
        "align": true
    },
    "textdomain": "simple-slider",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./index.css",
    "style": "file:./style-index.css",
    "viewScript": "file:./view.js"
}

And this is how i enqueue via php :

add_action('wp_enqueue_scripts', 'mcx_gsbp_enqueue_swiper_styles');

function mcx_gsbp_enqueue_swiper_styles()
{

    // Enqueue Swiper library JS
    wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), '6.8.4', true);

    // Enqueue Swiper library CSS
    wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css', array(), '6.8.4');
}

Am i doing something wrong or this is the intended behavior ?

jQuery(function($) {
const swiper_target = $("#my-id .swiper-wrapper");
const swiperInstance = swiper_target.data('swiper');
console.log('Swiper Target:', swiper_target);
console.log('Swiper Instance:', swiperInstance);

if (swiper_target.length > 0 && swiperInstance) {
    swiperInstance.slideTo(5);
} else {
    console.error('Swiper not found or not initialized.');
}
});

This is the result on console.

0: documentlength: 1Prototype: Object
VM9691:6 Swiper Target: e. {0: div#swiper-wrapper-cb626e8a99ef12e4.swiper-wrapper, length: 1, prevObject: ce.fn.init}0: div#swiper-wrapper-cb626e8a99ef12e4.swiper-wrapperlength: 1prevObject: ce.fn.init {0: document, length: 1}Prototype: Object
VM9691:7 Swiper Instance: undefined
VM9691:13 Swiper not found or not initialized.

I tried your Testimonial Swiper Slider. It is working in editor mode, but frontend mode it’s not working.

.swiper-container:not(.swiper-container-initialized) .swiper-wrapper, .swiper:not(.swiper-initialized) .swiper-wrapper {
     gap: var(--e-n-carousel-swiper-slides-gap); 
     overflow: hidden; 
}

The ‘overflow: hidden;‘ property conflicts with the other carousel built on Swiper JS. Please include some identifiers before the CSS so it will not affect other plugins or carousels.

Look forward to your response.

Thank you.

We have found a bug in the Better Slider where some layouts such as Layout 9 will not load if the Swiper Library update is enabled in Elementor > Settings. Updating the library in Better Addons will probably solve it. You may find the dev info on this feature release here https://developers.elementor.com/swiper-update-to-5-3-6-new-wrapper-class/

DevTools failed to load source map: Could not load content for https://sitename/wp-content/plugins/ht-mega-for-elementor/assets/js/swiper-bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

The error does not seem critical for my site. Thanks.