Jack2406 Posted September 20, 2022 Share Posted September 20, 2022 Thanks so much! It worked for the section under waste-saving recipes. Would you please be able to do the same for the carousel images under the Zero Waste Staff Food section on the same page? Thanks again for your time - it's much appreciated. Link to comment
tuanphan Posted September 20, 2022 Share Posted September 20, 2022 12 hours ago, Jack2406 said: Thanks so much! It worked for the section under waste-saving recipes. Would you please be able to do the same for the carousel images under the Zero Waste Staff Food section on the same page? Thanks again for your time - it's much appreciated. Use this new code /* List carousel clickable */ .user-items-list-item-container[data-section-id="6319dfbecb1930144b4dd9e3"], .user-items-list-item-container[data-section-id="631a04c48a1f5a0ae0b38625"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !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
Jack2406 Posted September 21, 2022 Share Posted September 21, 2022 It works, thanks a lot! tuanphan 1 Link to comment
Quick2Hire Posted October 14, 2022 Share Posted October 14, 2022 Hello, I'd love some assistance with click through images on my home page. I've already added the buttons as mentioned above. This is the link: https://www.quick2hire.co.uk/ Thank you in advance! Link to comment
tuanphan Posted October 17, 2022 Share Posted October 17, 2022 On 10/14/2022 at 7:38 PM, Quick2Hire said: Hello, I'd love some assistance with click through images on my home page. I've already added the buttons as mentioned above. This is the link: https://www.quick2hire.co.uk/ Thank you in advance! Add to Design > Custom CSS /* Carousel clickable */ .user-items-list-item-container[data-section-id="633c1b0fd68bcd316fecec7a"] { li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } a.list-item-content__button.sqs-block-button-element:before { display: none !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
elliedepoes Posted November 28, 2022 Share Posted November 28, 2022 (edited) Hi there, I have a similar request! Could you help me to hide the buttons in the carousel at my homepage and make the images clickable?https://www.neeltjekleijn.com/ Edited November 28, 2022 by elliedepoes Link to comment
tuanphan Posted December 2, 2022 Share Posted December 2, 2022 On 11/28/2022 at 10:19 PM, elliedepoes said: Hi there, I have a similar request! Could you help me to hide the buttons in the carousel at my homepage and make the images clickable?https://www.neeltjekleijn.com/ Use this new code /* Carousel clickable */ .user-items-list-item-container[data-section-id="637e505d36ea19641d82cafe"] { li.list-item { position: relative !important; } .list-item-content__button-container { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; border: none !important; } a.list-item-content__button.sqs-block-button-element:before { display: none !important; }} Bewarenana and elliedepoes 1 1 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
Bewarenana Posted December 22, 2022 Share Posted December 22, 2022 Hi can you please help me too? This is our website: https://www.homekeeper.pt/ It's the carousel under the highlighted properties. Is is too much to ask also to add some hover effect (fade out)? Thank you in advance Link to comment
tuanphan Posted December 24, 2022 Share Posted December 24, 2022 On 12/22/2022 at 8:05 PM, Bewarenana said: Hi can you please help me too? This is our website: https://www.homekeeper.pt/ It's the carousel under the highlighted properties. Is is too much to ask also to add some hover effect (fade out)? Thank you in advance Use this CSS code /* Highlight properties */ .user-items-list-item-container[data-section-id="63a4292fe37c966117b09b49"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !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
Naina Posted January 11, 2023 Share Posted January 11, 2023 Hi I am looking for help with the same thing!! This is the link https://nainapasricha.com/work/ux-88f2n - thank you so much Link to comment
tuanphan Posted January 15, 2023 Share Posted January 15, 2023 On 1/12/2023 at 6:02 AM, Naina said: Hi I am looking for help with the same thing!! This is the link https://nainapasricha.com/work/ux-88f2n - thank you so much Use this CSS .user-items-list-item-container[data-section-id="63bf15dbd2978e1b07709ce8"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !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
yuliamazur Posted January 22, 2023 Share Posted January 22, 2023 Hello, @tuanphan Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work... I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image). Maybe I need to add a link to description to make the image clickable? Thank you in advance 🙏 Website link: https://sparrow-tomato-zxzd.squarespace.com Password: testmode1568 Link to comment
yuliamazur Posted January 22, 2023 Share Posted January 22, 2023 On 8/5/2022 at 9:55 AM, tuanphan said: Add to Last Line in Code Injection > Footer <script> $( ( ) => { const selector = '.user-items-list-carousel__slides .list-item'; $( selector ).each ( function ( ) { const $this = $( this ); $( $this ).click ( function ( ) { const url = $( '.list-item-content__button', $this ) .attr ( 'href' ); $( `<a href="${ url }" target="_blank">` ) .get ( 0 ) .click ( ); } ); } ); } ); </script> <style> .user-items-list-item-container[data-section-id="62dac38a00902b10848f73f0"] .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-item-container[data-section-id="62dac38a00902b10848f73f0"] .user-items-list-carousel__gutter { cursor: pointer; } </style> Hello, @tuanphan Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work... I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image). Maybe I need to add a link to description to make the image clickable? Thank you in advance 🙏 Website link: https://sparrow-tomato-zxzd.squarespace.com Password: testmode1568 Link to comment
ElliceF Posted January 24, 2023 Share Posted January 24, 2023 Hi there! I would also love help having my carousel images link to my corresponding portfolio pages. Note I do not want to add the button, I just want the text and clickable images. https://www.ellicefordphotography.com/ Link to comment
tuanphan Posted January 27, 2023 Share Posted January 27, 2023 On 1/22/2023 at 6:43 PM, yuliamazur said: Hello, @tuanphan Thank you for this code! I've tried to use it on my website, but unfortunately it doesn't work... I have a similar carousel list (see screenshot attached) and I need to make my images clickable, and at the same time be able to scroll the carousel with adjacent slides. Is there a custom code solution for this? Also I would like to ask if I can make the buttons invisible? (Just the title and description below the image). Maybe I need to add a link to description to make the image clickable? Thank you in advance 🙏 Website link: https://sparrow-tomato-zxzd.squarespace.com Password: testmode1568 Site url doesn't exist. Can you check it again? 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
tuanphan Posted January 27, 2023 Share Posted January 27, 2023 On 1/25/2023 at 6:53 AM, ElliceF said: Hi there! I would also love help having my carousel images link to my corresponding portfolio pages. Note I do not want to add the button, I just want the text and clickable images. https://www.ellicefordphotography.com/ You can add buttons, then we will transfer button link to image link + hide buttons then 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
yuliamazur Posted January 27, 2023 Share Posted January 27, 2023 8 hours ago, tuanphan said: Site url doesn't exist. Can you check it again? Hey @tuanphan, sorry, I have updated the site url. Here it is: https://www.ochi-studio.com/home I've added the buttons below carousel images for users to click on them, but I'd prefer to remove the buttons and make the images clickable + be able to scroll the carousel with adjacent slides. The specific section I'm refering to is this one: section[data-section-id="63cd14eaab5f09481fb2a2a4"] Thank you!!! Link to comment
tuanphan Posted January 28, 2023 Share Posted January 28, 2023 21 hours ago, yuliamazur said: Hey @tuanphan, sorry, I have updated the site url. Here it is: https://www.ochi-studio.com/home I've added the buttons below carousel images for users to click on them, but I'd prefer to remove the buttons and make the images clickable + be able to scroll the carousel with adjacent slides. The specific section I'm refering to is this one: section[data-section-id="63cd14eaab5f09481fb2a2a4"] Thank you!!! Add to Design > Custom CSS /* List Section - Make list images clickable */ [data-section-id="63cd14eaab5f09481fb2a2a4"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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
yuliamazur Posted January 28, 2023 Share Posted January 28, 2023 2 hours ago, tuanphan said: Add to Design > Custom CSS /* List Section - Make list images clickable */ [data-section-id="63cd14eaab5f09481fb2a2a4"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} Thank you so much @tuanphan, it worked great!! Just one question, is it possible to scroll this clickable images by clicking+dragging? When I'm trying to drag the items with cursor it's not possible to move them, only click is available. I've attached the video to explain better. There's a similar product view section in the second video I've attached where you can both click & drag + click to view the product page. Is there any posibility to do the same in my case? The website where I've seen this carousel scroll is this one: https://www.nakedcph.com/en Thank you 🙏 2071722702_ScreenRecording2023-01-28at13_09_00.mov Screen Recording 2023-01-28 at 13.13.01.mov Link to comment
ElliceF Posted January 30, 2023 Share Posted January 30, 2023 On 1/26/2023 at 11:20 PM, tuanphan said: You can add buttons, then we will transfer button link to image link + hide buttons then Ok, I have done that. https://www.ellicefordphotography.com/ Link to comment
tuanphan Posted February 2, 2023 Share Posted February 2, 2023 On 1/28/2023 at 7:18 PM, yuliamazur said: Thank you so much @tuanphan, it worked great!! Just one question, is it possible to scroll this clickable images by clicking+dragging? When I'm trying to drag the items with cursor it's not possible to move them, only click is available. I've attached the video to explain better. There's a similar product view section in the second video I've attached where you can both click & drag + click to view the product page. Is there any posibility to do the same in my case? The website where I've seen this carousel scroll is this one: https://www.nakedcph.com/en Thank you 🙏 2071722702_ScreenRecording2023-01-28at13_09_00.mov Screen Recording 2023-01-28 at 13.13.01.mov Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code On 1/31/2023 at 5:25 AM, ElliceF said: Ok, I have done that. https://www.ellicefordphotography.com/ Add to Design > Custom CSS /* List Section - Make list images clickable */ .user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} 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
yuliamazur Posted February 2, 2023 Share Posted February 2, 2023 6 minutes ago, tuanphan said: Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code Add to Design > Custom CSS /* List Section - Make list images clickable */ .user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} I’m using the commercial plan, so I think I’ll be able to insert another code. I’m waiting to hearing from you. I’d appreciate your help very much! thank you Link to comment
BenjaminCarter1 Posted February 2, 2023 Share Posted February 2, 2023 Hello, I would also love some help making the images on the carousal on the homepage clickable. I tried some code you suggestes but a white oval shape was appearing on the images. Are you also able to have the link open in a new window?https://creanto.com/ Much appreciated Link to comment
ElliceF Posted February 4, 2023 Share Posted February 4, 2023 On 2/2/2023 at 9:27 AM, tuanphan said: Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code Add to Design > Custom CSS /* List Section - Make list images clickable */ .user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} This worked. Thanks so much!! Link to comment
yuliamazur Posted February 7, 2023 Share Posted February 7, 2023 On 2/2/2023 at 1:57 PM, tuanphan said: Because that code disable this behavior. If you use a Business Plan/higher, let me know, I will give new code, instead of current code Add to Design > Custom CSS /* List Section - Make list images clickable */ .user-items-list-item-container[data-section-id="63b62c75900fec26a01ab5a7"] { li.list-item { position: relative; } .list-item-content__button-container { position: static; } a.list-item-content__button.sqs-block-button-element { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; color: transparent !important; background-color: transparent !important; } .list-item-content__button-container { position: static !important; } .user-items-list-carousel__slide { pointer-events: initial !important; user-select: unset !important; } .user-items-list-carousel__gutter { cursor: pointer; }} Hey @tuanphan! Thanks for your help! I'm using the commercial plan so I think I'm able to insert the new code. Please send the new one when you can, I'd appreciate this very much!!! 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