Jump to content

Carousel with expanded content loaded below

Go to solution Solved by tuanphan,

Recommended Posts

Hi, I've searched through the forums but haven't found my answer. 

I'd like to have a carousel along the top of my portfolio page and when a photo or title is clicked it shows additional info and photos under the carousel, but the carousel remains at the top always to navigate between projects easily. 

I've demo'd this by using separate pages for each project and recreating the carousel on each project page, but I'm sure there's a better way to do it?

https://collie-helicon-pkhp.squarespace.com/work?p

Password: test123

Thanks,

Link to comment
  • Replies 6
  • Views 243
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

Hi,

I think we can achieve this. You can see this below thread first.

My idea is replace section contains button block with Carousel.

You can read thread first, If you want to continue, I can test and write new guide with Carousel.

 

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

Hot dam that's great!  I've got it integrated.  Thank you so much!

Only issue is that in certain instances (that seem random), when circling around the carousel, the link buttons wont work unless they are 1st and/or 2nd position of the carousel (starting from the left).

*Update - as I'm writing this, I've refreshed the page and this issue appears resolved.

 

Next, I'd like to play around with using the carousel image and/or title as the link button, and maybe even further identifying which project you're viewing by outlining the carousel image selected or fading the unselected images.

I think I can muddle my way through that, but if you have other posts that do these things or similar I would love to see them.

Thanks!

 

 

 

Link to comment
16 hours ago, Jamalama said:

Hot dam that's great!  I've got it integrated.  Thank you so much!

Only issue is that in certain instances (that seem random), when circling around the carousel, the link buttons wont work unless they are 1st and/or 2nd position of the carousel (starting from the left).

*Update - as I'm writing this, I've refreshed the page and this issue appears resolved.

 

Next, I'd like to play around with using the carousel image and/or title as the link button, and maybe even further identifying which project you're viewing by outlining the carousel image selected or fading the unselected images.

I think I can muddle my way through that, but if you have other posts that do these things or similar I would love to see them.

Thanks!

 

 

 

#1. You can share link to page where you use Carousel, I can give code to turn button link to image/title link

#2. In the code, you will see some code like this, these code to change Active Button Style, so you can share link to carousel, I will adjust ID for your case.

image.thumb.png.beb385c8d09a9cb5073f994b4e9317f6.png

image.png.f3c3b6477e69e608cb2369340f0010bf.png

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

Thanks, I'm going to keep the buttons for now.

That said, the issue I thought had gone away keeps coming back intermittently and I'm not sure if it's just something buggy with square-space or the actual code. 

- When rotating the carousel, the 1st and 2nd listed content items buttons will only work when they are in the 1st or 2nd position on the carousel (from the left).

- Then, when the above noted issue has gone away, a different issue appears where a selected button will sometimes "unselect" itself if the carousel is rotated in certain positions.  Again, not sure if it's just square-space being buggy.  

Same link and password if you have any ideas.

Thanks,

Link to comment
On 6/5/2024 at 4:56 AM, Jamalama said:

Hi, I've searched through the forums but haven't found my answer. 

I'd like to have a carousel along the top of my portfolio page and when a photo or title is clicked it shows additional info and photos under the carousel, but the carousel remains at the top always to navigate between projects easily. 

I've demo'd this by using separate pages for each project and recreating the carousel on each project page, but I'm sure there's a better way to do it?

https://collie-helicon-pkhp.squarespace.com/work?p

Password: test123

Thanks,

The url doesn't work. 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

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.