Slideshow Banner Loading Bars / Arrows

Store Design
, ,
1

Hello. I was just wondering how I can make my slideshow look like the one these guys have over here:

https://tuff-collective.com/

With the little lines that load rather than the dots and arrows we have on our home page here:

https://cmc-collective.com/

1 Like
2

Hey @RepLift

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1728282928113.png
Moeed_0-1728282928113.png1900×913 81.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi RepLift,

you will need to modify the slideshow navigation indicators and animations.

Edit the theme code:

Online Store > Themes > Actions > Edit Code.

Modify the CSS for Navigation Dots:

  • In your base.css (or another relevant stylesheet), locate the CSS for the slideshow dots/arrows and replace or edit it. You can hide the dots/arrows with CSS:
.slider-button {
  display: none !important;
}
​
  • You can add a custom progress bar instead of dots using CSS. Create a new div that works as the progress bar and style it to fill up over time as the slides transition.
4

Hi @RepLift ,

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

5

Hi @RepLift

Please add this code to theme.liquid file, after in Online Store > Themes > Edit code.

Result:

https://youtu.be/ur2HwX9VNPg
6

Hello. Thank you lots for your reply however the bars don’t do the loading effect and dont automatically move to the next slide.

Also, if you see in the example website: https://tuff-collective.com/ the loading bars or in the image of the slideshow. Not below