lunacyharris Posted August 18, 2022 Share Posted August 18, 2022 Hey there, I have a few questions for whoever can assist! I appreciate your time 🙂 I am trying to achieve a similar carousel that Patagonia has going on. This is the link https://www.patagonia.com/stories/ I am wanting to move my arrows for my summary block carousel to look and function the same way Patagonia has theirs. I have most of the code in place, but it seems like I can't get my arrows in the right spot and the right arrow seems to be running into the container, resulting in it being cut off. Below is my code. Secondly, I am wanting to achieve the same single-scolling left-to-right that you can experience here: https://www.patagonia.com/stories/ Mine moves entirely instead of one column at a time. I am also looking to implement a color hover effect to the arrows. I am wanting it exactly as I have my scrolling up button in the bottom right hand of the website when you scroll down enough. I am having a hard time targeting and adding that hover affect to them. Here is the direct link to the page: https://commongroundbend.org/our-journal and the password to see it is "helpme" .................................... Here's my code so far: .sqs-gallery-design-carousel .sqs-gallery-container {   overflow: visible; } //Summary carousel arrows .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager {   float: none;   width: 100%;   position: absolute;   bottom: 35%;   left: 51%;   -webkit-transform: translate(-50%,-50%);     -ms-transform: translate(-50%,-50%);       transform: translate(-50%,-50%);   -webkit-box-pack: justify;     -ms-flex-pack: justify;       justify-content: space-between;   z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { background-color: #8abcce;   color: #000;  font-size: 20px !important;  cursor: pointer;  font-weight: bold; padding:24px 24px 24px 24px; border-radius: 50%; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { background-color: #8abcce; color: #000; font-size: 20px !important;   color: #171717;   cursor: pointer;   font-weight: bold; padding:24px 24px 24px 24px; border-radius: 50%; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } Link to comment
Wolfsilon Posted August 18, 2022 Share Posted August 18, 2022 Hello there, I think there isn't an easy way to achieve your desired results regarding how the cards scroll to the left or right. However, the arrows are more easily fixed.  .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin: 0 15px 15px 0 !important; } If you want a more robust slider/carousel, I'd look into using Swiper.JS or similar Javascript library. You can target the above selectors for further customization as well.  Best, Dan lunacyharris 1 Link to comment
lunacyharris Posted August 21, 2022 Author Share Posted August 21, 2022 I appreciate it @Wolfsilon Another thing I could get help with is the hover affect on my basic grid blog page. I am trying to have the hover overlay on the whole thumbnail including the background section with words, but currently it's only targeting the image. Thoughts? https://commongroundbend.org/blog pw='helpme' Link to comment
tuanphan Posted August 24, 2022 Share Posted August 24, 2022 On 8/22/2022 at 3:29 AM, lunacyharris said: I appreciate it Another thing I could get help with is the hover affect on my basic grid blog page. I am trying to have the hover overlay on the whole thumbnail including the background section with words, but currently it's only targeting the image. Thoughts? https://commongroundbend.org/blog pw='helpme' Can you add some blog posts? Currently we don't see any posts to check hover code Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
lunacyharris Posted August 25, 2022 Author Share Posted August 25, 2022 My bad. Once you're on the blog page, click "view all." That'll bring up the basic grid. I have the hover effect working on the carousel, but not yet on the blog grid. The other main thing I'm working on is implementing full-width images within my blog posts while keeping the title and text blocks within the narrow width on (7.1). Can't seem to find the solution. I appreciate your time Link to comment
tuanphan Posted August 28, 2022 Share Posted August 28, 2022 On 8/26/2022 at 4:10 AM, lunacyharris said: My bad. Once you're on the blog page, click "view all." That'll bring up the basic grid. I have the hover effect working on the carousel, but not yet on the blog grid. The other main thing I'm working on is implementing full-width images within my blog posts while keeping the title and text blocks within the narrow width on (7.1). Can't seem to find the solution. I appreciate your time Where is view all? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
klashhouse Posted January 7 Share Posted January 7 Hi, I'm also trying to figure out an issue with our site that we are building. We have three blocks on our homepage that use arrows, summar, gallery reel, and carousel list block. However, we can't get the summary block to have the same arrows as the other two. So we've opted to put them below the photos instead of on the side like the gallery and carousel block. The issue is we need to use an svg arrow in the summary block arrow spot to get them the same. Does anyone know if this is possible or how to do it? Link to comment
tuanphan Posted January 8 Share Posted January 8 On 1/7/2023 at 11:35 AM, klashhouse said: Hi, I'm also trying to figure out an issue with our site that we are building. We have three blocks on our homepage that use arrows, summar, gallery reel, and carousel list block. However, we can't get the summary block to have the same arrows as the other two. So we've opted to put them below the photos instead of on the side like the gallery and carousel block. The issue is we need to use an svg arrow in the summary block arrow spot to get them the same. Does anyone know if this is possible or how to do it? You can share link to this page, we can give some code to change arrows style Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
klashhouse Posted January 9 Share Posted January 9 Great! the website is https://www.cityfestmovements.org/ and the pw is cityfest  Thank you! Link to comment
tuanphan Posted January 14 Share Posted January 14 On 1/10/2023 at 12:37 AM, klashhouse said: Great! the website is https://www.cityfestmovements.org/ and the pw is cityfest  Thank you! Hi, You mean change these arrows style? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
klashhouse Posted Tuesday at 04:55 PM Share Posted Tuesday at 04:55 PM Yes, to look like the other arrows on the site... Â Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment