Running an Elementor website, I need to incorporate various image carousels within my post content. Initially, I created a template for each carousel using Elementor. However, I have now decided to switch to utilizing a shortcode that leverages Elementor's included swiper feature for creating the carousels. Here is the code snippet:
function custom_carousel_shortcode($atts) {
$atts = shortcode_atts(
array(
'ids' => '',
),
$atts,
'custom-carousel'
);
$image_ids = explode(',', $atts['ids']);
$carousel_html = '';
foreach ($image_ids as $image_id) {
$image_url = wp_get_attachment_image_url($image_id, 'full');
if ($image_url) {
$carousel_html .= '<div class="swiper-slide"><img src="' . esc_url($image_url) . '" class="swiper-slide-img" /></div>';
}
}
$output = '<div class="elementor-widget-container"><div class="elementor-element elementor-widget elementor-image-carousel"><div id="swiper_init" class="swiper-container"><div class="swiper-wrapper">' . $carousel_html . '</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div></div>';
$output .= '<script>
jQuery(document).ready(function($) {
$(window).on("load", function() {
console.log(elementorFrontend.utils);
let mySwiper;
const swiperElement = $(".swiper-container");
const swiperConfig = {
//centeredSlides: true,
loop: false,
pagination: {
el: ".swiper-pagination"
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
//autoplay: {
// delay: 5000
//},
//slidesPerView: 1,
//slidesPerGroup: 1,
};
//
if (typeof elementorFrontend.utils.swiper === "function") {
new elementorFrontend.utils.swiper(swiperElement, swiperConfig).then((newSwiperInstance) => {
console.log("New Swiper instance is ready: ", newSwiperInstance);
mySwiper = newSwiperInstance;
});
} else if (typeof Swiper === "function") {
console.log("Swiper global variable is ready, create a new instance: ", Swiper);
mySwiper = new Swiper(".swiper-container", swiperConfig);
} else {
console.error("Swiper initialization failed.");
}
});
});
</script>';
return $output;
}
add_shortcode('custom-carousel', 'custom_carousel_shortcode');
The swiper functionality loads correctly in my testing environment and retrieves images based on their IDs. However, I am facing an issue with the layout. When only one slide is displayed, additional slides are positioned to the left or right of the screen, causing horizontal scrolling. How can I resolve this and achieve a carousel layout similar to Elementor's native carousel widget? Do I need to tweak the swiper settings or utilize CSS?
UPDATE
I resolved the CSS issue by applying the suggested rule from the comments. Now, I've encountered a new problem where multiple instances of the shortcode on a page result in only the first carousel functioning properly. Upon inspecting the console, I noticed that the swiper instance targets only the initial carousel inserted on the page and not subsequent ones. How can I rectify this secondary issue?