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:

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:
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=""> 
$(document).ready(function() {
$(".slider-left").each(function() {
trackValues: true,
callback: function(event) {
var myIndex = $(".w-slider-dot.w-active").index();
$(this).find(".counter_number").innerHTML = myIndex + 1;

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


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

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

Thank you! :pray:

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