Slider buttons across sections

Design help General
#1

Hi Forum & Webflow team,

I’m using a slider to show photos behind the header and footer. Although I have managed to redesign and relocate the arrow buttons in the location I want, I had to work around them and change the footer. They are now a part of the background and the footer width is shortened with a margin to accommodate the buttons. It does serve the purpose but is not ideal, I would like for them to be a part of the Footer. I saw another case here on the forum that might suit and resolve this issue, however the code shown may need some alteration.

I would appreciate very much if @samliew or @cyberdave or someone else could help me in the right direction. The issue is found on “vienna” page.

Cheers

Here is my public share link: https://preview.webflow.com/preview/sune-w-andersens-first-site?preview=ef366cbebd4305ec93a3b993532a0458
(how to access public share link)

#2

It looks to me as if they are already in the footer section. Or am I missing something?

Screen Shot 2016-12-30 at 10.49.26.png478×658 38.3 KB

#3

Yes, this is the wrong slider, I’m referring to the “Photo Slider”(on the "vienna page). I would like for it to be a part of the “Footer Cities” and extend this section across the full width of the page. I had to customize everything around this new Footer since the percentage is different etc. Also when zooming on Ipads, the Footer “breaks up” and it looks distorted.

#4

Ok, so i dont think it is possible to have Photo Slider to be a part of Footer Cities as this would be incorrect according to HTML layering.

I don’t know if this will help but you can put Footer Cities inside of Photo Slider and play around with % from there.

Hope this helps.

#5

Thanks, I believe you’re right, the layering won’t allow, however by coincidence I saw the case where @samliew gave instructions to make a new set of arrow buttons, using Link Blocks and code, linking to the original buttons(hidden), thought that might also be a fix for the issue I have?

#6

I don’t understand what you are trying to do here. Could you insert some images into the slider so there will be some content? Then take a screenshot and draw some directions on it.

1 Like
#7

blob.jpg1600×900 440 KB

Hi @samliew, Thanks for looking at this and Happy New Year!
You’ll notice the Footer has a margin in RHS, allowing space for the two slider buttons belonging to the “Photo Slider”(found in “Photo Div” further up). The Footer Background is just a behind all, made for Ipad viewing (other issue). Since the HTML layering won’t allow for the “Photo Slider” buttons to live inside the Footer with the photos shown behind the Header and the Footer, I had to “cut them in”. Can I create a new set of buttons inside the Footer Section, allowing it to stretch across the full width of the page? You seem to have done something similar in the past, hiding the existing buttons, creating a new set and linking them to the hidden, using a code?
On another but related note, is it possible to show and hide a Slider?

Best regards

https://preview.webflow.com/preview/sune-w-andersens-first-site?preview=ef366cbebd4305ec93a3b993532a0458

#8

If you can hide the existing slider arrows for the Vienna page, and insert two similar buttons in the footer, I will code the script for you.

Yes, you should be able to use interactions, unless there is something you are not telling me about.

#9

Hi @samliew, appreciate your swift reply! The subject buttons which are a part of the “Photo Slider” can I leave them as they are and merely hide or do I need to restore as they come default in the slider element?
Thanks for confirming regarding the Slider, I just need to play around with the interactions to get the right function.

#10

This is good enough, as long as they are there.

#11

Excellent, Link Blocks or Buttons?

#12

Any element would do, although links are more appropriate.

#13

Done, though using Div Blocks, hope that’s OK?

https://preview.webflow.com/preview/sune-w-andersens-first-site?preview=ef366cbebd4305ec93a3b993532a0458

Made them in Link Blocks as well on another page, I can bring them across to “Vienna” if more appropriate? Sorry didn’t want to waste your time…

#14

I have moved the Link Blocks across, makes sense, apologies for the changes, hope it didn’t interfere.

https://preview.webflow.com/preview/sune-w-andersens-first-site?preview=ef366cbebd4305ec93a3b993532a0458

#15

Dear @samliew,

Wish you a great year ahead, appreciate your support so far.

In order to know which way to progress with my design, I would appreciate very much if you could let know, whether you’ll be able to code the script?

Best regards

#16

Put this in Site Settings > Custom Code > Footer Code

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
    $('.photo-left-button').click(function() {
      $('.photo-div').each(function() {
        $(this).find('.w-slider-arrow-left').trigger('tap');
      });
    });
    $('.photo-right-button').click(function() {
      $('.photo-div').each(function() {
        $(this).find('.w-slider-arrow-right').trigger('tap');
      });
    });
});
</script>

Works in published site only.

#17

It is working! you’re awesome!! that definitely warrants a round of drinks. Should you ever find yourself in Dubai, let me know.

#18