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

Increasing the size of gallery arrows


Amelia__

Question

Site URL: https://clementine-sunflower-4f33.squarespace.com/

Hello Squarespace Forum!

I would really appreciate if someone could please help me make the arrows on my slideshow gallery bigger. At the moment they are quite small and not very obvious.

I've tried the CSS from a couple of blogs that I have read but it doesn't seem to make any difference.

I'm not sure if this CSS that I have used for the descriptions on the gallery are interfering with the code? I used the CSS from this article and put the Javascript into a Markdown block in the footer: 

The site is using version 7.1.

Thanks!

Amelia
 

 

Screen Shot 2020-05-20 at 4.17.01 PM.png

Link to comment

Recommended Posts

  • 1
1 hour ago, Amelia__ said:

Legend! Thank you so much ☺️

Is there any way to make the thickness of the arrows thicker too?

.gallery-fullscreen-slideshow-control-btn-icon polyline {
    stroke-width: 4px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1
17 hours ago, joeystephensmusic said:

@tuanphan  Hi Tuan!  I used your awesome CSS for creating Carousel Arrows on my Mobile View.  This is the code is used...

/* Product slide arrows control */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls {
    display: flex !important;
}
/* arrows background */
.ProductItem-gallery-carousel-controls * {
    background: white;
}
.ProductItem-gallery-carousel-controls>div {
    justify-content: center !important;
}
}

1.  I'd like to make those arrows slightly bigger and thicker.  Ideas?

2. I'd like to have the same arrows on my desktop view as well.  Is there a CSS for that too?

 

joeystephensmusic.com

 

Thanks!

Joey

Add to Design > Custom CSS

/* Product carousel arrows thicker */
@media screen and (max-width:767px) {
.ProductItem-gallery-carousel-controls .product-item-gallery-carousel-control:after {
    width: 4vw;
    height: 4vw;
    border-width: 2px 2px 0 0;
}}

With q2, try adding to Design > Custom CSS

.ProductItem-gallery-carousel-controls {
    display: flex !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1
21 hours ago, joeystephensmusic said:

Is it possible to move the arrows immediately below the product image on Desktop AND Mobile view?  

If so, can the arrows be positioned closer together?

And, lastly, is it possible to add a background color to the arrows? Gray?

Thanks @tuanphan

Try this CSS

button.product-item-gallery-carousel-control {
    background: red !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
6 hours ago, MichaelG_2001 said:

Hi there. I'm trying solve this same problem for a SS 7.0 site, and it doesn't look like the above code will work. And honestly, I'd love to move the arrows off of the images at the ends, so they sit on the side.

Any suggestions for me?

Much appreciated,
Michael

 

Can you share link to gallery? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 11/9/2020 at 3:00 PM, MichaelG_2001 said:

Moving the arrows off of the images is more important to me

Add the following to Page Settings > Advanced > Page Header Code Injection for the page.

<style>

  @media only screen and ( min-width: 641px ) {
  
    #block-yui_3_17_2_1_1604895477696_23075 .sqs-gallery-controls .next {
    
      right: -60px;
      
      }
      
    #block-yui_3_17_2_1_1604895477696_23075 .sqs-gallery-controls .previous {
    
      left: -60px;
      
      }
    }
    
  </style>

After you put the code in you will notice that there is a little more padding between the left arrow and the first image than the last image and the right arrow. The issue is with the last image not being the same size as the other images.

Also the effect turns off when you get down to mobile screen sizes.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Hi again.

So, the code creedon supplied above really did the trick for moving the arrows off of the images at the right and left of the carousel. I'd like to figure out how make the bolder, but they basically work.

1421726984_ScreenShot2020-11-20at12_37_10AM.thumb.png.98fd67dd1aca89fbaac71e9967dd9bf5.png

However... I'm hoping to have the specific drink products in the carousel link through to their dedicated product pages, but as soon as I add in the click-thru URL in an Image Edit it causes havoc in the arrangement of the products in the carousel. Pleas see below.

30712541_ScreenShot2020-11-20at12_36_23AM.thumb.png.3bad8ab2c3a953ffb332068f79593cd7.png


I've spent over a week trying to solve this little puzzle. I've searched the forum, I've tried taking out targeted bits of code (creedon's code above and the code that creates the fisheye effect on rolloever, etc.) to make sure there's no conflict. I may have missed something, but no luck. I've also tried to find carousel plug-ins suitable for PNG products floating over a background and was kind of surprised to come up empty.

I'm honestly at the end of my rope on this and would be very grateful for any insight anybody might have on what may be causing the problem.

Thanks, as always,
Michael

 

Link to comment
  • 0
On 11/20/2020 at 1:53 PM, MichaelG_2001 said:

Hi again.

So, the code creedon supplied above really did the trick for moving the arrows off of the images at the right and left of the carousel. I'd like to figure out how make the bolder, but they basically work.

1421726984_ScreenShot2020-11-20at12_37_10AM.thumb.png.98fd67dd1aca89fbaac71e9967dd9bf5.png

However... I'm hoping to have the specific drink products in the carousel link through to their dedicated product pages, but as soon as I add in the click-thru URL in an Image Edit it causes havoc in the arrangement of the products in the carousel. Pleas see below.

30712541_ScreenShot2020-11-20at12_36_23AM.thumb.png.3bad8ab2c3a953ffb332068f79593cd7.png


I've spent over a week trying to solve this little puzzle. I've searched the forum, I've tried taking out targeted bits of code (creedon's code above and the code that creates the fisheye effect on rolloever, etc.) to make sure there's no conflict. I may have missed something, but no luck. I've also tried to find carousel plug-ins suitable for PNG products floating over a background and was kind of surprised to come up empty.

I'm honestly at the end of my rope on this and would be very grateful for any insight anybody might have on what may be causing the problem.

Thanks, as always,
Michael

 

Do you still need help on this?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Yes, I still need help if you have a couple of minutes. And yes, I had to change the password. Apologies.
Password: temporaryrebel

Tuanphan has pointed out that the carousel looks fine in their browser. For me, it's broken in Firefox but does seem to look fine in Safari. I have absolutely no idea what could be creating that problem or how to solve it.

The second issue is that even when it works visually, I've noticed that it takes a few clicks to get the carousel moving in both browsers. Is this a common thing, or a result of the code we added moving the arrows to the sides of the carousel images?

I cannot thank you all enough for the help you've offered in the past.

M

 

Link to comment
  • 0
On 11/19/2020 at 10:53 PM, MichaelG_2001 said:

I'd like to figure out how make the bolder, but they basically work.

Add the following to Page Settings > Advanced > Code Header Injection for the page.

<style>

  /* begin change size of gallery control arrows */
  
    .sqs-gallery-block-slider .sqs-gallery-controls .next:before,
    .sqs-gallery-block-slider .sqs-gallery-controls .previous:before
    
      {
      
        --controls-size: 32px; /* this value controls the side of the arrows */
        
        /* do not change anything below, there be the borg here */
        
        font-size: var( --controls-size );
        font-weight: 700;
        height: var( --controls-size );
        line-height: var( --controls-size );
        width: var( --controls-size );
        
        }
        
    /* end change size of gallery control arrows */
    
  </style>

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
22 hours ago, MichaelG_2001 said:

I've noticed that it takes a few clicks to get the carousel moving in both browsers. Is this a common thing, or a result of the code we added moving the arrows to the sides of the carousel images?

I'm pretty sure it's not the CSS I provided. I loaded your site, commented out all the custom code locally and it still exhibited the same sluggish behaviour. At the beginning it takes several clicks to get going and when it cycles around, again it takes multiple clicks. It's flawless once it gets going.

Did you add any custom Javascript to your site?

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
4 minutes ago, MichaelG_2001 said:

I'll try the code above and see where that gets me.

Well my code won't take care of the gallery visual problems or sluggisness.

But to make sure its not some bit of code added you could copy out the Custom CSS and Page Header Code Injection. Keep it someplace safe! Then empty out those fields and save so you are pretty sure there is nothing interfering and then try the gallery again. Be sure to reload the page before testing.

I think you'll find what I did in that it didn't change the gallery performance.

Folks please pitch in! Give the gallery controls a test! What happens?

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

I'm realizing now that I did add a featherlight popup script I've used on a previous site. It's on the in-progress RECIPES page. I've used this code previously without apparent incident.

Here's the code from the RECIPES page header injection:
<link href="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" type="text/css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//cdn.rawgit.com/noelboss/featherlight/1.4.0/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>


Here's the corresponding code from a sample image on that page:

<a href="#" data-featherlight="#test-image"><img alt="test image 1 alt" src="https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eedbd40a8a1cf784765b/1604906715584/cocktail_temp.jpg" onmouseover="this.src='https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eee2116faf366cf0d010/1604906722024/cocktail_temp_over.jpg'" onmouseout="this.src='https://static1.squarespace.com/static/5f91e45ce9c9a7197e80ca05/t/5fa8eedbd40a8a1cf784765b/1604906715584/cocktail_temp.jpg'">
</a>

<div style="display:none;">
<div id="test-image">
<p><h10 class="recipe-title"> pumpkin spice frappe <br>
  </h10>
<b>INGREDIENTS</b><br>
» 1 can REBEL Hard Pumpkin Spice Latte<br>
» ½ cup pumpkin puree<br>
» ½ cup chilled black coffee<br>
» ½ cup vanilla soy milk (or any other milk you prefer)<br>
» 2 cups ice<br>
» ½ tsp pumpkin pie spice<br>
» 2 tsp cocoa powder<br>
» Whipped cream (for layering)<br>
<br>
<b>PREPARATION</b><br>
1) Blend all ingredients (except for whipped cream).<br />
2) Layer blended mixture with whipped cream.<br />
3) Top with cocoa powder or, for the ‘gram, colorful sliced figs.<br />
Makes 2+ servings.
</p>
</div>
</div>

 

Edited by MichaelG_2001
Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...