Javascript 可以使用css循环flexbox滑块吗？

我使用flexbox构建了一个旋转木马： 我需要它每3秒滑动一次，然后重复循环 在侧面添加“上一步”和“下一步”按钮 在下面添加导航点。 有没有一种方法可以用css实现这一点？还是我需要使用jquery？ 这是我的旋转木马代码：

<section class="section section-logo">
 Logo Carousel
<div class="logo_carousel">
<?php   
    if( have_rows('logos') );
     while( have_rows('logos') ): the_row(); 
        $image = get_sub_field('logo_image');
        $content = get_sub_field('name');
?>
    <span class="logo_slide">
        <img src="<?php echo $image['url']; ?>" />
    </span>

    <?php endwhile; ?>
    <?php endif; ?>
</div>
</section>

我还尝试在

之后添加带有html代码的导航图标和滑块箭头，但它没有显示出来。我应该把这个代码放在哪里？

---

如果我需要使用javascript，我应该如何使用javascript使其滑动

为什么不使用像这样的库呢？在这里你可以使用Javascript，css并不是一种真正的编程语言来处理这样的东西。您可以使用javascript函数

setInterval（）

设置触发函数的间隔时间（以毫秒为单位），以操纵元素的样式。有很多库可以帮助您实现这一点，包括引导。我正在使用sage，如果我尝试将javascript添加到路由文件中，页面就会一次又一次地重新加载。但它不是flexbox。也许你想要它

   .section-logo {
  width: 100%;
  height: 100%;
}

.logo_carousel {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-x: auto;
}

.logo_carousel::-webkit-scrollbar {
  display: none;
}

.logo_slide img {
  width: 195px;
  height: 115px;
}

.logo_slide {
  flex-shrink: 0;               /* added, so it won't shrink  */
  display: flex;                /*  added  */
  align-items: center;          /*  added  */
  justify-content: center;      /*  added animation: slide-it 10s infinite; */
  width: 195px;
  height: 115px;
  margin: 5px;
}

.logo_slide:hover .logo_tt {
  visibility: visible;
}