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.
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.
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
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.
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 (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.
@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/
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.
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 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?