Video Carousel in 7.1?

Hi Everyone,

From everything I've been reading, it sounds like SquareSpace removed the ability to create a carousel style gallery of videos in 7.1.  I'm looking for a way that doesn't require CSS to do this, since I plan to subscribe to the basic personal plan.  It seems odd they would REMOVE a feature with the latest engine, but if there's not an easy workaround I'll probably just look elsewhere for my website hosting.  Thanks!

Hi,

Carousel like this video?

https://www.loom.com/share/1445342a85374da6878efa61cc8aa255

@mgvfx This is very frustrating, if you find a workaround I would really appreciate it. Trying to add client logo as a scrolling marque - but the scrolling feature doesn't allow you to add images... what a waste, as it would have solved the issue. 

@tuanphan any other suggestions? This doesn't work. 

On 12/9/2022 at 12:49 AM, T33 said:

@mgvfx This is very frustrating, if you find a workaround I would really appreciate it. Trying to add client logo as a scrolling marque - but the scrolling feature doesn't allow you to add images... what a waste, as it would have solved the issue. 

 

@tuanphan any other suggestions? This doesn't work. 

Scrolling like this? (auto scroll)

You can use a gallery block and upload the video URL there via Vimeo or YouTube. Here's an article detailing how to do it: https://www.bycrawford.com/blog/uploading-videos-to-a-squarespace-gallery

Only thing is with 7.1, you may need the lazy summaries plugin from Square Websites to make this happen if Squarespace has removed the video upload feature.

1 hour ago, bycrawford said:

You can use a gallery block

Except that the 7.1 Gallery Block is not generally available. It is only available to Circle members.

27 minutes ago, paul2009 said:

Except that the 7.1 Gallery Block is not generally available. It is only available to Circle members.

That's why I said this...

"Only thing is with 7.1, you may need the lazy summaries plugin from Square Websites to make this happen if Squarespace has removed the video upload feature."

Hey yall - i was so annoyed by this that i wrote some code for video carousels - this one has a click & drag to scroll function. 

 

<div class="video-carousel-container" id="videoCarouselContainer">
  <div class="video-carousel-wrapper">

    <!-- Add your video elements here -->

    <div class="video-item"><video controls><source src="VIDEO_SOURCE_1.mp4" type="video/mp4"></video></div>

    <!-- Add more videos as needed -->

  </div>
</div>

<style>
  .video-carousel-container {
    position: relative;
    max-width: 100%;
    overflow: hidden; /* Hide overflowed part */
  }

  .video-carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease;
  }

  .video-item {
    box-sizing: border-box;
    padding: 10px; /* Adjust the spacing between videos */
    flex: 0 0 auto; /* Do not grow and shrink, but allow basis to be auto */
  }

  .video-item video {
    width: 80%; /* Adjust video width to fit the container */
    aspect-ratio: 9 / 16; /* This sets the video to a 9:16 ratio */
    border-radius: 15px; /* Rounded corners for the video */
    overflow: hidden; /* Ensures the video doesn't overflow the rounded corners */
  }
</style>
<script>
let isDragging = false;
let startPos = 0;
let initialPos = 0;

const wrapper = document.querySelector('.video-carousel-wrapper');

wrapper.addEventListener('mousedown', (e) => {
  isDragging = true;
  startPos = e.pageX;
  initialPos = wrapper.style.transform.replace('translateX(', '').replace('%)', '') || 0;
  initialPos = parseInt(initialPos, 10);
  
  // Prevents the default dragging behavior of images/videos
  wrapper.querySelectorAll('video').forEach(video => {
    video.addEventListener('dragstart', (e) => e.preventDefault());
  });
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const currentPos = e.pageX;
  const diff = currentPos - startPos;
  
  const transformValue = initialPos + (diff / wrapper.offsetWidth) * 100;
  wrapper.style.transform = `translateX(${transformValue}%)`;
});

document.addEventListener('mouseup', () => {
  if (!isDragging) return;
  isDragging = false;
});

document.addEventListener('mouseleave', () => {
  if (!isDragging) return;
  isDragging = false;
});
</script>

Try Classic Gallery block to bypass the limit and add Gallery blocks to your 7.1 sections, detail here

https://beyondspace-showcase.squarespace.com/classic-gallery-block

On 12/7/2022 at 10:17 AM, tuanphan said:

Hi,

Carousel like this video?

https://www.loom.com/share/1445342a85374da6878efa61cc8aa255

as always tuanphan saving the day. that little plus sign hidden in the gallery "upload media" area is sneaky. i absolutely missed it & would only have found it from your loom video. huge thanks!