基础 CSS 轨道幻灯片内容

Foundation CSS是 CSS 的前端框架，用于构建可在任何设备上完美运行的响应式网站、应用程序和电子邮件。它使用 HTML、CSS 和 Javascript 编写，并被许多著名公司使用，如 Amazon、Facebook、eBay 等。它使用 Grunt 和 Lib sass 等包进行快速编码和控制，并使用 SaaS 编译器加快开发速度。 Foundation CSS Orbit用于创建可以使用轨道类滑动元素的滑块。我们可以在滑块中存储任何类型的内容，例如文本、图像等。在本文中，我们将讨论Foundation CSS Orbit Slide Contents 。

基础 CSS 轨道幻灯片内容类：

• orbit-slide：该类用于创建滑块以滑动内容。

句法：

   ....

示例 1：此示例描述了 Foundation CSS Orbit 幻灯片内容。

HTML

  

     Foundation CSS Orbit Slide Contents 
    
  
    
    
    
    

  

    
        
            GeeksforGeeks
        
        
            Foundation CSS Orbit Slide Contents
        
    
    
        
            
                Previous
                ◀
            
            
                Next
                ▶
            
  
            
                
                     GeeksforGeeks 1 
                    
                        A Computer Science portal for geeks.
                    
  
                
            
  
            
                
                     GeeksforGeeks 2 
                    
                        It contains well written, well thought
                        and well explained computer science and
                        programming articles.
                    
  
                
            
  
            
                
                     GeeksforGeeks 3 
                    
                        Computer Science portal
                    
  
                
            
        
  
        
            
                GeeksforGeeks 1
                Current Slide
            
            
                GeeksforGeeks 2
            
            
                GeeksforGeeks 3
            
        
    
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

示例 2：此示例描述了带有图像的 Foundation CSS Orbit 幻灯片内容。

HTML

  

   Foundation CSS Orbit Slide Contents 
  
  
  
  
  
  

  

  
    
        GeeksforGeeks
     
    
      Foundation CSS Orbit Slide Contents
     
  
    
      
        
            Previous
            ◀ 
        
         
            Next
            ▶ 
        
  
        
          
             GeeksforGeeks 1 
            
          
        
  
        
          
             GeeksforGeeks 2 
            
          
        
  
        
          
             GeeksforGeeks 3 
            
          
        
      
  
      
        
          GeeksforGeeks 1
          Current Slide 
        
         
          GeeksforGeeks 2
        
         
          GeeksforGeeks 3
        
      
    
  
  
    $(document).ready(function() {
      $(document).foundation();
    })
  

输出：

参考： https://get.foundation/sites/docs/orbit.html#slide-contents