Hi there!
I couldn’t figured it out that how we can do multiple mouse click interactions on same element because in mouse click, there are only 2 taps available but I need more than 2 clicks interactions so can anyone help me that how to do it, is there any way to do this???
Here is the reference:
hi @moiz_striker you do not need 5 or 100 clicks all you need is only one click on each button and function that will do the job for you that take in count length (number) of slides.
here is simple code example
const sBtnLeft = document.querySelector(".w-slider-arrow-left")
const sBtnRight = document.querySelector(".w-slider-arrow-right")
const slides = document.querySelectorAll(".w-slide")
const progressBar = document.querySelector(".progress")
// length of progress bar (%)
const chunk = (100 / slides.length);
// get current slide (in view)
function currentSlide() {
// set timeout to wait for change (50ms is fine)
setTimeout(()=>{
slides.forEach((slide,idx)=>{
if (slide.classList.contains("w-slide") && !slide.hasAttribute("aria-hidden")) {
// start array with num 1
const slideNum = idx + 1;
// expand length of progress bar
const w = `${chunk * slideNum}`;
progressBar.style.width = `${w}%`;
progressBar.style.transition = "width 0.3s";
}
})
}, 50)
}
// set progress bar init length
setTimeout(()=>{
currentSlide()
}
, 50)
// Listeners
sBtnLeft.addEventListener("click", currentSlide)
sBtnRight.addEventListener("click", currentSlide)
I actually don’t understand the code because I’m not familiar with that, and all I need is to move that horizontal bar other than that all good, just I have to move the bar forward or backward on arrows click. here is my site link (https://deutsche-aligners.webflow.io/) scroll down and you will see in testimonials that what I actually wants…
Hi @moiz_striker I have guess you do not code and that’s why I have provided code and read only to study to see how to. The code is placed in page setting.
yeah I understand @Stan and really appreciated that what you’ve done for me. Can you go through my site and see that I actually want to move the bar like this
hi @moiz_striker here is updated code to fulfil your needs
const sBtnLeft = document.querySelector(".w-slider-arrow-left")
const sBtnRight = document.querySelector(".w-slider-arrow-right")
const slides = document.querySelectorAll(".w-slide")
const progressBar = document.querySelector(".progress")
// length of progress bar (%)
const chunk = (100 / slides.length);
let slideNum = 0;
// get current slide (in view)
function currentSlide() {
// set timeout to wait for change (50ms is fine)
setTimeout(()=>{
slides.forEach((slide,idx)=>{
if (slide.classList.contains("w-slide") && !slide.hasAttribute("aria-hidden")) {
slideNum = idx;
// move progress bar
const w = `${chunk * slideNum}`;
progressBar.style.width = `${chunk}%`;
progressBar.style.transform = `translateX(${slideNum * 100}%)`;
progressBar.style.transition = " 0.3s";
}
})
}, 50)
}
// set progress bar init length
setTimeout(()=>{
currentSlide()
}
, 50)
// Listeners
sBtnLeft.addEventListener("click", currentSlide)
sBtnRight.addEventListener("click", currentSlide)
hope this will solve your request
As you saw my site, so all I need to paste this code into html embed am I right?
can I share with you my workspace so if you implement that code into my home page!!!
Hi @Stan, actually I don’t have budget that’s why I’m trying to do this by myself, can you see in backend (Webflow - Deutsche Aligners) and if you tell me that where I’m doing wrong because I just paste your code in body and change progress class to indicator but on frontend the bar doesn’t move by clicking on the right arrow!!!
I wouldn’t try to do this using interactions, which is what I think you’ve been doing so far. Try Keen Slider, it’s pretty good and it shouldn’t take too much time for you to get your head around. There’s a bit of coding involved but not a massive amount
Use the “arrows and dots” slider in the documentation, you can change the dots using css so that they represent the moving line you need
IMO you do not need to involve 3d-party library (slider) for very simple task like this. Moiz issue is related to his progress CSS settings.
Hi @Stan, yeah you say right well it’s a simple task and I have made the slider just want to move that indicator bar on arrow click.
@Stan can you see in backend (Webflow - Deutsche Aligners) and if you tell me that where I’m doing wrong because I just paste your code in body and change progress class to indicator but on frontend the bar doesn’t move by clicking on the right arrow!!!
Hi @moiz_striker as there are several issues to make it work here is video where I try to explain where are your issues and what approach you should take to make it work. I really do not know how much more I can help you to solve your request. 
(video deleted)
I will delete this video later when cleaning my cloud storage because is not mandatory as full solution was already provided. Let me know If you will have further questions.
Hi @Stan, Hope you are doing good…
I saw your video and as you told me in the video I did exactly what you told, & it’s just incredibly worked I delete the second slider and also delete the arrows and then change the progress bar class with indicator and I refreshed the page and it’s just Boom, amazing buddy thanks for helping me… LoVe yOu… 
