click image and it fades

The PRO version of Slide Anything has Image Thumbnails – see an example of this here:
https://edgewebpages.com/testing-page/

I dont’ mean thumbnails I mean clicking the displaying image to slide as opposed to grab and slide. Also, how to reduce the amount of white in-between slides? Cheers

• This reply was modified 4 years, 9 months ago by nichere.

To achieve the click image to advance to next slide functionality will take some custom JavaScript coding using owl carousel events: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

So something like the following JS Code should hopefully work:

<script>
var owl = jQuery('#SLIDER_ID');
jQuery('#SLIDER_ID').click(function() {
    owl.trigger('next.owl.carousel');
})
</script>

(NOTE: replace ‘#SLIDER_ID’ with the CSS ID of your slider)

To get the “Fade” effect, select “Fade” for “Slide Transition” – the number of sliders for ALL resolutions must be set to “1” (mobile, tablet, desktop).

To display the slider thumbnail image links below the slider as per the example link you provided (yes, I did look), you will have to upgrade to PRO (that feature is not in the FREE version).

added the JS here, but click to change slide doesnt work. Any ideas?cheers

Inside slider dashboard

JS added

I’m not seeing the JS in the page source code.

If I view https://www.slimnics.com/bangkok/, and then view page source and then search for “trigger”, nothing is found.

Maybe try putting this code near the bottom of your “footer.php” file, just before “</body>”.

so for the homepage.
the code is in there.
https://i.ibb.co/6wJ81fW/Screen-Shot-2020-05-28-at-7-15-05-pm.png

but when i click an image it does not slide.

I placed the code into the header, then body and currently in the footer.

see here
Here

any ideas?

Well, ehat you have does not look right:

<script>
var owl = jQuery('#slim .owl-item');
jQuery('#slim .owl-item').click(function() {
    owl.trigger('next.owl.carousel');
})
</script>

Try this:

<script>
var owl = jQuery('#slim');
jQuery('#slim').click(function() {
    owl.trigger('next.owl.carousel');
})
</script>

Yep, That’s the one. Now we are moving forward. Cheers.

Is it possible to apply this sitewide to all, rather than just the one #slim ?

I added this

`<script>
var owl = jQuery(‘#slim’);
jQuery(‘#slim’).click(function() {
owl.trigger(‘next.owl.carousel’);
})
</script>

<script>
var owl = jQuery(‘#bkk’);
jQuery(‘#bkk’).click(function() {
owl.trigger(‘next.owl.carousel’);
})
</script>

But it seems it will only work for 1 and not both

That could be because you are using the same variable ‘owl’ in both:
var owl = jQuery…
owl.trigger…

Maybe try naming the variables ‘owl1’, ‘owl2’…
so you would have:
var owl1 = jQuery…
owl1.trigger…

I actually like feature, and have added it to my Slide Anything ‘TO-DO’ list, which I’ll add as an option when I get a moment – I think it will have to be something that will only be enabled if ‘mousedrag’ & ‘touchdrag’ are disabled.

Maybe try naming the variables ‘owl1’, ‘owl2’…
so you would have:
var owl1 = jQuery…
owl1.trigger…

YES worked, thanks. This feature seems to be standard now, in places like squarespace,

definitely include it in the next update.

Hi Simon, Any ideas as to why this flicker of image happens when sliding?

Link to Youtube Clip sample

when using ipad pro IOS 13.4.1

Hi, Slide Anything sliders are generated using the Owl Carousel 2 engine – see:
https://owlcarousel2.github.io/OwlCarousel2/
So within your Slide Anything settings you specify a load of parameters/settings and these are used to generate an Owl Carousel 2 slider – I’m currently using Owl Carousel 2.3.4, which is the latest version of OC – and periodically will update SA whenever new updates to OC are released.

Please have a look at the following link on your IPAD PRO to see if there is a flicker:
https://edgewebpages.com/

I did a search and came across this thread:
https://stackoverflow.com/questions/37945013/owl-carousel-flickering-on-tablet-view
So you can try this as well – try adding the following CSS:

.owl-carousel .owl-wrapper-outer{
    z-index:1 !important;
}

Let me know if this helps.

• This reply was modified 4 years, 9 months ago by simonpedge.