cmiller Posted June 20 Share Posted June 20 Hi. Can someone help me? I am trying to modify my carousel at the bottom of this webpage so that the images have individual hyper-links to external websites. Password: EETest2024 Link to comment
Beyondspace Posted June 21 Share Posted June 21 (edited) The image links are the same as the ones on More Details button or they are the different ones? Edited June 21 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
cmiller Posted June 21 Author Share Posted June 21 Hi! Thank you for your reply and willingness to help. I am referring to this carousel (see attached image). Link to comment
cmiller Posted June 21 Author Share Posted June 21 I would like to apply this to various carousel images across various webpages on the site. Link to comment
Beyondspace Posted June 22 Share Posted June 22 (edited) It looks like you are using this kind of section,right? You can turn on the button and add your desired link to Content tab. Then apply the following custom CSS to make the button link cover full of image section[data-section-id="66747e3f91be897d025248dc"] .list-item-content__button { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: transparent; border: unset !important; box-sizing: border-box; color: transparent !important; } section[data-section-id="66747e3f91be897d025248dc"] .list-item-content__button:hover { background: transparent !important; } Edited June 22 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
cmiller Posted June 22 Author Share Posted June 22 Wow! Thank you so much! Is it possible to add code for this section to do the same thing: Link to comment
Solution tuanphan Posted Tuesday at 09:17 AM Solution Share Posted Tuesday at 09:17 AM On 6/23/2024 at 4:22 AM, cmiller said: Wow! Thank you so much! Is it possible to add code for this section to do the same thing: You can enable button then use this CSS code section[data-section-id="665fd250c388e16e8dec6849"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } .user-items-list-carousel .list-item-content__button-container a { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } .user-items-list-carousel .list-item-content__button-container { position: static !important; transform: unset !important; } a.list-item-content__button.sqs-block-button-element:before { visibility: hidden; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; } .list-item-content--hidden { display: block !important; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cmiller Posted Tuesday at 03:33 PM Author Share Posted Tuesday at 03:33 PM Thank you so much! This is excellent! 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