Need help with my infinite scrolling carousel

Wonder if anyone can help. On my bosses website, I had a scrolling image of a collection of books (she's an author) at the bottom of the homepage. It's worked fine for the last 3 years. I have gone to replace the image with updated books (made on photoshop, as followed on the tutorial shown below) and now the image isn't appearing in the correct section at all. Nothing. The YouTube video I was following is posted below. My code is:
 

.slider {
width: 100%;
overflow: hidden;
}

.slider .slider-image {
background-image: url(https://static1.squarespace.com/static/63566299d6f0d711d59f53c7/t/6357a2a7d351b544eda38096/1666687668598/slider.png);
width: auto;
height 300px;
background-size: 2950px 250px;
animation: slide 60s linear infinite;
}

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

Can anyone see why It's all of a sudden not even showing my image of all the books. (Also linked below for you to see) I have tried altering all the different pixel amounts, still nothing. Image doesn't even show up.
Website is: www.joyellisbooks.com

Thanks to whoever takes their time out to reply to this. 
Is there an easier way now to maybe do this instead? Made the website back in 2021. 

You can try the following custom CSS

.sqs-block-code:has(.slider) * {
  height: 100%
}

.sqs-block-code .slider {
  width: 100%;
  overflow: hidden;
}

.sqs-block-code .slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/63566299d6f0d711d59f53c7/t/6357a2a7d351b544eda38096/1666687668598/slider.png);
  width: auto;
  height 300px;
  background-size: 2950px 250px;
  animation: slide 60s linear infinite;
}

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

My testing

On 6/25/2024 at 3:52 PM, Beyondspace said:

You can try the following custom CSS

.sqs-block-code:has(.slider) * {
  height: 100%
}

.sqs-block-code .slider {
  width: 100%;
  overflow: hidden;
}

.sqs-block-code .slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/63566299d6f0d711d59f53c7/t/6357a2a7d351b544eda38096/1666687668598/slider.png);
  width: auto;
  height 300px;
  background-size: 2950px 250px;
  animation: slide 60s linear infinite;
}

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

My testing

 

Thanks for responding. Just tried copy and pasting your code into the box, but nothings changed still/appeared where it should. (see photo below). Also the image thats appeared in your testing was the old outdated one. Wondering whether It's something to do with the new image I made?

 

On 6/27/2024 at 2:28 PM, lukes9244 said:

 

Thanks for responding. Just tried copy and pasting your code into the box, but nothings changed still/appeared where it should. (see photo below). Also the image thats appeared in your testing was the old outdated one. Wondering whether It's something to do with the new image I made?

 

Your CSS box has a syntax error so all (or some CSS) won't work properly.

Can you send code in Line 01 - Line 06? We can check easier.

On 6/29/2024 at 8:50 AM, tuanphan said:

Your CSS box has a syntax error so all (or some CSS) won't work properly.

Can you send code in Line 01 - Line 06? We can check easier.

Sorry for the late response, I have been out of office. The entire code is:
 

flex: 1 0 80%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}
.sqs-block-code:has(.slider) * {
  height: 100%
}

.sqs-block-code .slider {
  width: 100%;
  overflow: hidden;
}

.sqs-block-code .slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/63566299d6f0d711d59f53c7/t/667ace62fade1a71cf500f71/1719324259747/JE+WEB+-+Book+Carousel+2.png);
  width: auto;
  height: 300px;
  background-size: 2950px 250px;
  animation: slide 60s linear infinite;
}

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

Not sure what lines 01-06 are for. I made the website 2/3 years ago now.
Thanks

On 6/29/2024 at 8:50 AM, tuanphan said:

Your CSS box has a syntax error so all (or some CSS) won't work properly.

Can you send code in Line 01 - Line 06? We can check easier.

I don't know if the attached screen recording might show the issue I'm having with it not appearing, especially on the live site. 

On 7/2/2024 at 4:01 PM, lukes9244 said:

Sorry for the late response, I have been out of office. The entire code is:
 

flex: 1 0 80%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}
.sqs-block-code:has(.slider) * {
  height: 100%
}

.sqs-block-code .slider {
  width: 100%;
  overflow: hidden;
}

.sqs-block-code .slider .slider-image {
  background-image: url(https://static1.squarespace.com/static/63566299d6f0d711d59f53c7/t/667ace62fade1a71cf500f71/1719324259747/JE+WEB+-+Book+Carousel+2.png);
  width: auto;
  height: 300px;
  background-size: 2950px 250px;
  animation: slide 60s linear infinite;
}

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

Not sure what lines 01-06 are for. I made the website 2/3 years ago now.
Thanks

The code you shared is not enough information, please take screenshot/share full code you are using as @tuanphan asked above

CSS code format will be

ID {
	value1;
	value2;
	...
}

this code is invalid