Custom slide nav

[koz_mi (Mikhail Kozhevnikov)]

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

[Siton_Systems (Ezra Siton)]

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):

Slide number with total number of slides

Update sep 2020 Very tricky solution (Because “no way” to know if the slider change). I find an idea - track the change of .w-slide “style” (Each slide change inline-style by code) - like this the counter will work on fade, auto, swipe, arrows an so on. style="transform: translateX(-1730px); opacity: 1; transition: transform 500ms ease 0s;"` attrchange is a simple jQuery plugin to bind a listener function on attribute change of an element. The handler function is triggered when an attribute…

[koz_mi (Mikhail Kozhevnikov)]

Thank you for your answer!
I wanted it looks like this:

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?

[Siton_Systems (Ezra Siton)]

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).

[koz_mi (Mikhail Kozhevnikov)]

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!

[Andre_Pascal_Fuentes (Andre Pascal Fuentes Neto)]

Hey!

I made a project to the community where I add this hack to help you build your project.

https://hack-library.webflow.io/slider-counter

If it helps you, please give a like to the project, and you can find the preview there.

https://webflow.com/website/infinite-slider-hack

Thank you!

[emma199x]

how do you put the code into the page? I put it in an embed and nothing showed up