title: Carousel Slider
body: <p>I'm trying to create a Carousel Slider. Just like this one:
  <img src="https://i.stack.imgur.com/vuh70.png" alt="enter image description here"></p>
  
  <pre><code> &lt;section&gt;
      &lt;div&gt;&lt;br&gt;
          &lt;div class="arrows"&gt;
              &lt;div class="seta-x"&gt;
                  &lt;a href="#" class="arrow-left"&gt;&lt;/a&gt;
                  &lt;a href="#" class="arrow-right"&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li class="opaco"&gt;
                  &lt;div class="caption "&gt;eras dfasd&lt;/div&gt;
                  &lt;img src="fotos/passo01.jpg"/&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="caption"&gt;eras dfasd&lt;/div&gt;
                  &lt;img src="fotos/passo01.jpg"/&gt;
              &lt;/li&gt;
              &lt;li class="opaco"&gt;
                  &lt;div class="caption "&gt;eras dfasd&lt;/div&gt;
                  &lt;img src="{{ STATIC_URL }}fotos/passo01.jpg"/&gt;
              &lt;/li&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
              &lt;br&gt;&lt;br&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>How can I suppose do that? I'm happy to use jQuery or some plugin. I want it working just like this one: geehair.com</p>
  
  <p>Changing from one block to another.</p>
  
  <p>I'm using Gumby (not bootstrap), don't judge me please, was not my choice.</p>
  
  <p>Any suggestions?</p>