index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  
  <title>Blog: 2017/4 | 开源百科</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <meta name="description" content="面向开发人员和技术专业人员的，汇聚全网优秀开源项目的社区。">
<meta property="og:type" content="website">
<meta property="og:title" content="开源百科">
<meta property="og:url" content="https://dev-cloud.gitcode.host/oss-pedia/blog/2017/04/index.html">
<meta property="og:site_name" content="开源百科">
<meta property="og:description" content="面向开发人员和技术专业人员的，汇聚全网优秀开源项目的社区。">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="GitCode.net">
<meta name="twitter:card" content="summary">

  
  <!--[if lte IE 10 ]><link rel="shortcut icon" href="/oss-pedia/images/favicon.ico"><![endif]-->
  <!--[if !IE]><!-->
  <link rel="shortcut icon" href="/oss-pedia/images/favicon.png">

  <meta name="msapplication-TileImage" content="/oss-pedia/images/favicon.png"/>
  <meta name="msapplication-TileColor" content="#000000"/>

  <link rel="apple-touch-icon" href="/oss-pedia/images/apple-touch-icon-57x57.png" />
  <link rel="apple-touch-icon" sizes="72x72" href="/oss-pedia/images/apple-touch-icon-72x72.png" />
  <link rel="apple-touch-icon" sizes="114x114" href="/oss-pedia/images/apple-touch-icon-114x114.png" />
  <link rel="apple-touch-icon" sizes="144x144" href="/oss-pedia/images/apple-touch-icon-144x144.png" />

  <link rel="icon" sizes="256x256" href="/oss-pedia/images/favicon.png" />
  <!--<![endif]-->
  

  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Material+Icons|Raleway:400,300,700" rel="stylesheet" type="text/css" />

  
<link rel="stylesheet" href="/oss-pedia/generated/668-8ba6742167ba420f699c.css">

<link rel="stylesheet" href="/oss-pedia/generated/app-da20bb8e781d1cdeb855.css">

<link rel="stylesheet" href="/oss-pedia/generated/blog-9616c73356b85ed396f8.css">


  <script src="https://polyfill.io/v3/polyfill.min.js?features=es5,es6,es7,fetch,Object.entries,Object.values&flags=gated"></script>

<meta name="generator" content="Hexo 5.3.0"></head>
<body>

  
<div class="navbar-fixed">
  <nav id="main-navbar" class="grey lighten-5 z-depth-0" role="navigation">
    <div class="nav-wrapper container">

      <a id="logo-container" href="/oss-pedia/" class="brand-logo center-align">
        <span>开源百科</span>
        <sub></sub>
      </a>

      <ul class="right hide-on-med-and-down">
        
      </ul>

      <a href="#" data-target="nav-mobile" class="button-collapse sidenav-trigger">
        <i class="material-icons">menu</i>
      </a>
    </div>
  </nav>
</div>

<ul id="nav-mobile" class="sidenav">
  
</ul>


  <div id="main-container">
    
<div class="container">
  <div class="row">
    <div class="col s12">

      
      <article id="post-como-criar-um-plugin-de-carrossel-de-imagens-com-css-puro" class="article article-type-post" itemscope itemprop="blogPost">

        <div class="article-inner">
          

          <header class="article-header">
          
              
    <h1 itemprop="name" class="header">
      <a class="article-title " href="/oss-pedia/2017/04/08/como-criar-um-plugin-de-carrossel-de-imagens-com-css-puro/">Como Criar Um Plugin De Carrossel De Imagens Com Css Puro</a>
    </h1>
  

              <div class="article-meta">
                <i class="fa fa-calendar"></i>
                Published:
                <time
                  datetime="2017-04-08T15:32:59.000Z"
                  itemprop="datePublished"
                  title="Date published"
                >4月 08, 2017</time>

                
                  -
                  Updated:
                  <time
                    datetime="2021-01-25T02:00:00.000Z"
                    itemprop="dateModified"
                    title="Date updated"
                  >1月 25, 2021</time>
                
              </div>
            
          </header>


          <div class="article-entry " itemprop="articleBody">
            
              <p>Existem vários plugins para jQuery, React e até mesmo Angular para criar um carrossel de imagens, mas é possível criar utilizando apenas CSS puro.</p>
<h2 id="Elementos-de-um-carrossel"><a href="#Elementos-de-um-carrossel" class="headerlink" title="Elementos de um carrossel"></a>Elementos de um carrossel</h2><img src="/oss-pedia/2017/04/08/como-criar-um-plugin-de-carrossel-de-imagens-com-css-puro/carrossel-elements.png" class="" title="Elementos de um carrossel">

<ul>
<li><strong>Stage</strong>: A área disponível para o carrossel</li>
<li><strong>Item</strong>: O item visível atualmente pelo usuário</li>
<li><strong>Next/Prev Buttons</strong>: Os botões para passar aos items anteriores/próximos, que normalmente estão ocultos</li>
</ul>
            
          </div>

          
            <p class="article-more-link">
              <a href="/oss-pedia/2017/04/08/como-criar-um-plugin-de-carrossel-de-imagens-com-css-puro/#more" class="waves-effect waves-light btn red lighten-2">
                Read More
                &nbsp;
                <i class="fa fa-plus-circle"></i>
              </a>
            </p>
          

          <footer class="article-footer">
            <a data-url="https://dev-cloud.gitcode.host/oss-pedia/2017/04/08/como-criar-um-plugin-de-carrossel-de-imagens-com-css-puro/" data-id="cl17dlhox00045z0c6sfr665j" class="article-share-link">Share</a>
            
            
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/oss-pedia/blog/tags/css/" rel="tag">css</a></li></ul>

          </footer>

        </div>

        
      </article>


    </div>
  </div>
</div>


  </div>

  <footer class="page-footer grey darken-2">
    <div class="footer-copyright">
      <div class="container">
        &copy; 2022 GitCode.net

        <div class="right">
          Powered by <a href="http://hexo.io/" rel="nofollow noopener" class="white-text" target="_blank">Hexo</a>
        </div>
      </div>
    </div>
  </footer>

  
<script src="/oss-pedia/generated/193-eb01f81907d23513bb6f.js"></script>

<script src="/oss-pedia/generated/668-d2e471b8dcd3790fc287.js"></script>

<script src="/oss-pedia/generated/app-ab934fe8b0db342c4d01.js"></script>

<script src="/oss-pedia/generated/blog-11990083fd519e2cb9b8.js"></script>


</body>
</html>