AdamSupra

Amazing. thank you!

OK, so after fixing some other code, I did get one of the two banners to slightly do as I wanted, but the one that is scrolling the right way on the top seems squished together and also doesn't repeat indefinitely....

OK, Awesome, that fixed the hover of the menu items. Thank you for that! But the hover over image opacity still isn't working as before. See anything that may have messed that up trying to figure out the banner thing in my other thread?

Yes, exactly.

Still not working the way I had hoped. I have it there and it changes every 1 sec or whatever but I don't want it to do that, I want it to just smoothly move continuously. I also tried another way I found using code both in the blank space above it now and in CSS using a banner image I made myself but that doesn't seem to be showing either. so no clue at this point.

Totally possible. I've changed so much trying to get that banner to work the way I want without resolution yet. /* Nav item color */ .header-nav-item a { color: hsl(11, 0%, 50%) !important; } /* Nav item hover color */ .header-nav-item a:hover { color: hsl(0, 0%, 0%) !important; } /* Nav item active color */ .header-nav-item--active a { color: hsl(0, 0%, 0%) !important; } .header-actions-action.header-actions-action--social a:hover svg { fill: black !important; } .form-wrapper .field-list .field { position: relative; margin: -10px 0px 15px; } .sqs-block-content hr { margin-top: -25px !important; } .sqs-block-horizontalrule { margin-bottom: -35px !important; } .header-layout-nav-center .header-nav { flex: 40% !important; width: 60% !important; } @media screen and (min-width: 990px){ .header-layout-branding-center-nav-center .header-title-nav-wrapper { flex: 0 0 100%;} /* remove current icon */ .header-actions-action--social a:last-child svg { display: none; } /* set new icon */ .header-actions-action--social a:last-child { background-image: url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/5ea5ff06cffe7b1a439472bc/1587937035935/lock-logo-test.png?format=300w); background-size: contain; background-repeat: no-repeat; background-position: center center; } .figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before { background-color: rgba(255,255,255,.3); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .8s ease } .figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before { opacity: 1; transition: all 330ms ease } .gallery-reel-wrapper { overflow: hidden; } /* list height */ div.user-items-list { padding-top: 0px !important; padding-bottom: 0px !important; } #page { overflow-x: hidden } .gallery-grid-wrapper { display:flex !important; animation: slideshow 50s inear infinite } .gallery-grid-wrapper .gallery-grid-item { min-width: 15%; margin-right: 1% } @keyframes slideshow { 0% { left: 0; } 100% { left: -550% } } .slider { width: 100%; overflow: hidden; } .slider .slider-image { background-image: url(https://static1.squarespace.com/static/5e48bac3e8cf6318cdae0fb7/t/65e6b16bba5e27001936631d/1709617516018/CLIENT+LOGO+BANNER.png); width: auto; height: 200px; background-size: 2950px 200px; animation: slide 60s linear infinite; } @keyframes slide { from {background-position-x: 0px;} to {background-position-x: -2950px;} } @media screen and (max-width:767px) { .user-items-list-item-containersection[data-section-id="65dac7c9f3365648bc920997"] ul { grid-template-columns: repeat(2,1fr) !important; }

Wesite: https://www.adamhyattphotography.com/ So all of my hover coding on my site stopped working today while messing with trying to get a carousel to smoothly autoscroll. My menu nav use to change to being darker and so did my social icons. Then also my images on hover would change opacity. Code I had that worked just fine up until today... /* Nav item color */ .header-nav-item a { color: hsl(11, 0%, 50%) !important; } /* Nav item hover color */ .header-nav-item a:hover { color: hsl(0, 0%, 0%) !important; } /* Nav item active color */ .header-nav-item--active a { color: hsl(0, 0%, 0%) !important; } .header-actions-action.header-actions-action--social a:hover svg { fill: black !important; } Code for images.. figure.gallery-masonry-item .gallery-masonry-item-wrapper a:before { background-color: rgba(255,255,255,.3); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .8s ease } figure.gallery-masonry-item:hover .gallery-masonry-item-wrapper a:before { opacity: 1; transition: all 330ms ease } Did some other code on the page mess with it. I've tried a million different things to get my client logos to work the way I want with no solution, so wondering if something interfered.

i just came across this thread and tried this code as well and doesn't seem to work, but essentially trying to do the same thing https://forum.squarespace.com/topic/250400-scrolling-carousel-for-clients-showcase/

Had to erase some of the codes to try different things as I thought some might be interfering with each other... still can't seem to get any of it to work how I want. Also the editor just seems to take FOREVER now and is making it almost impossible to edit anything.

Actually looks like maybe I can do it a different way with a gallery of images.... but the logos don't fully show... Added that right underneath scrolling to show difference.

OK.... so I got everything working for the most part. Thanks. I'm curious if its possible to get the auto scrolling to just be one smooth motion and not jittery from image to image. As well as make the arrows disappear. Basically just a smooth auto scrolling banner that is not interactable.

So taking away the black space above and below the red lines here I added... again just making that thinner as apposed to how thick it is. And then just making the carousel a continuous scrolling image if possible. (even without the arrows if even more possible) Or if there is another/better way on the site to do this...

basically just want it to be thinner. Like a code that can let me adjust the height on top and bottom. And then of course the auto scrolling continuously.

Website: https://www.adamhyattphotography.com/ I have a carousel section I just added towards the bottom of my homepage with Brand logos in it. I would love to adjust the black background padding to be just larger than the logo space and in otherwards make it a lot thinner. As well as have the carousel just constantly scrolling. Thank you!

It wasn't working how I wanted any other ways, so I added it in the media section of the Page settings (only allowed through a url of course. But now the padding is all off, and if I change the padding for that then it changes for all pages. Also, in mobile view crops differently. Or if you adjust the browser size on PC it just changes everything. Tablet View also looks horrible for many things. Don't understand why everything doesn't adjust properly for sizing.