Horizontal Slide on Scroll

Design help General
1

Hi guys,

I recently tried to set up a new design for the portraits on my website. I wanted to achieve some sort of slider, that slides during mouse scroll. It shouldn´t be a continous sliding, I thought of a snappy/sticky scroll that scrolls to the next image. It should look like this:

I have already watched the tutorial on horizontal sliders (https://webflow.com/workshop/creating-a-horizontal-scrolling-page-without-coding, but it is not working for me as it doesn´t jump from image to image.

In the video he mentioned a website (https://webflow.com/website/horizontal-scroll-full) where the guy used a javascript plugin to achieve a snappy slide. But unfortunately I am not aware of how to use this.

Thanks for your advices!

Tim

Live Website: https://light-hunters.com
Read-Only: https://preview.webflow.com/preview/light-hunters?preview=aef1782b8ca8f6e6a3d827aea7f70b98

2

Hi @lighthunters, have you seen this video? https://university.webflow.com/lesson/horizontal-movement-on-scroll-interactions. It may help and I think are different from the others you may seen.

3

Hi Dave,

thanks for your answer.

I have already seen this one, but it doesn´t help me unfortunately.
I want to achieve a “snapping” from one image to the next one while scrolling the mouse wheel.

I tried to implement a slider, with a slider width that fits multiple images on one page. But although every image is in it´s own slide, it won´t work like I want it to. You can check the read-only link, the page can be found in folder “portraits”.

Best regards,
Tim

4

Hi @tim thanks, I am taking a look. Just from looking at the example site you gave, it seems possible to me to do a slider like that, even though you will have to use interactions and animate sections, you would not use the built in slider.

After I have a chance to check it out, I will post back with some feedback. Horizontal sliders are always fun to put together though, hang in there :slight_smile:

5

Great, I´m looking forward for your solution @cyberdave :slight_smile:

All the best,
Tim

6

Any news on this @cyberdave? :upside_down_face:

7

Hi @lighthunters, thanks, well the horizontal scroll design is not an issue, but the “snapping” part is not yet built in (at the moment). Probably the custom code plugin you referred to might be the easiest at the moment to achieve that.

That site by the way was not a site made by Webflow, rathere a customer site, were you able to find the instructions for the horizontalscroll.js plugin?

8

Hi @lighthunters

I think that site was made by @Diarmuid_Sexton - who is on the forum fairly often - he might be able to give you some pointers?

Stu

9

Hi @StuM,

Here’s the postwith the instructions:

good luck!

1 Like
10

And Boom…there you go @lighthunters !

Thanks @Diarmuid_Sexton

11

Hey @Diarmuid_Sexton,
thanks for your answer!

I have alread seen this one, but I am not sure how to implement it? Checking your example webflow page, I only find little coding, and nothing in the pages custom head/body tag?
Thanks for additional advices!

Thanks also to @StuM and @cyberdave for keeping up :slight_smile:

12

Hi. In your reference this is OwlCarousel2.
If you want to implement this on webflow by custom code this is the example (Click on the slider than scroll)

“How to” - search on webflow forum slick example (The same idea is for owl). The downside - the slider work only on the publish site (Like any other custom code).

The diff sizes of each img is with:
autoWidth: true,
Example

Last the cursor is by CSS:
cursor: ew-resize;

13

All the code is there. Which one are you trying to clone?

14

I tried to clone your site as the custom code is obviously site wide, but as I don´t have a upgraded plan, I cannot see the coding

15

Ok. I don’t know what you need then or how I can help.

16

Opening your clonable page, I cannot find the custom code you have entered.

webflow
webflow1122×1072 71.9 KB

Sorry to ask, but I am quite clueless on how to get the slider to my site.

17

Ok. And is the partial or the full scroll you want? There are two different types…

18

I´d like to go for the full slider.

19

if you go to the page - http://horizontal-scroll-full.webflow.io/

then right click and “view page source” - you can see the code I’ve added to the header and footer

The header code is:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
  html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
 	overflow: hidden;
  }
  .section {
    float:left;
    display: block;
    height: 100%;
    padding: 0;
    margin: 0;
    opacity:1;
  }
  .section.landing{
    opacity:1;
  }

  .landing-image, .upcoming-project {
    position: relative;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
  }
</style>

And the footer code is:

<script type="text/javascript" src="http://trgraglia.github.io/jquery.horizonScroll.js/demo/jquery.touchSwipe.js"></script>
<script type="text/javascript" src="http://trgraglia.github.io/jquery.horizonScroll.js/demo/jquery.horizonScroll.js"></script>
<script type="text/javascript">
  	
    $('.section').horizon({
    scrollTimeout: null,
    scrollEndDelay: 80,
    scrollDuration: 550,
	});
 
  	var size = $('.section').length	
  
    $(document).on('click','.w--current', function () {
        $(document).horizon('scrollTo', 0);
    });
  
  	$(document).on('click','#btn-projects', function () {
        $(document).horizon('scrollTo', 1);
    });
  
  	$(document).on('click','#btn-get-involved', function () {
        $(document).horizon('scrollTo', (size-2));
    });
  
  	$(document).on('click','#btn-get-involved2', function () {
        $(document).horizon('scrollTo', (size-2));
    });
  
  	$(document).on('click', '#btn-contact', function () {
        $(document).horizon('scrollTo', (size-1));
    });
  
 	 $(document).on('click', '#btn-contact2', function () {
        $(document).horizon('scrollTo', (size-1));
    });
  	window.onload = function() {
      document.getElementsByClassName("nav-link w--current")[0].removeAttribute("href");
    };
</script>

Goo luck!

20

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