Different icons for every slider

[Rui_Almeida]

Hi,

I have a client that is asking something very custom.

He want´s every “slide ball´s” to have different icons. I know this i can´t do this with the slider, but after exporthing the code, can i hammer the code?

@bartekkustra → aka → Javascript Ninja, can you do some magic here ?

[bartekkustra (Bartosz Kustra)]

Ah, yes… hello. I’m Bartosz Kustra and I’m going to do some magic here. Please, let me introduce my beautiful assistant jQuery!

The trick is very simple, yet it was hard to find the answer. Let me explain in details The slider navigation on Webflow creates a div with .w-slider-nav class in which has divs inside called .w-slider-dot. The most important thing is that .w-slider-nav to which we can relate in our script.

All we have to do is to set the script to add an image inside of those .w-slider-dot divs. I used awesome .children() function to get to the divs inside .w-slider-nav class. Then I used :nth-child() to get to the proper nth div

As you can see in my code below I set up a simple config in which you can set the proper image URL for image1, image2, image3 and image4. The rest of this shouldn’t be touched unless you know what you are doing

Good luck Always check my http://forumhelp.webflow.com page to get to other things I’ve helped with Maybe you’ll find them useful somehow

---

<script>
$(document).ready(function() {
// config
	image1 = 'phone.png';
	image2 = 'apple.png';
	image3 = 'people.png';
	image4 = 'cart.png';
// end

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

	$('.w-slider-nav').children('div:nth-child(1)').html(imgbegin + image1 + imgend);
	$('.w-slider-nav').children('div:nth-child(2)').html(imgbegin + image2 + imgend);
	$('.w-slider-nav').children('div:nth-child(3)').html(imgbegin + image3 + imgend);
	$('.w-slider-nav').children('div:nth-child(4)').html(imgbegin + image4 + imgend);
//end
});
</script>

---

Good luck!
Bartek aka. Javascript Ninja
That’s just epic ;D Thanks for that name ^^

[Rui_Almeida]

Master,

I have failed you… your ninja skills (that you learn on the mountains of china) are not working on my [website][1]
[1]: http://websitetesting.webflow.com/

I feel awful, please, punish me.

Signed: Grasshopper.

[bartekkustra (Bartosz Kustra)]

Oh I see both issues. First of all, I’ve edited the code above so it works like a charm. Secondly, please add that script before </body> tag in Custom Code section in Dashboard

---

@edit
now should work

---

@edit 2
If not, please contact me over Skype. You can find contact info on my profile

---

@edit 3
You could also set slider’s navigation to be with numbers in it. Just like my website I didn’t put images, so it would be good if you check source code to see how it works Here is my troubleshooting link

---

@edit4
Just in case here is my code I’ve used on my site.

<script>
	$(document).ready(function() {
		// config
		image1 = 'phone.png';
		image2 = 'apple.png';
		image3 = 'people.png';
		image4 = 'cart.png';
		
		// do not touch
		imgbegin = '<img src="';
		imgend = '" />';
		// end

		// First dot.
		$('.w-slider-nav').children('div:nth-child(1)').html(imgbegin + image1 + imgend);
		// Second dot.
		$('.w-slider-nav').children('div:nth-child(2)').html(imgbegin + image2 + imgend);
		// Third dot.
		$('.w-slider-nav').children('div:nth-child(3)').html(imgbegin + image3 + imgend);
		// Fourth dot.
		$('.w-slider-nav').children('div:nth-child(4)').html(imgbegin + image4 + imgend);
		
	});
</script>

[bartekkustra (Bartosz Kustra)]

You have to change this:

$('.w-slider-nav').children('div:nth-child(1)').html(imgbegin + image1 + imgend);
    $('.w-num').children('div:nth-child(2)').html(imgbegin + image2 + imgend);

to this:

$('.w-slider-nav').children('div:nth-child(1)').html(imgbegin + image1 + imgend);
$('.w-slider-nav').children('div:nth-child(2)').html(imgbegin + image2 + imgend);

and change images used in config

[Rui_Almeida]

it´s work, your crouching tiger technique work, tks man