Streaming live at 10am (PST)

Slider Nav Dots Labels


#1

Currently in the slider component, there are dot icons which we can add numbers to. Is there a way to customize these labels and change the numbers to text links?

If not:

  1. Is there a way to add text links to bottom and use them to navigate through slides?

  2. Is there a way to display video in hero and change the video by clicking text link?

  3. Will custom nav labeling be a future option?

Thank you.


Any way to style slider navigation dots using code or a creative workaround?
#2

I resolved this, if anyone is looking for custom images or text links in slider - I used this link here: Different icons for every slider Thank you and props to bartekkustra for that.

I then made the following modifications to achieve text links:

<script>
	$(document).ready(function() {
		// config
		quest1 = 'What is UX?';
		quest2 = 'My design process.';
		quest3 = 'Why Hire me?';

		// 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);

	});
</script>

and in head code :

<style>
.w-slider-dot {
  background: white;
  color: red;
  width: 35%;
  height: 35%;
  
}
.w-slider-dot.w-active {
  background: white;
    color: green;
    width: 35%;
  height: 35%;
}
</style>

#3

Here is example that can be cloned:

https://webflow.com/website/text-links-slider


#4

Thank you for sharing such great experience! :+1:


#5

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