Jump to content

dsunnock

Circle Member
  • Posts

    7
  • Joined

  • Last visited

Posts posted by dsunnock

  1. What I'm trying to do is make a infinite scrolling photo carousel with one photo on top that doesn't move. I need it to look good on mobile and desktop but for some reason it keeps cutting off my photos or repeating it in rows.

     

    Bonus points if someone knows how to do this and make it autoscroll: 

    image.png.f2e2bbb83d53bbf52bf032c49e9fae69.png

     

    I used this tut to make the scrolling effect: 

    https://www.youtube.com/watch?v=xsq_c8vaIs0

    The reason I used this instead of a gallery block or gallery section is that I wanted a "main photo" and more options for H1 and so on.

     

    My website:

    https://marlin-springtail-2kjm.squarespace.com/home-mobile#4

    PW: hello

    My CSS:

    // FULL WIDTH SECTION

    section[data-section-id="667472b2cde3e96be6fef43c"] {
    overflow-x: hidden !important;
    overflow-y:hidden !important;
    }

    section[data-section-id="667472b2cde3e96be6fef43c"] {
    .content-wrapper  {
      padding: 0px !important;
      margin: 0px auto;
      display: contents;
      }
    .sqs-layout .sqs-row .sqs-block {
      padding-bottom: 0px !important;
      padding-top: 0px !important;
    }
    }

    .slider .slider-image {
      background-image: url(https://static1.squarespace.com/static/6656326cb5e8fe4f069d15a8/t/6678524a407be66f5c78039f/1719161419904/Background.png);
      opacity: 0.5;
      height: 300px;
      background-size: auto;
      animation: slide 150s linear infinite;
        }

    @keyframes slide {
      from {background-position-x: 2234px;}
      to {background-position-x: 0px;}
    }

    Screenshot 2024-06-24 at 8.08.59 AM.png

  2. I'm trying to make the image cards on my website look like the image cards on my figma file.

    PW: victory

     

     

    Current CSS code

    // Auto Carousel List - Card Border Radius //
    .user-items-list-carousel .list-item { 
      border: 2px solid #eee;
      border-radius: 20px !important;
    }
    
    
    /* Hide controls on native video player */
    .video-player .plyr .plyr__controls {
      display: none;
    }
    
    // Rounded corner on Video Player  //
    .video-player .plyr video {
        object-fit: cover !important;
        border-radius: 20px !important;
    }
    
    // Rounded corner on image blocks  //
    .user-items-list-carousel .list-item img {
      border-radius: 20px !important;
    }
    
    
    // Vertical Video Player  //
    .sqs-native-video .native-video-player {
        padding-bottom: 80% !important;
    }
    
    #block-yui_3_17_2_1_1716925040398_5141.video-block .video-player{
      padding-bottom: 120%;
      border-radius: 20px !important;
    }
    
    // Scroller Cards  //
    section[data-section-id="665720dceda419650c4267d7"] {
      --item-width: 270px;
      --additional-offset: 0px;
    
      .user-items-list-carousel__gutter {
        padding-left:0px !important;
        padding-right:0px !important;
      }
      .user-items-list-carousel__slides {
        overflow-x:scroll;
        grid-template-columns:unset !important;
        grid-auto-columns:var(--item-width);
        cursor: auto;
        padding-left:~'calc(var(--offset-left) + var(--additional-offset))';
        -ms-overflow-style: none;
        scrollbar-width: none;
      }
      .user-items-list-carousel__slides::-webkit-scrollbar {
        display: none;
      }
    
      .list-item {
        transform: unset !important;
        grid-row: 1;
        grid-column: unset;
        pointer-events:unset;
        user-select: unset;
        cursor: auto;
      }
      .desktop-arrows, .desktop-arrows{
        display: none !important;
      }
    }
    
    [class*="mobile-arrow"] {
    	display: none !important;
    }

     

    IMG_4169.PNG

    Screenshot 2024-05-30 at 3.27.05 PM.png

×
×
  • 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.