Slide Navigation Appears Not To Be Working

Hi,

I am using the Slider (Stacked) element within the Modal element. The overall hierarchy is as in the screenshot, with the Looper Provider in the Row and the Looper Consumer in the Column 1.

The Column 1 uses a background image, which comes from the Looper Consumer. Similarly, the slider gets its content from the same Looper Consumer.

However, the Slide Navigation does not work. On the front end, the slide forward and back buttons do nothing at all, even though they are as default when the slider was installed.

Is there something not configured to allow the slide navigation?

Many thanks,
Christopher

Hi Christopher,

Thanks for reaching out.
We have tried to check, but unfortunately, the WordPress admin URL is restricted with folder permission. Can you please share the credentials for it for further investigation?

Thanks

My apologies. Please see secure note.

Hello @whitemedia,

Please double-check the given credentials.

  • see the secure note below

Thanks.

How strange. I have reset both credentials. Details in secure note.

I have made a bit of progress by adding a second Looper Provider and Consumer to the Slider’s Container and Slide, which now allows navigation. I have two other issues though:

Firstly, if a slide is clicked, the modal always shows the first slide in the series, never the one for the image which is clicked. I have tried adding data-x-slide-goto as Custom Attributes, but it does not appear to have an effect.

The second issue is, is it possible to make the modal fit the image within the slider? In other words, the modal resizes to take the shape of the image, plus padding of 1.5em to give the effect of a border?

Thanks,
Christopher

Hello @whitemedia ,

I was able to log in and check the layout. You are nesting the same Looper Provider {{dc:acf:post_field field="gallery"}} which is not correct. At the moment, every time you click any of the images, it goes to the same 1st slide. You should run two separate Looper Providers. The first one will be to display the images wherein each image is linked to the correct slide on the same Modal element. If I am going to accomplish what you have in mind, this is my layout structure:

Row - Looper Provider `{{dc:acf:post_field field="gallery"}}`
   Column - Looper Consumer
       Image - dynamic content to display image

Div - Modal Div
     Modal element
         Slider (Stacked)
            Content Wrapper
               Slider Container - Looper Provider `{{dc:acf:post_field field="gallery"}}`
                   Slide  - Looper Consumer

Hope this makes sense.

Hello @ruenel,

Apologies for a late reply. I have changed the layout and in the meanwhile have followed Josh Donnelly’s excellent video, which covers almost exactly what I am attempting: https://www.youtube.com/watch?v=ASv_W7z74C4

I can now get the slides opening from a click on the grid of images, but with one issue. As soon as I add the Custom Attribute data-x-slide-goto="{{dc:looper:index}}", clicking on an image no longer opens the modal. As soon as I remove the Custom Attribute, the modal opens again, but always onto slide 1.

I have tried placing the Custom Attribute in the Image element, div or column, but it is invariably blocking the modal from opening. I have followed every step in the video and it is just the Custom Attribute which is causing a problem.

Thanks,
Christopher

1 Like

Hello,

I took a look and data-x-slide-goto actively prevents the default actions of clicks. In other words it won’t add the hashtag to your URL after you click it. It should be as simple as removing that, I’m just going to double check Modern Sliders and you should be able to do this. Should release in a week or two. Thanks for the info on this one. Have a great day!

Hi @charlie,

Thanks for that, though a tiny bit confused. Do I need to wait for the bugfix in a couple of weeks, or is there something I can remove to rectify this - a hashtag or the data-x-slide-goto?. Glad to have picked up a bug though!

Thanks,
Christopher

Hi Christopher,

The issue will be fixed and released in the upcoming version.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.