Slideshow Banner Loading Bars / Arrows

RepLift · ‎10-07-2024

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/

Moeed · ‎10-07-2024

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 </body> tag

<style>
@media screen and (min-width: 768px) {
.slider-counter__link--dots .dot {
    width: 6rem !important;
    border-radius: unset !important;
}
.slider-button {
    display: none !important;
}
.slideshow__controls--top {
    margin-top: -45px;
    border: unset !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications

RepLift · ‎10-10-2024

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

rajweb · ‎10-07-2024

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.

Rajat | Shopify Expert Developer
Need a reliable Shopify developer for your next project?
Our App: Productify Groups App
Email: rajat.shopify@gmail.com
Portfolio: https://rajatweb.dev

websensepro · ‎10-07-2024

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 </head>

<style>
@media screen and (min-width: 768px) {
.slider-button {
    display: none !important;
   }
.slider-counter__link--dots .dot {
    width: 5rem !important;
    border-radius: unset !important;
   }
.slideshow__controls--top {
    margin-top: -40px;
    border: unset !important;
   }
}
</style>

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!

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP

Dan-From-Ryviu · ‎10-07-2024

Hi @RepLift

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

Result:

https://youtu.be/ur2HwX9VNPg

<style>
body .slideshow__autoplay,
body .slider-button {
    display: none;
}
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); /* Start off-screen (to the left) */
    }
    100% {
        transform: translateX(0); /* End at its normal position */
    }
}
body .slider-counter__link .dot { 
    position: relative;  
    overflow: hidden; 
    background: #ffffff85 !important; 
    width: 5rem;
    border-radius: 0;
}
.slider-counter__link .dot:after {
    transform: translate(-100%);
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    background: #fff;
}
.slider-counter__link--active .dot:after {
    animation: slideInFromLeft 3s ease forwards;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Slideshow Banner Loading Bars / Arrows

Slideshow Banner Loading Bars / Arrows

- Need a Shopify Specialist? Chat on WhatsApp ✅- Get a quick Shopify quote – Click here!- Custom Design | Advanced Coding | Store Modifications

Community Blog Articles

- Need a Shopify Specialist? Chat on WhatsApp ✅

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications