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

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.

You can enable button, then share link to page in screenshot, we can give code turn button link to image link + Make button invisible then.

Thanks, Tuanphan. Awesome, Great news. 

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

Is this what you need re: screen shots?

/John

@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. 

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

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;
}}

Thanks, @tuanphan, the code works for the first row, but not the second row (another portfolio.).

@Lesum The code turned off the buttons, but the click-thrpugh was not activated.

@tuanphan do I repeat the code for the second carousel? DOes your code refer to theis ID: 

section[data-section-id="666064babe7e120fccfdad32"]

If so, how do I find the data-section-id for the other?

3 hours ago, johnadewolf said:

how do I find the data-section-id for the other?

Check out Heather Tovey's most excellent looking Squarespace ID Finder.