Dynamic Slider Help

Design help CMS
1

Hey Guys,
I’m working on a relaunch for our little jewellery workshop. This is my first website at all, and so far searching the forums helped me with any problem I had. Thanks for that!

I would really appreciate your help now with two issues I’m stuck with at the moment:

There is a grid of thumbnails that link to the Cycle2-Slider. Both grid and slider are dynamic.

1. The thumbnails are not linking to the associated slide, instead the slideshow always starts with the first item in the list.
How could I fix that?

2. I’d like to have the single slides bookmarkable for social linking

This: Cycle2 Bookmarkable Slides
should be what I need for issue 2, but as I’m no coder at all, I did not get how to implement that in webflow.

And could this also be helpful with Issue 1?

I also found this at stackoverflow: javascript - jQuery Cycle Slideshow Startingslide - Stack Overflow

The OP has exactly the same question, and the answer points to Cycle2, but as above I have no idea what to do…

Here is my read-only: https://preview.webflow.com/preview/quintin-nels-spectacular-site?preview=525106250b93e448f1a239aa1e99d4e9

(The grid is on the Collections Template
The Slider is on the Gallery Items Template)

Published: http://quintin-nels-spectacular-site.webflow.io/collections/waterworld

(Choose any thumbnail to get to the slider)

Any help would be much appreciated!
Thanks in advance,
Chris

2

Come on, there has to be someone who uses Cycle2 and knows just a little more about code than me…
@SidneyOttelohe, @samliew, @Zacchino, anybody?
Pretty please with sugar on top?:grin:

3

I guess the question is whether you can add dynamic items into the custom attributes. But this does not seem to be possible in webflow. Then I guess you would add custom attribute data-cycle hash to dynamic slide and have the = be pulled dynamically from your dynamic list.

That is my best guess but may be a mute point since it doesn’t seem possible to pull dynamically

But the only way it will work is if you can create a custom field in your collection that can be assigned.

4

Another thought did you try copying the into an embed. And pull the info dynamically in the embed. Creating dynamic embeds is another workaround for a lot of things.

<div class="center">
  <span class="prev"><a href=#>&lt;&lt; Prev</a></span>
  <span class="next" style="margin-left:20px"><a href=#>Next &gt;&gt;</a></span>
</div>
<div 
  class="cycle-slideshow"
  data-cycle-prev=".prev"
  data-cycle-next=".next"
  data-cycle-fx="scrollHorz"
  data-cycle-timeout=0>
    <img src="http://malsup.github.io/images/p1.jpg" data-cycle-hash="spring" />
    <img src="http://malsup.github.io/images/p2.jpg" data-cycle-hash="trees" />
    <img src="http://malsup.github.io/images/p3.jpg" data-cycle-hash="water" />
    <img src="http://malsup.github.io/images/p4.jpg" data-cycle-hash="sunset" />
</div>
5

Hi @jbleroux, thanks for your help!
As I understand, it should be possible to pull the dynamic data inside the custom code section of the page, like that:


But obviously there’s a lot missing. As I said I know nothing about code… Could you point me in the right direction?

6

I hate it to be a pain in the neck, but I’m really a little desperate here…

@jbleroux, @samliew, @SidneyOttelohe, @PixelGeek, can someone take a look at my problem? (Post 62)

Thanks a lot,
Chris

7

Christian it’s controlled the attributes to settings on the right side. I’ve not ever done that through custom code. Does the custom code work at all without this attribute?

8

Well, I don’t know, all this code stuff is pure magic to me :grinning:
Do you think it would work in an embed?
Where to put the embed then, replace the dynamic image with it?

9

Tried that, it pulls the correct image, but the slug/URL is not updating when clicking through the slider like in malsups demo…

10

Yeah I’m not sure the how it would work. Sorry. The data-cycle-hash is part of the js script I think. Which means it would not just work by changing the img src ect.