Slider Nav Labels

Hello,
So, I’m working on a custom website for a client and I managed to turn the nav dots in the slider
to lines by changing the width in the style code to 2px
and I added labels to the nav lines using @ [laurelrose72] code in [Slider Nav Dots Labels - #2 by laurelrose72]

here is a link to my website http://firstaiment-2018.webflow.io/
and you can see how the labels are small and in three lines, I want them to be a one line label.
How do I do that? How can I edit only the labels without affecting the slider nav? I tried to change the width in the custom code but it changes the lines width as well.

<style>
.w-slider-dot {
height: 60px;
width: 2px;
color: LightGrey;
}

.w-slider-dot.w-active {
color: white;
}
</style>

<script>
$(document).ready(function() {
// config
quest1 = 'THIS IS PAINTBALL';
quest2 = 'TAKE A TOUR';
quest3 = 'OUR FIELDS';
    quest4 = 'SCENARIOS';

// do not touch
imgbegin = '<img src="';
imgend = '" />';
// end

// First dot.
$('.w-slider-nav').children('div:nth-child(1)').html(quest1);
// Second dot.
$('.w-slider-nav').children('div:nth-child(2)').html(quest2);
// Third dot.
$('.w-slider-nav').children('div:nth-child(3)').html(quest3);
   // Fourth dot.
 $('.w-slider-nav').children('div:nth-child(4)').html(quest4);

});
</script>

Hi @Yousra_M,

It is doable but it is a bit messy to do this with custom code in Webflow.
Basically the code you are using is adding some text inside each div (the dots) but you define the width of these dots to be 2px in width. It results in having the words wrapping to the next line and therefore overflow.

With code you would need to add 2 elements inside of each dot. One for the vertical line and one for the text. With some classes you could end up with the correct layout.

Something a bit like:

$('.w-slider-nav').children('div:nth-child(1)').html('<div class='vert-line-slider'></div><h2 class='label-slider'>quest1</h2>');

Anyway even if it is doable, I wouldn’t recommend making use of styling in the custom code when you can avoid it as it is not best practice to have your style stacked in your html. Better to have them in a separate file (which Webflow is not supporting as far as I know)

May be @samliew would have some better knowledges on the matter to make the clean custom code you need.

Otherwise I can point you out to a video tutorial I made to create custom sliders in Webflow, and it doesn’t involve a single line of code. Pure Webflow = Pure Bliss :crazy_face:

By replicating this structure you would be able to achieve the slider you need and have all the tools to style each elements independently.

I hope it will make it for you. Let me know if you need help to implement.

@Maximosaurus Hi! Thanks for the reply

I tried adding your line of code and editing it to suit my layout (quest1, quest2, etc)
and I tried to style the class .label-slider
but the text disappeared for some reason!

and I tried following your video tutorial last night but it was a bit complicated for me, I’m still a newbie in webflow so I’m still learning my way around webflow sorry

No worries we are all here to learn :slight_smile: (or help when we can)

I did a mistake in the code as it was written just for the idea.

I just forgot to put double quote instead of single ones. Making my html() string break in the middle resulting in nothing. I also remove the extra div for the vertical line as you can achieve this with border.

$('.w-slider-nav').children('div:nth-child(1)').html('<h2 class="label-slider">quest1</h2>');

You can try it out and if you are more comfortable with code than Webflow it should give you a good starting point to style as desired.

1 Like

@Maximosaurus Yeah I fixed the double quotation and tried to style using the label class
and so far I can only edit the font size and weight and tried to use display:inline but didn’t work
and the navigation between slides doesn’t work any more http://firstaiment-2018.webflow.io/

<style>
.w-slider-dot {
height: 60px;
width: 2px;
color: LightGrey;
}

.w-slider-dot.w-active {
color: white;
}

.label-slider{
font-size: 15px;
font-weight: normal;
display: inline-block;
}

</style>

<script>
$(document).ready(function() {
// config
quest1 = 'THIS IS PAINTBALL';
quest2 = 'TAKE A TOUR';
quest3 = 'OUR FIELDS';
quest4 = 'SCENARIOS';

// do not touch
imgbegin = '<img src="';
imgend = '" />';
// end

// First dot.
$('.w-slider-nav').children('div:nth-child(1)').html('<h2 class="label-slider">quest1</h2>');
// Second dot.
$('.w-slider-nav').children('div:nth-child(2)').html('<h2 class="label-slider">quest2</h2>');
// Third dot.
$('.w-slider-nav').children('div:nth-child(3)').html('<h2 class="label-slider">quest3</h2>');
// Fourth dot.
 $('.w-slider-nav').children('div:nth-child(4)').html('<h2 class="label-slider">quest4</h2>');
});

Same problem than before.

You set you dot to be strictly 2px wide with this style

.w-slider-dot {
height: 60px;
width: 2px;
color: LightGrey;
}

The slider label is a child of this w-slider-dot.

Inline block don’t work because of the properties of an inline block

Meaning an inline block will calculate its width with the elements contained in it but will be maximum 100% of the parent (in this case 2px)

The link to different slides still work on my end but you need to precisely click on the link.

As I said it could be done like this but I’m really unsure of the underlying structure of the Webflow slider so you might end up with some conflict of styles.

In the other hand I made a quick version of the ‘only webflow’ slider which should suits your needs and I made it cloneable.

https://webflow.com/website/simple-slider?s=simple-slider

I’m leaving it a few days on the showcase if you want to use this method instead.

1 Like

I cloned your simple slider project and played with it a little to fit my design
and it worked! I really need to learn more about slider elements and button
triggers in order to avoid using custom code in the future

Thank you I appreciate your help!

1 Like

There is another way, using just CSS. Add the CSS to your custom styles.

First, remove the current dots;

.w-slider-nav.w-round > div { background: none; }

Then override the width and colour settings and add font styles;

.w-slider-dot { width: auto; height: auto; background-color: rgba(255, 255, 255, 0); margin-right: 10px; font-family: Arial, Helvetica, sans-serif; color: black; font-size: 20px; line-height: 28px; opacity: 0.3; /*Faded text for non current slide*/ }

Make sure the active dot is opaque;

.w-slider-dot.w-active { opacity: 1; }

Depending on how many slides you have, add text using the ‘CSS Content’ property;

.w-slider-dot:nth-child(1):after { content: "Slide 1"; } .w-slider-dot:nth-child(2):after { content: "Slide 2"; } .w-slider-dot:nth-child(3):after { content: "Slide 3"; }

That’s all. Enjoy.

Hi Robskinn!

Thank you for the code! I wanted to ask, is it possible to only apply this to one slider on the page, not to all of them (if there are several)? How do I select just one particular slider in the code?

Thank you,
Julia