Streaming live at 10am (PST)

Custom code to set the default starting slide to slide 2

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

Preferred:
11

Thanks Graham

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

1 Like

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:

3 Likes

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

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:

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

Hey @allthingsGJD

You still need help with this?

Piter :webflow_heart:

Hey @PiterDimitrov 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

Hey @jahrhunderttalent

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

Piter :webflow_heart:

1 Like

Hey @PiterDimitrov,

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!

2 Likes

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

1 Like

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.

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:

Awesome thanks for this!