bqworks

Hi, Meggs. My first impression is that it would be difficult given the internal workings of the slider. That movement is perceivable when the slider changes the layout of the slides from a stack, needed for the fade effect, to a carousel, needed for the touch-swipe navigation. Although the position of the visible slide should be 0 in both cases, its actual position differs slightly, possibly because the two different kinds of layout are achieved using different CSS properties: top, left in one case and the transform:translate in the other.

Best,
David

I did a few more tests and I could notice the movement only when the page is zoomed in, which I often use. If the zoom level is at 100%, it didn’t occur. I might occur at some zoom levels which cause the position and size of the elements to have decimal values instead of integers.

Best,
David

Hi. The touchSwipe is only for navigating the “pages”. For opening a panel, you need to tap, though it might be nice to be able to open panels by swipe as well, but I’m not sure how this would work if using multiple pages of panels. Maybe open the panel on first swipe and change the page after a second swipe on the same panel. I’ll consider this as a possible feature.

Best,
David

Hi, Meggs. I noticed the slide movement during the fade. I will try to investigate it soon.

Best,
David

It’s not clear to me what causes that appearance. Can you publish the slider and then link to the page?

Best,
David

Thank you again @masvil for supporting the development and @tobifjellner for the assistance!

Best,
David

Hi,

It’s possible by setting the Visible Size option to the desired size of the whole slider/carousel and use the Width option to set the width of individual slides. For example, you could set the Visible Size to 1000 and the Width to 250.

Best,
David

The code to hide the unstyled images is actually:

.sp-image:not([style]) {
	opacity: 0
}

Best,
David

Thank you for your support! ??

Hi, Markus. You can use custom CSS to further improve the styling. For example, if your thumbnail have the same size, you can use something like this:

.sp-thumbnail {
    width: 100px;
    height: 80px;
}

For the last slide image, you could use this:

.sp-layer:not([style]) {
	opacity: 0
}

You can use other plugins that allow you to insert custom CSS/JS. The slider also provides this functionality as premium add-on.

Best,
David

Hi. You could try to give the slider directly a min-height without using an extra container.

Best,
David

Hi. Swiping is for navigating between pages, not individual panels, but the accordions I saw had all panels visible, so there were no pages. Are you referring to some different kind of swiping?

Best,
David

Hi,

It seems to be a bug occurring when OpenPanelOn is set to ‘Click’ instead of ‘Hover’. Does it work for you if you try to set it to ‘Hover’?

Best,
David

Hi Meggs,

The thumbnail images start loading only after the scroll animation completes, which causes the temporary blank area. You could add some custom JavaScript that replaces the thumbnail placeholders with the actual image before they come into view:

jQuery('.sp-thumbnail').each((index, el) => {
    jQuery(el).attr('src', jQuery(el).attr('data-src'))
})

Best,
David

Thank you for your appreciative review!