Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Macy

Changing standard reel slideshow gallery arrows

Asked by Macy

Question

Macy    1

Macy
Posted

Site URL: http://macyphan.com

Hello! I have been trying to figure this out for weeks. I want to change the standard reel slideshow gallery arrows that look like this -->   <-- (as seen on homepage of my website) into controls that look like this < > (I attached an image of what I mean) 

I hope that makes sense! I would be so grateful if someone could help me out!!

Screen Shot 2020-08-08 at 12.44.51 AM.png

Share this post

Link to post

2 answers to this question

Recommended Posts

  • 0

rwp    264

rwp
Posted 
[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:first-of-type .gallery-reel-control-btn-icon::before {
  content: '<';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control:last-of-type .gallery-reel-control-btn-icon::before {
  content: '>';
  font-family: ariel;
  font-size: 80px;
  font-weight: 900;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control svg {
 display: none;
}

[data-section-id="5f18b027017682694630c735"] .gallery-reel-control .gallery-reel-control-btn-icon {
  transform: scaleX(30%);
}

 

tuanphan and Macy reacted to this

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources