Jump to content

Click through to url from image using a portfofio section in carousel mode ( 7.1)

Go to solution Solved by johnadewolf,

Recommended Posts

Posted (edited)

Is there a way to click on images in carousel mode?

My website uses the portfolio section in carousel mode to show multiple projects within one of four design disciplines. An overview page shows ALL disciplines and ALL projects. I used the portfolio section (instead of a summary block) because I wanted to use the infinite scroll with arrows. I chose the portfolio section because I could not find a summary/gallery function for portfolios. All my individual project pages are built using the SS portfolio feature and organized into four portfolios, one for each discipline.

I would like to:

• use the image (or image and title) to click through to a page.

• not show the “learn more” button

 

If this works, I would like to turn on the "section button" to take visitors to a portfolio page showing all projects within one discipline.

I am open to another section style, as long as the infinite scroll and arrows are available.

 

narrativeenvironments-ca-nes-projects-2024-06-09.gif

Edited by johnadewolf
Additional information added.
Link to comment
  • johnadewolf changed the title to Click through to url from image using a portfofio section in carousel mode ( 7.1)

@johnadewolf Try adding this code under Website > Pages > Website Tools > Custom CSS

.list-item-content__button-container {
    position: static;
}
li.list-item {
    position: relative;
}
a.list-item-content__button.sqs-block-button-element:before {
    visibility: hidden;
}
a.list-item-content__button.sqs-block-button-element {
    color: transparent !important;
    background-color: transparent !important;
    border: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
.list-item-content__button-container {
    position: static !important;
    transform: unset !important;
}
.user-items-list-carousel__gutter {
    cursor: pointer !important;
}
.user-items-list-carousel__slide {
    user-select: unset !important;
    pointer-events: initial !important;
}

Let me know how it goes. 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
On 6/12/2024 at 5:55 PM, johnadewolf said:

Thanks, Tuanphan. Awesome, Great news. 

Here is the page: https://www.narrativeenvironments.ca/nes-projects

Is this what you need re: screen shots?

/John

Screenshot 2024-06-12 at 7.53.40 AM.png

Screenshot 2024-06-12 at 7.53.32 AM.png

Screenshot 2024-06-12 at 7.52.11 AM.png

You can use this code to Website Tools > Custom CSS

section[data-section-id="666064babe7e120fccfdad32"] {
li.list-item {
    position: relative;
}
.list-item-content__button-container {
    position: static;
}
.user-items-list-carousel .list-item-content__button-container a {
    position: absolute;
    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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.