Streaming live at 10am (PST)

Different icons for every slider


#1

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 ?


Customize slider
Slider Nav Dots Labels
Slider Navigation Dots
Is it possible to link to a specific slide in a slider?
Building a custom image slider
Slider bullet styling not possible?
Nav Links control the Slide(s) / Slider
Code appearing in body of published site?
#2

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 smile 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 wink

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 wink

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


<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! smile
Bartek aka. Javascript Ninja
That's just epic ;D Thanks for that name ^^


Changing Content via Slider
#3

Master,

I have failed you... your ninja skills (that you learn on the mountains of china) are not working on my website

I feel awful, please, punish me.

Signed: Grasshopper.


#4

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 smile


@edit
now should work smile


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


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


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

#5

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 wink


#6

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


#7

This topic was automatically closed after 10 days. New replies are no longer allowed.