How to Make an Infinite Scrolling Carousel in Squarespace

[@AleenaMalik]

Great work around and made my client very happy! Thank you! For anyone looking for code: --------------------- .slider { width: 100%; overflow: hidden; } .slider .slider-image { background-image: url(); width: auto; height 200px; background-size: 2950px 200px; //adjusting background width - 2950px - helped with image distortion (my pic was way longer lol) animation: slide 60s linear infinite; } @keyframes slide { from {background-position-x: 0px; } to { background-position-x: -2950px; } }

[@CherryOnTopInvites]

3 years later and the video still helps a lot! I have a question however, What can i input if i want the gallery to come up bigger in my website? Thank you so much this made my life so much easier

[@samboyle6082]

Carl you're a wizard. This was exactly what a client was looking for! Thanks :)

[@dennishaserot628]

Carl, I am pushing 80 and have no code experience - but was able to follow this beginning to end. I now have a beautiful slider with law firm client icons parading across the screen. One thing - I had to set the video at 0.75 speed to stay with you. Thanks so much - love the sense of humor!

[@Carl_Johnson]

Fantastic! I know, I talk quickly 😆

[@darrennewbery]

Another great Squarespace tip with the usual good humour! Thanks Carl, you've once again provided a Squarespace tutorial that I'm sure will come in handy!

[@Carl_Johnson]

Thanks Darren!

[@ΓιαννηςΣυμεωνιδης-ν7γ]

you re absolutely insane my friend.Well done!Potentially the best squarespace content ! Keep it going.

[@bereal3485]

It’s so satisfying to follow along line by line and have it work. Thank you for this!

[@philippfranck8256]

Once again, amazing video and amazing intro soundtrack. Will definitely use this with the NCIS cast.

[@ZaynebShaikley]

This was amazingly helpful and clear! I've never coded in my life and was able to do this in a relatively short amount of time. THANK YOU SO MUCH!

[@Carl_Johnson]

Hey Zayneb! Glad it was easy enough for a non-coder to follow along with easily enough.

[@wearecraving]

beyond helpful mate!!! You've opened my eyes to the world of CSS

[@Carl_Johnson]

No probs Oliver! Glad it's helpful.

[@PointQuill-ip4pn]

WOW THIS IS INCEDIBLE! You friggen rock Carl!!! Thank you!

[@Gina-oi8eu]

Awesome tutorial! Thanks so much! As a little suggestion might be good if we could have the code ready to copy/paste in the description. I was being a bit slow and made a couple of typos initially so it took me a few proofreads to get it to animate. Awesome otherwise :)))

[@kayde_ie]

but then you won't watch the whole video ;P

[@rolandvandenhout]

You put a smile on my face mate! Awesome tutorial!

[@miola2083]

This video is educational and calming. Hope it works, trying now. Thanks.

[@dfactories]

MAN i've been looking for this for ages! so glad i stumbled upon your page

[@Carl_Johnson]

Glad I could help!

[@kayde_ie]

this guy makes me chuckle. very good, and very useful bit of information here, thanks a mill

[@Carl_Johnson]

Glad to help

[@jay_gps5278]

love everything about this. you rock, carl johnson

[@RosalindSmith-i3w]

OMG that was so good, thank you! I am not a proficient coder & this worked perfectly for me, thanks :)

[@ingridwlgp5829]

This video is really helpful. You helped me twice. Once with Photoshop which is totally new for me and once with Squarespace. Now our website has beautiful slider. Thanks Carl.

[@Carl_Johnson]

Glad it helped Ingrid!

[@kevincarvill6690]

Thanks so much Carl. I have been looking for an animated logo wall for ages.

[@Carl_Johnson]

Glad it helped Kevin!

[@dmak2425]

Great video, great experience watching and then implementing it for a website. Really want to see more Carl, love the channel!!

[@Carl_Johnson]

Thanks for your kind comments, David.

[@kylebianchi6756]

Thank you so much for putting this together!! I've been looking for something like this for a while.

[@Carl_Johnson]

No problem Kyle!

[@CharlieFollows]

Thank you so much for this video, life saver !

[@Carl_Johnson]

Glad it helped, Charlie!!

[@Nemo30044]

amazing tutorial, been redoing my website recently and your channel has been very inspirational, thanks Carl

[@kaansh86]

Absolutely brilliant, I used canva instead of photoshop, thanks for sharing!

[@Carl_Johnson]

Glad it helped!

[@HenOnWheels]

ACE! Nice and simple...Quite enjoyed having to type the code instead of a copy paste jobby!

[@stanleynowak9325]

Thanks, I love your attitude!

[@sherwinalegre4936]

GREAT TUTORIAL! THANKS A LOT!

[@cegc]

All your videos are awesome!!!!

[@Carl_Johnson]

Thanks Charlene 👍

[@creativealluredesign9525]

This is EXACTLY what I was looking for!!! You make it so easy! I do have a question....My scroll of logos plays and then stops and goes blank. It come back when I come back to the page but how do I make it automatically loop again without refreshing or coming back to the page?

[@ieulewis]

Have found this too! Did you ever solve the problem?

[@sashalouisleger]

Thanks for this great video! Any chance the mobile version can be edited to have the carousel smaller? It shows fine on the desktop version, but then the proportions are a bit off when everything else shrinks for the mobile version. Help?

[@zakkiyyashah6619]

Hi Carl, thanks so much for yet again another amazing tutorial! I did everything right but was wondering if it is possible to remove the padding on each end of the slider image? I added padding-left: 0px; padding-right: 0px; under background size but nothing has changed? Would really appreciate your advice! :) Thanks again for your amazing tips!!!

[@the_guidances]

Really useful staff thank you buddy ❤️

[@Konvalinka286325]

Really nice tutorial Carl, thanks so much for taking time to do these. Im designer messing around with Squarespace and your videos have been really clear and helpfull. Also Cows in party hats for the win!

[@Carl_Johnson]

No problem Shosh! Glad my videos are a help :)

[@lordlemond1350]

Great help. Is there a way to make the border "full bleed"?

[@m0f0uk]

section[data-section-id="YOUR-SECTION-ID-HERE"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; overflow: hidden; }

[@aidan775]

Fantastic thanks. Could it work with 500 images?

[@karlamaciel1906]

Thank you so much for the tutorial! Is it possible to make the image smaller? I tried changing the sizes but the image looks stretched.

[@JackbenchWoodworking]

This worked perfectly! Thank you so much!

[@Carl_Johnson]

Glad it helped!

[@sammicook3010]

Amazing tutorial I really needed this. Thank you

[@Carl_Johnson]

No problem Sammi!

[@JustSurfingAround]

Hi Carl, great feature 👌!!! just added it in. Is there a way to make this plugin full width? want to take away the padding on the sides. thanks buddy

[@19kruger99]

Mate what a effing legend 😂😂 Good content that gives a smile to ye face

[@Carl_Johnson]

Ha ha! Thanks!!

[@vishalbole3168]

Amazing tutorial!!👍

[@Carl_Johnson]

Thanks Vishal!

[@wellteazm]

Wow. Very smart! Thanks for sharing that. Greets from Switzerland 👍🏻

[@Carl_Johnson]

Thanks Stef 😀 I love Switzerland!! Really nice country you live in there.

[@wellteazm]

Carl Johnson Yes it is, although veery expensive to live in 😏 give me a 'shout' when u come next time and I'm more then happy to show you around the country side of Zürich 😜 cheers!

[@Carl_Johnson]

Definitely 👍

[@skyyy_dancer]

Great video, thank you.

[@king_nemuel]

This is awesome Carl :)

[@Carl_Johnson]

Thanks Nemuel!

[@TheH00kie]

Awesome as always 👍

[@Carl_Johnson]

Thanks Martin 👍

[@ohboyjohnnyboy]

Hi Carl, this tutorial is fantastic. Anyway to figure out how to have this infinite scroll span a web page without Squarespaces block margins and padding?

[@gawddy]

This was a great tutorial! Now i'm trying to figure out in I wanted to make an infinite scrolling vertical collage, is that possible? How would I adjust the code to do that? Any help you could provide would be much appreciated!

[@saltersevents]

Hey Carl. Great video. Thanks for sharing this. I'm having a little trouble getting my images to scroll though. Would you be able to help me please? Thanks, Robyn

[@emanuelepesa578]

Hey! Have you ever made a tutorial on how to make an image on hover while you pass your mouse on a link?

[@AiPreanksters]

My code window loos different doenst have the cancel or apply options, and followed all the steps but didnt work. =(

[@jennawenzlaff]

Hey Carl, thanks so much for this tutorial! Any advice on preventing loss of image quality when resizing them for the scrolling gallery? I've tried everything I can think of and my images still look a bit blurry!

[@samboyle6082]

Hey Carl this was working perfectly then all of a sudden stopped scrolling. I double checked the code and it's exactly how you have it. Any ideas why? (edit: I actually pasted the code into a few websites and none of them animate. so it's not just the original website)

[@SOFTBRUV]

This is amazing and worked beautiful, however anyway to decrease the size of the pics as they are quite large on my squarespace site. Thanks heaps!

[@Carl_Johnson]

Hi Rhys, probably the easiest way is to resize them on the canvas in Photoshop.

[@willpruitt8327]

Looks great Carl, working well for me! How can I reduce the height to 100px and keep the same resolution? I lose resolution when I try to make it shorter. Is there a magic number in the photoshop canvas size that I Should use?

[@eduardopaolini5256]

You are the best thank you so much

[@Carl_Johnson]

Thanks Eduardo! You're welcome!

[@nvemedia4989]

Carl, I cannot say thank you enough for this video! The slider worked beautifully and I have zero knowledge on coding. Although, I'm wondering if you have any instructions on how to adjust the logo slider in mobile view? The slider looks great on desktop but it's a bit large when switching to mobile. Any advice would be amazing! Thanks again.

[@Carl_Johnson]

Glad it helped! I've just sent you an email.

[@alestevez950]

@@Carl_Johnson Hi Carl! Mind shooting me the same message? Could use it! Thanks in advance!

[@arnauestebanmarquez2148]

@@Carl_Johnson Hi Carl! Could you send the same email to me? For adjusting to the mobile view. Thanks your video is great!

[@Thursting]

Hi Carl, Great video mate, find your channel really useful. I want to implement this feature but I have 20-30 image logos I want to use. If I make a really long horizontal image with all the logos will this still work fine on the website?

[@AleenaMalik]

Hey, this is a bit late lol but yes it'll work! Just adjust the background size accordingly 🙌🏼

[@DebbieHeltzer]

Hi Carl, this was EXTREMELY helpful for me...the only thing I can't figure out is, when the scroll gets to the end of the image, there is a delay in which the screen is blank for 5-10 seconds. Then it starts scrolling again. Everything else is perfect. What am I doing wrong?

[@cjfozter]

@carl amazing, as ever - Quick question tho: If I wanted 2 carousels one on top of the other, but each moving in the opposite direction... how would I do that? I have them in, but they respond to the last keyframe and so go in the same direction. Any way to get around this?

[@jakemp42]

I know your ccomment is old, but for others who might need to do this. I was able to do it by changing "slide" to "slide2" for the second block of images.

[@emilycameron6800]

Hi Carl, this was my first time coding, and I found it very easy to follow along. Also made more enjoyable with a bit of sense of humour added in :) Just wondering - is there a way to change the direction of the scrolling? Thanks.

[@emilycameron6800]

Just re-watching your video. My carousel goes the opposite direction from yours

[@Carl_Johnson]

Hi Emily! It sounds like your keyframes in the CSS. Do you have the background position set to 2950px instead of -2950px? If you change that it should reverse the direction.

[@lorenzomohammed208]

Great video! I want to add a fade effect to the ends. Anyone have any tips?

[@Carl_Johnson]

There will be Lorenzo. I'm working on one now for a client ...I'll let you know.

[@lorenzomohammed208]

@@Carl_Johnson I tried using a marquee tag instead and using a transparent gradient but i wasnt getting a nice clean output.

[@TATONKA-THE-ETERNAL]

thank you

[@devbkada]

Fire!! thanks

[@Carl_Johnson]

No problem!!

[@kimstrebelks]

Hi Carl Is it also possible to create a carousel with products from the shop page on the home page? Best K.

[@jonathanplass2030]

Hi Carl, Thank you so much for the tutorial. I was wondering if it was possible to make this slider full bleed so that the site margin does not interfear with the content so that you don't have the image cutting itself off before the edge of the page. Any help would be so greatly appreciated and thanks again for the tutorial.

[@Carl_Johnson]

Hi Jonathan, no problem! I haven't had a chance to find a 100% responsive way of making it full bleed yet.

[@m0f0uk]

section[data-section-id="YOUR-SECTION-ID-HERE"] .content-wrapper { padding-left: 0 !important; padding-right: 0 !important; max-width: 100%; overflow: hidden; }

[@kevinc754]

Hi Carl, Do you have any tips for how I can make it scroll vertically instead of horizontally?

[@ChefSachinMistry]

Really helpful video! quick question which FX overlay do you use for your subscribe animation for your videos? Look really clean

[@Carl_Johnson]

Thanks! The subscribe animation was part of an After Effects pack from Envato Elements, but I can't remember which one elements.envato.com/video-templates/youtube

[@ChefSachinMistry]

Carl Johnson thank you!

[@nigelstefani]

CARL! Your tutorials are the best - I really would like to know one thing however - if it's possible to edit the 'LOG IN' box for when subscribers sign into their account? At the moment it's simply the name and line about the website - its in so normal css wont work - any suggestions? Ability to add a logo for instance? Thanks a lot champ!

[@Carl_Johnson]

Hey Nigel, thanks for the positive feedback!! Can you send me the link to your site please, and I'll have a look?

[@nigelstefani]

@@Carl_Johnson its a trial site at the moment so I can email you the deets?

[@nigelstefani]

@@Carl_Johnson love to hear from you champ!

[@shharine]

Hey Carl, thanks so much for this! I keep getting an syntax error when I get to line six, has anyone else shared this roadbump with you?

[@Carl_Johnson]

Hi Sharine, could you share the code exactly as you’ve put it in to Squarespace please?

[@indivisualdesign6578]

This worked great!!!! However, yesterday, it suddenly stopped working on Firefox. It continues to work fine on Chrome. I didn't change the element at all. Any ideas why that might be?

[@briohn]

Hello Carl, how do I enlarge the carousel?

[@oakey_after_berth7204]

Hey Carl! Wondering if this would be possible to use but scrolling vertically in a page on Squarespace? Also are there any other options to input other than 'linear'?

[@indivisualdesign6578]

Worked fine when I set it up a few weeks ago. Now it's not working on any of my browsers (Chrome, Safari, and Firefox). I didn't change any of the code or elements since it was working. Any idea why this might be?

[@shikanda]

is there anyway to do this with a row of product blocks?

[@Raptormanwizard]

Good Stuff!

[@michaelkleinespel5719]

I would like to see examples of this thing live.

[@Carl_Johnson]

I recently put it into this site (3 on the homepage) www.7futures.com

[@scottillingworth-harrison8770]

Hi Carl, (I posted a comment yesterday but it seems to have disappeared) so here goes again, loving your work, your tutorials are spot on, accurate and some of the best I have seen so kudos to you mate. Now I may be a complete div, but I'm just not getting the same results in a Squarespace 7.1 site... My starting image from PS was a little different, but I accounted for this in the CSS.. but still, I get zero movement (left or right) and it shows just 2.3 images in the plank at once. So I am obviously doing something wrong... could you help? Coffee will certainly be in me! I haven't posted the CSS as not sure if it was that which stopped my comment, so ill hang fire until I hear from ya, fingers crossed lol Cheers S 👍🏼

[@Carl_Johnson]

Hi Scott, I'm not sure where your comment went! If you contact me at the email address in the about tab on my channel, or through my site (carljohnson.space) I'll have a look!

[@anaseljamal7105]

wish u can put the code so we can copy paste it

[@carymiller883]

Hi Carl, thanks for this great tutorial! I would like to code this carousel into multiple pages on my SS site. I am using SS 7.1. Do you know how I label each page in CSS to then insert the code from your tutorial? I believe that 7.1 uses data collection id's... I've copied my data collection id into the CSS and then entered in your code, but it doesn't seem to be working. Any pointers on how to do this on multiple pages? Thanks

[@Carl_Johnson]

Hi Cary, probably the easiest way to do it would be to wrap the CSS in style tags and place it in the Page Header Code Injection of the pages where you want to display the carousel. Like so: CSS HERE

[@carymiller883]

@@Carl_Johnson thank you!

[@mhproduction461]

really useful video, i feel like i have copied everything i just can not seem to get the image to scroll.

[@mhproduction461]

ignore me i missed a semi colon

[@Carl_Johnson]

Glad you got it sorted!

[@p3arworld]

I have triple checked this code & I just absolutely can't get it to work on my website. Can anyone help? I have no errors on the code, but it won't show up on the page.

[@Carl_Johnson]

Hi Perri! Could you share the code as you've put it in to Squarespace please?

[@p3arworld]

@@Carl_Johnson thank you!! .slider { width: 100%; overflow: hidden; } .slider .slider-image { background-image: url(static1.squarespace.com/static/5f56aa0c26f2702f54dd8f5c/t/5f9b0c1e4b9fdf5da3b39456/1603996702470/Marquee+Social+.png) ; width: auto; height: 300px; background-size: 2950px 200px; animation: slide 10s linear infinite; } @keyframes slide { from {background-position-x: 0px;} to {background-position-x: -2950px;}

[@samdavies338]

@@p3arworld I've got the same problem; did you get it to work?

[@thinklila3922]

@@samdavies338 i can't get it to work, have you managed to?

[@vishalbole3168]

I have another query regarding Squarespace: How can I add the page to the popup in Squarespace? If yes please guide me. or there are any plugins for this popup.

[@Carl_Johnson]

A lightbox like this might be your best bet www.sqspthemes.com/plugins/ultimate-squarespace-lightbox-plugin

[@vishalbole3168]

@@Carl_Johnson Thank you so much for your support!!👍

[@JustSurfingAround]

Hi Carl, thank you for this video. The code was working for the past month. Unfortunately the code no longer works in Squarespace. Would you be kind to assist? Many thanks

[@Carl_Johnson]

Hi Ray, do you have any code in the site that could be conflicting with this? Feel free to email me at the email address in the about tab on my channel and I'll take a look for you.

[@JustSurfingAround]

@@Carl_Johnson hi Carl, thank you for getting back to me so quick. Very odd behaviour - it wasnt working even though I removed all the coding from the site. So I made another site for testing, placed your code and it was working fine. The only way around this to work was to copy and paste code over to a another site then to copy and paste it back from the test site. This worked after hours of investigating, very odd behaviour how the code working by copying code over from another site. Any explanation for this? May be a Squarespace error?

[@vandersallcollective2121]

Hey Carl! Have you tested this on Android devices? Or do you have a demo page for this that I can test?

[@Carl_Johnson]

Have you tried Firefox Responsive Design Mode? You can simulate it running through all different devices developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode

[@vandersallcollective2121]

@@Carl_Johnson Yes, and I've tested in Blisk, another great tool. However, the issue only shows on ACTUAL Android devices. Check it out!

[@madelinenicole8002]

This isn't working for my website and I've tried EVERYTHING. Help :( I've repeated this process 5 times .

[@JustSurfingAround]

Hi Carl, hope this msg finds you well. Would you be kind to do a video based on TEXT SCROLLING? You have done a video based on the image slider using an image. Be cool to have the TEXT itself scroll 👌

[@Carl_Johnson]

Hi Ray! Thanks for the suggestion, I'll definitely look into that.

[@JustSurfingAround]

@@Carl_Johnson thanks Carl, hope you are well and safe

[@mhamza3495]

Hi Carl, Any idea how can I make slider like this (www.apple.com/tv/) on Squarespace ?

[@michaelcollins2351]

Is it possible to make the carousel go vertically so the text comes up from the bottom

[@Carl_Johnson]

Yes, you'd have to email me about that one though.

[@Rinacks]

didn't work for me ): i followed all the steps and nothing

[@michaelcollins2351]

Thanks Carl - what email do I use?

[@Carl_Johnson]

You can get me here, Michael - www.carljohnson.space/contact

[@wearesilk.6569]

Hey Carl... Again, thank you for your great content. I´ve found your pen "Demo for Josef" and wondering if you could use this for squarespace? Maybe you found some time to answer me :-) Have a nice day and all the best. Sarah

[@Carl_Johnson]

Hi Sarah, Sure. Put this in a Code Block on your page: Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. You can change the text between the tags. Then put this in your CSS (Design > Custom CSS) .txt-hover { cursor: cell; text-align: center; } .txt-hover span { transition: color 3s; transition-delay: 1s; } .txt-hover span:hover { transition: color 0s; } .txt-hover span:nth-child(1n):hover { color: #9875E0; } .txt-hover span:nth-child(2n):hover { color: #53FBDD; } .txt-hover span:nth-child(3n):hover { color: #00A4DD; } Then add this to your site-wide code injection footer (Settings > Advanced > Code Injection > Footer) function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr) } function makeSpans (selector) { var _document$querySelect = document.querySelectorAll(selector) var _document$querySelect2 = _toArray(_document$querySelect) var elements = _document$querySelect2.slice(0) return elements.map(function (element) { var text = element.innerText.split('') var spans = text.map(function (letter) { return '' + letter + '' }).join('') return element.innerHTML = spans }) } makeSpans('h1')

[@wearesilk.6569]

@@Carl_Johnson oh tank you so much! this is awesome

[@whitter86]

could you do this with amazon affiliate links?

[@Carl_Johnson]

Hi. It wouldn't work linking through to individual products on Amazon, but you could link to a general affiliate page ...if Amazon do those.

[@kingkwekuanansephotography]

Plsss help!!! hello thanks for an amazing video. unfortunately i have followed the video several times, everything is ok except that it is not sliding. Plsssssss help!!

[@Carl_Johnson]

Sure, can you share the code you’ve put in please?

[@anda_]

@@Carl_Johnson Not the guy who commented, but I'm having the same problem. in the custom CSS i have: .slider{ width: 100%; overflow: hidden; } .slider .slider-image{ background-image: url(static1.squarespace.com/static/5f345748bd1ae54e6787471a/t/5f349b2d01cfd1458993ecc1/1597283124910/about-2.png); width: auto; height: 200px; background-size: 2950px 200px; animation: slider 60s linear infinite; } @keyframes slide { from {background-position-x; 0px;} to {background-position-x; -2950px;} }

[@anda_]

for reference, it's telling me there's a syntax error on line 15 ( from {background-position-x; 0px;} )

[@vishalbole3168]

Hi, Can you help me, please? How to call JSON file into Squarespace?

[@Carl_Johnson]

Hi Vishal! You can't upload JSON files to Squarespace, but you can use GitHub ...this might help kzbin.info/www/bejne/bYvQm3quocd7g9E or this for Lottie animations in Squarespace kzbin.info/www/bejne/o2TWo4CVl7Jmh6M

[@vishalbole3168]

@@Carl_Johnson Hi, Thanks for your Support. Can you tell me, Where I put my JSON link in Squarespace website? and how can I access the JSON file in ajax request?

[@thinklila3922]

Code doesn't seem to be working - any ideas?

[@Carl_Johnson]

Hi Lila! Can you share the code exactly as you've put it into Squarespace, please? Should be able to help you out then.

[@anacastro4203]

Here is the code, took me a while to write so i hope this can save some time for somebody else: then in css: .slider{width:100%; overflow: hidden;} .slider .slider-image {background-image: url( YOUR OWN LINK ); width:auto; height:200px; background-size:2950px 200px; animation: slide 60s linear infinite;} @keyframes slide { from {background-position-x: opx;} to {background-position-x:-2950px;} } tHIS DID NOT WORK FOR ME THO xd if someone knows why pls let me know!

[@hannachristerson]

I know this is late, but in case you still wanted to use this there was a typo in your HTML, here is the correct one: Also in the CSS keyframes section, the background-position-x would be 0px, I think you might have types an "o"

[@torycooper7459]

Hey Carl, first off thank you for the tips! Secondly, I'm trying to add a client logo loop to my page and I followed your tutorial with no error warnings and the png won't show up. Any advice? I'll add my code below. .slider { width: 100% overflow: hidden; } .slider .slider-image { backgroung-image: url(static1.squarespace.com/static/5d47ba46196dbb0001850e6c/t/5ff381de18d44937a942a168/1609794015358/Commercial-Scroll.png); width: auto; height: 288px; background-size: 8192px 288px; aniamtion: slide 60s linear infinite; } @keyframes slide { from {background-position-x: 0px;} to {background-position-x: -8192px;} }

[@marclu16]

Thanks Carl, all your videos are super helpful! I noticed some comments about going full bleed as I too was hoping to make mine full bleed. I had some help and here's what we changed to solve full bleed on desktop but it still looks like there's a little padding on the left side for mobile. Any thoughts on if my edit is ok and ways to make mobile full bleed as well? //Infinite Slider section[data-section-id='60076b06243b5a469687c535'] .content-wrapper { max-width: none; } .slider { width: 100vw; overflow: hidden; margin-left: -4vw; margin-right: -4vw; position: relative; } .slider .slider-image { background-image: url(static1.squarespace.com/static/5ff494b9931735466ce28d5b/t/60076b798ee63d1170a552e2/1611099002115/LoremIpsum_LogoSlider.png); width: auto; height: 200px; background-size: 2950px 200px; animation: slide 80s linear infinite; } @keyframes slide{ from {background-position-x: 0px;} to {background-position-x: -2950px;} }

[@Carl_Johnson]

Hi Marc, I haven't had chance to check yet ...will do at some point this week.

[@nadiabeerepoot8753]

Hey Marc, did you manage to sort this out? I applied the coding you have here *swapped with my own links* and found it only went all the way to the right side of the web but the left was still cut short - so not quite full bleed. If you have any updates I'd love to know :-)

[@garyjohnston2777]

Awesome Tutorial