如何使用 CSS 制作旋转木马？

在本文中，我们将学习如何在不使用任何其他库或框架的情况下使用纯 CSS 制作轮播。旋转木马是包含一组旋转横幅/图像的幻灯片。通常，您可以在网站的主页上看到轮播。它使您的网站更具吸引力。

我们将制作一个 4 图像轮播，可以通过轮播底部的按钮位置进行控制。旋转木马的中心有一个文本，它是固定的，不能随着图像的移动而移动。图像在背景中经过固定的时间间隔后移动。

我们使用 HTML 作为轮播的基本结构，并使用 CSS 来装饰它。下面是我们将要遵循的分步程序。

步骤 1：首先，我们添加 HTML 代码。它包含主容器和容器内部，有两件事：

• 网页的主标题
• 是一个包含整个轮播结构的类内容的 div。

第 2 步：现在，我们将在内容div 中添加以下两部分：

• 第一部分是一个带有类carousel-content 的 div。内容（标题和副标题）放置在轮播的中心。这将在轮播中保持静态。
• 第二部分是一个带有类幻灯片的 div。旋转木马的所有移动部件都将在此 div 内。

第 3 步：幻灯片div 包含以下元素：

• 四个转盘控制按钮
• 包含所有 4 个轮播图像的幻灯片包装器。

然后，我们添加 CSS 来为我们的轮播设置样式并使轮播能够响应所有屏幕尺寸。

注意：我们将尽可能多地使用“rem”和“%”单位来实现响应
容易地。

下面是上述方法的实现。

例子：

index.html

  

    
    

  

    

        

            Responsive Carousel using CSS
        
          
        

  
            
            

                

                    GeeksforGeeks
                
                
A computer science portal for geeks
            
            

                  
                
                
                
                
                
  
                
                

                    

                        
                    
                    

                        
                    
                    

                        
                    
                    

                        
                    
                
            
        
    

  

输出： 由此，我们可以看到转盘对于所有屏幕尺寸（即手机、平板电脑和笔记本电脑屏幕）来说都非常漂亮。根据您的选择对上述代码进行修改，将其包含在您的项目中，并享受构建精彩项目的乐趣。