how to change multicolumn slider numbers in mobile to a slider bar?

[mniciarz]

hi there, im interested in changing the multicolumn slider which is currently arrows and numbers to a slider bar. can anyone provide me with the code to do this please!

looking to add something like this:

[Shadab_dev]

Okay so this will just show progress or number of slides that the user has viewed, right?? 

So you already know that this will involve code which is a good thing. Haven't implemented this yet but love to give it a try.

Please reach out via personal links below for a convenient conversation and collaboration.

Best

Shadab

[Made4uo-Ribe]

Hi @mniciarz 

This is doable but requires custom code to add the bar in a multicolumn layout. You will need a developer for this.

Here are some examples.

Let us know of your interested. Thanks!

[mniciarz]

Hi yes I am interested can you provide the code needed to add this feature? I can add it to my multicolumn.liquid or wherever. 

[yktr280]

The code below is what I have tried and succeeded with in the featured-collection.liquid. I hope you find it helpful!

<div class="progress-bar-container">
<div class="progress-bar"></div>
</div>
<style>
.progress-bar-container {
position: relative;
width:100%;
height: 1px;
background-color: #CFCFCF;
margin-top: 10px;
overflow: hidden;
}

.progress-bar {
width: 100px;
height: 1px;
background-color: #000;
position: absolute;
left: 0;
transition: transform 0.3s ease-out;
display: block !important;
}
</style>
<script>
$(document).ready(function () {
let slider = $("#Slider-{{ section.id }}");
let slides = slider.find(".slider__slide");
let totalSlides = slides.length;
let progressBar = $(".progress-bar");

slider.on("scroll", function () {
let scrollLeft = slider.scrollLeft();
let maxScroll = slider[0].scrollWidth - slider.outerWidth();
let progress = (scrollLeft / maxScroll) * 100;

let maxMove = $(".progress-bar-container").width() - progressBar.width();
let moveX = (progress / 100) * maxMove;

progressBar.css("transform", `translateX(${moveX}px)`);
});
});
</script>