# CSS Carousel won't work when transferring from React to Hubspot

**URL:** <https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [November 11, 2022, 2:03pm UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103 "2022-11-11T14:03:06Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![fordburgess](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fordburgess](https://community.hubspot.com/u/fordburgess)\
**Post date:** [November 11, 2022, 2:03pm UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103/1 "2022-11-11T14:03:06Z")

</div>

Hello, I’d like to have module that is an autoplaying carousel with all the logos of my company’s clients that I can use in multiple different places on our site. I have used this exact code with styled components in a React application for another one of our websites, and it works perfectly. However, it does not work when I test it in the Design Manager Preview. Here is the CSS in question:

```lia-code-sample
 @keyframes slide {
 0% { transform: translateX(0); };
 100% { transform: translateX(calc(-250px * 7)); }
}
.slideContainer {
 height: 150px;
 margin: auto;
 overflow: hidden;
 position: relative;
 width: 100vw;
}
.slideContainer::before, .slideContainer::after {
 content: "";
 height: 150px;
 position: absolute;
 width: 20%;
 z-index: 2;
 background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}
.slideContainer::after {
 right: 0;
 top: 0;
 transform: rotateZ(180deg);
}
.slideContainer::before {
 top: 0;
 left: 0;
}
.slider {
 animation-name: slide;
 animation-duration: 30s;
 animation-iteration-count: linear infinite;
 display: flex;
 width: calc(250px * 14); 
}
.logo {
 height: 160px;
 width: 160px;
 margin: 0 30px 0 30px;
 background-color: pink;
}

```

And here is the HTML in question:

```lia-code-sample
<link href="module.css" rel="stylesheet">
<div class="slideContainer">
 <div class="slider">
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 <div class="logo"></div>
 </div>
</div>

```

I wish I could report that I’ve tried many solutions, but I don’t really know what to do since this works perfectly on my other site. The only difference between my code on Hubspot and the other site is that I added the animation duration and iteration properties, instead of just having those under the animation property. Thanks in advance for your help.

---

<div class="post-metadata">

**Author:** ![BarryGrennan](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/barrygrennan/32/97794_2.png) [@BarryGrennan](https://community.hubspot.com/u/BarryGrennan)\
**Post date:** [November 11, 2022, 7:47pm UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103/2 "2022-11-11T19:47:22Z")

</div>

I imagine you’re missing something (probalby from the css?). It doesn’t seem to work in [this jsfiddle](https://jsfiddle.net/seoanseoireland/d0936yj7/2/) either

* * *

 ![profile2022a.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7273a34ccfe3489fceebc8a36eca751481b59531.jpeg)

**Barry Grennan**

[Freelance HubSpot CMS Developer](https://www.seoanseo.ca?utm_source=HubSpotCommunity)

[Website](https://www.seoanseo.ca?utm_source=HubSpotCommunity) | [Contact](https://www.seoanseo.ca/#contact?utm_source=HubSpotCommunity) | [LinkedIn](https://www.linkedin.com/in/barrygrennan)

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [November 11, 2022, 10:12pm UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103/3 "2022-11-11T22:12:32Z")

</div>

There’s an errant colon in the middle of your keyframe, after the 0% end bracket. Remove that and it should work.

Also “linear infinite” is not a valid property value for animation-iteration-count. Should be:

```lia-code-sample
animation-iteration-count: infinite;
animation-timing-function: linear;

```

---

<div class="post-metadata">

**Author:** ![fordburgess](https://avatars.discourse-cdn.com/v4/letter/f/b5a626/32.png) [@fordburgess](https://community.hubspot.com/u/fordburgess)\
**Post date:** [November 13, 2022, 3:16pm UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103/4 "2022-11-13T15:16:58Z")

</div>

Hi @alyssamwilie, thank you for the response. What you have suggested are good practices for maintaining clean code, but what made this work for me, strangely enough, was deleting the “0% { transform: translateX(0) };” property from my keyframes animation. I don’t know why this worked, but the errant commas “linear infinite” property do not seem to have affected the animation, as they are still there, but do I appreciate you and @BarryGrennan taking the time to respond.

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [November 14, 2022, 6:32am UTC](https://community.hubspot.com/t/css-carousel-wont-work-when-transferring-from-react-to-hubspot/69103/5 "2022-11-14T06:32:05Z")

</div>

The errant semi colon I was talking about was the one at the end of “0% { transform: translateX(0) };” so, yes, I suppose deleting the whole line will also do the trick. The iteration count was a separate thing unrelated to the semi colon.