Custom code to set the default starting slide to slide 2

Design help General
1

Hi all,

I have made a custom slider that shows the previous and next slides ghosted out, I would like to set the default starting slide to slide 2, that way the left previous slide is visible.

Does anyone out there have any custom code to override the defaults?

I cannot share the read only link, it is confidential, the question basically applies to any Webflow slider.

I have attached images of the default starting position and the preferred position.

Default:

20
202482×1494 194 KB

Preferred:

11
112588×1548 270 KB

Thanks Graham

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hello @allthingsGJD

Can you try using the script bellow

<script>
$(document).ready(function() {
    $('#sliderId div:nth-child(slideNumber)').trigger('tap');
}); 
</script>

Paste the code before the closing body tag

Hope this helps

Piter :webflow_heart:

6 Likes
3

Hi Piter,
Thanks for taking the time to jump in.

I am a none coder, as such I understand the process of adding the code to the body tag, however I do not understand the use of the script.

Do I need to apply an iD to the slider?
Do I need to identify slide 2?

If you could expand on how to use it, that would be great.

Thanks Graham

1 Like
4

No problem!

Click on the slider element and add an ID > for example #myslide > add the script to the closing body tag > change the #sliderId with the ID of your slider > specify the slide number you want to be active on load.

See screen record > https://www.useloom.com/share/531c51fe1f7f4ec79675a13731ebde79

Piter :webflow_heart:

2 Likes
5

Thanks Piter, sorry I still do not understand which part I change (or add) to specify the slide number, do it replace the (slideNumber) part or do I add the number somewhere else?

Thanks Graham

1 Like
6

Hey @allthingsGJD

You still need help with this?

Piter :webflow_heart:

1 Like
7

Hey @PeterDimitrov I’m struggling with this.

I added the code to the custom code section bevore and gave the main slider element the id which i also inserted in the javascript. Do I need further adaptions to do?

https://preview.webflow.com/preview/gpicerace?utm_medium=preview_link&utm_source=dashboard&utm_content=gpicerace&preview=595388b80b4c34632701070727c6adcb&mode=preview

it’s the slider down at top cars :slight_smile:

thanks for your help!

1 Like
8

Hey @jahrhunderttalent

It’s not working form me. Can you confirm? The published site

Piter :webflow_heart:

2 Likes
9

Hey @PeterDimitrov,

thanks for your quick reply. You are right, it is not working.

The code I added:

<script>
$(document).ready(function() {
    $('#topcars-slider div:nth-child(3)').trigger('tap');
}); 
</script>

and my slider has the id topcars-slider.

Thanks for your help! And your video from above is not working.

Cheers!

3 Likes
10

Everything with the code looks right. I need to check more

2 Likes
11

The problem was a jquery library version conflict. I did not use the custom code where mentioned above, but now it’s working just fine.

12

Hi, I’d like to do something like this and wonder if you could help me. I’d like to know if it is possible to set the first slide as default once the mouse is out of the slider. I mean, that if i’m over the slide and go through the slides and stop at slide 3, when I move out the slider the slides go back to the begin. There’s the logic of how to do it in my head but not sure when it comes with the code :confused:

I’d much appreciate any kind of help or hints on it :slight_smile:

13

Awesome thanks for this!

14

Piter, thanks a lot! :relaxed:

15

Hey!! Is there any way to apply this function only when a button is clicked?

16

Can you give any details on what you did to get this to work?

17

@PeterDimitrov I have vanilla javascript on my website. Would you be able to help me convert it to normal javascript so that I can use this solution please? Also, because it is on page load, should it go on top of all of my other javascript? Thank you!

18

Using your script today and I’m glad I found it in not time, thank you @PeterDimitrov !

19

Hi
i want same thing but somehow script is not working
https://preview.webflow.com/preview/baidu-partner-website-1?utm_medium=preview_link&utm_source=designer&utm_content=baidu-partner-website-1&preview=e15a100f4f2ffb2799452c1f179a8d8c&workflow=preview

can you please help me

Thanks

20

@sail_abbas_154

I’ve added a component lib to SA5 that allows you to manipulate the Webflow slider- navigate to any slide by number, or navigate to first, next, prev, last slides. It also support a callback for events whenever the slide changes even if it’s auto-changed.

1 Like