基础 CSS 轨道

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

Foundation CSS Orbit用于创建使用轨道类滑动元素的滑块。我们可以在幻灯片中放置任何类型的内容。

在本文中，我们将讨论 Foundation CSS 中的 Orbit。

基础 CSS 轨道主题：

基础：我们将创建基本轨道。
幻灯片内容：我们将创建滑块以使用一些类来滑动内容。

基础 CSS 轨道类：

轨道：此类用于创建基本轨道。
轨道容器：此类用于创建轨道容器。
orbit-wrapper：此类用于包装轨道容器。
轨道控制：此类用于使用按钮控制轨道。
orbit-image：该类用于在容器中插入图像。
orbit-previous：此类用于导航到上一张幻灯片。
orbit-next：此类用于导航到下一张幻灯片。
orbit-slide：用于创建轨道容器幻灯片。

句法：


  
    
       ....

示例 1：以下代码演示了 Foundation CSS Orbit Basics 。

HTML



  

   Foundation CSS Orbit 
  
  
  
  
  
  

  

    
          GeeksforGeeks  
          Foundation CSS Orbit   
     
  
    
        
          
          
  
          
            
               GFG slide 1 
              
                A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles 
              
  
            
          
  
          
            
               GFG slide 2 
              
                GeeksforGeeks.org was created with 
                a goal in mind to provide well written, 
                well thought and well explained solutions 
                for selected questions.
              
  
            
          
  
          
            
               GFG slide 3 
              
                It contains well written, well thought
                and well explained computer science and
                programming articles. A Computer Science
                portal for geeks.

HTML



  

   Foundation CSS Orbit 
  
  
  
  
  
  

  

   
      GeeksforGeeks  
      Foundation CSS Orbit 
   
  
   
        
          
          
  
          
             GFG slide 1 
            
              
            
          
  
          
             GFG slide 2 
            
              
            
          
  
          
             GFG slide 3

输出：

示例 2：以下代码演示了 Foundation CSS Orbit Slide Contents 。

HTML



  

   Foundation CSS Orbit 
  
  
  
  
  
  

  

   
      GeeksforGeeks  
      Foundation CSS Orbit 
   
  
   
        
          
          
  
          
             GFG slide 1 
            
              
            
          
  
          
             GFG slide 2 
            
              
            
          
  
          
             GFG slide 3

输出：

参考： https://get.foundation/sites/docs/orbit.html