Hi, I’m not sure I understand the thumbnail part 🙂 Can you show an example on how it should look like? E.g. look at the Swiper examples https://swiperjs.com/demos or their properties https://swiperjs.com/swiper-api. Those are that parts that this plugin is using (it just puts them in the correct DOM structure and runs the swiper script 🙂 ). The plugin shouldn’t generate custom thumbnails
Progress bar: https://swiperjs.com/demos#pagination-progress should be something that can be implemented (if available in the old version of Elementor). And I’ll check that I expose the Swiper so you can do all the part from my “Swiper in Elementor” tutorial. There is a section how you can connect two sliders, in case that is what you mean by your thumbnails (small images drive the other slider).
I actually managed to do it with some custom code, and the plugin. https://ibb.co/yBpSS3Cf basically the small images/boxes that can be used as thumbnails for the slides, i was thinking that if we can get the feature to create the thumbnails manually with elementor(so that we can customise them however we like) and then link/connect them to the main slider so that they can control the slides. The code that worked for me:
<script>
jQuery(document).ready(function ($) {
setTimeout(function () {
// 1. Grab the main slider
const sliderContainer = document.querySelector('[slider main container class/ID]');
if (!sliderContainer) return;
// Grab the Swiper instance created by Slide Everything
const mainSwiper = sliderContainer.swiper;
if (!mainSwiper) {
console.error("Swiper instance not found!");
return;
}
// 2. Grab all Elementor-built thumbnails
const thumbs = document.querySelectorAll('[common class of all the thumbnail containers]'); // all thumbnails should have this class
// 3. Click thumbnails to change the main slider
thumbs.forEach((thumb, i) => {
// Optional: set data-slide if you haven't set it manually
thumb.setAttribute('data-slide', i);
thumb.addEventListener('click', () => {
mainSwiper.slideToLoop(i); // <-- updated to slideToLoop
updateActive(i);
});
});
// 4. Function to update active thumbnail
function updateActive(activeIndex) {
thumbs.forEach((thumb, i) => {
thumb.classList.toggle('active', i === activeIndex);
});
}
// 5. Sync thumbnails when slider changes
mainSwiper.on('slideChange', () => {
updateActive(mainSwiper.realIndex);
});
// 6. Initialize first active thumbnail
updateActive(mainSwiper.realIndex || 0);
}, 500); // slight delay for Slide Everything init
});
</script>
