Streaming live at 10am (PST)

Dynamic Slider Help

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: http://jquery.malsup.com/cycle2/demo/bookmark.php
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: https://stackoverflow.com/questions/22483210/jquery-cycle-slideshow-startingslide

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

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:

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.

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>

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?

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

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?

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?

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

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.