Streaming live at 10am (PST)

Custom slide nav

Hello everyone!
Is this possible to make slide nav looks like this:
< 1/N > where N is the number of slides in slider and “<” “>” are links which are working as build-in slider arrows?


Here is my site Read-Only: https://preview.webflow.com/preview/do-buro?utm_medium=preview_link&utm_source=designer&utm_content=do-buro&preview=0606978769f14f6b0cadbb2f24fefda5&mode=preview

Please add screenshot of the UI you want.

On slide 3 from 6 output: 3/6? 4 ==> 4/6?

Try this tutorial (Minimal JS knowledge require):

Thank you for your answer!
I wanted it looks like this:
image
The solution that you sent is working, but only with one slider on the page as I understood, and I have slider inside CMS item. Ther is maybe some way to track the change of attributes only of parent slider for each counter?

You want more than one slider on a page + add counter for all sliders? (Y/N)

The code needs some edits to work for this case (use each).

I am not very good with JQuery… and these adjustments may be tricky.
there is an adjusted code…which is not working.
I think the problem is about targeting counter_number inside each slider, but I am so noobie, that mistake may be anywhere.

<script src="https://cdnjs.cloudflare.com/ajax/libs/attrchange/2.0.1/attrchange.min.js"> 
 </script>
 <script>
$(document).ready(function() {
$(".slider-left").each(function() {
$(this).find(".w-slide").attrchange({
trackValues: true,
callback: function(event) {
var myIndex = $(".w-slider-dot.w-active").index();
$(this).find(".counter_number").innerHTML = myIndex + 1;
 }
 });
 });
 });
</script>

I would be very grateful if you showed what needs to be fixed so that this code works.
Thank You!