Re: How to make slideshow draggable and clickable + design of controls

How to make slideshow draggable and clickable + design of controls

radaApeta
Excursionist
28 0 7

Hello,

i need help with two things, first one is - how to delete the small line that is over the controls. The second one how do i make the slideshow draggable and clickable. I was looking at other posts but nothing worked for me

thank you  :))

 

https://81e325-28.myshopify.com/

0007

radaApeta_0-1721121933539.png

 

valenta14
Replies 5 (5)

aBox_Agency
Shopify Partner
87 9 16

Hello @radaApeta 

For the Border thing - attach a screenshot.

Go to component-slideshow.css
Class: slideshow__controls

You have great products with an extensive range - Please try something premium theme and develop on it.

Thank you

Regards,
aBox Agency | Shopify Partners

Need help customizing your Shopify store? Feel free to reach out to us at Shopify Partners Directory or visit our website at aBox.Agency.

If you found this post helpful, please give it a like!
aBox_Agency
Shopify Partner
87 9 16

Screenshot 2024-07-16 at 3.05.43 PM.png

Screenshot 2024-07-16 at 3.05.01 PM.png

  

Regards,
aBox Agency | Shopify Partners

Need help customizing your Shopify store? Feel free to reach out to us at Shopify Partners Directory or visit our website at aBox.Agency.

If you found this post helpful, please give it a like!

Dan-From-Ryviu
Shopify Partner
9183 1839 1872

Hi @radaApeta 

You can add this code to Custom CSS of that section to remove the line.

.slideshow__controls {
    border: unset !important;
}

To make image clickable, please go to Online Store > Themes > Edit code > open slideshow.liquid file, find this line of code 

{%- if block.settings.image -%}

Add this code above it 

{%- if block.settings.button_label != blank -%}
  <style>
      .slideshow__text-wrapper { display: none !important; }
  </style>
  <a style="opacity: 0; z-index: 3;"
    {% if block.settings.link %}
      href="{{ block.settings.link }}"
    {% else %}
      role="link" aria-disabled="true"
    {% endif %}
    class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
  >
    {{- block.settings.button_label | escape -}}
  </a>
{%- endif -%}   

 

 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

radaApeta
Excursionist
28 0 7

Thank you for you help, but it doesnt work. Did a paste the code right ? 

radaApeta_1-1721159780076.png

 

valenta14

Rahul_dhiman
Shopify Partner
450 91 93

Hello @radaApeta - (1) how to delete the small line that is over the controls.

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slideshow.css ----> line number 102
search this code

 

 

.slideshow__controls {
border: 0.1rem solid rgba(var(--color-foreground), 0.08);
}

 

 

and replace with this code.

 

 

.slideshow__controls {
border: 0rem solid rgba(var(--color-foreground),.08);
}

 

 

 and the result will be
13.png

2) To make the Slideshow Clickable - this will need custom coding to make it clickable.
and i can help you in this custom coding, let me know.

If this was helpful, hit the like button and mark the job as completed.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167