Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
  </head>
  <body>
    <main>
      <section class="slider">
        <div class="flexslider carousel">
          <ul class="slides">
            <li>
                <div class="body">
                  <h2>Test 1</h2>
                </div>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
                <div class="body">
                  <h2>Test 2</h2>
                </div>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
            </li>
            <li>
                <div class="body">
                  <h2>Test 3</h2>
                </div>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
            </li>
            <li>
                <div class="body">
                  <h2>Test 4</h2>
                </div>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
            </li>
            <li>
                <div class="body">
                  <h2>Test 5</h2>
                </div>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
          </ul>
        </div>
      </section>
    </main>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
    <script>
      $('.flexslider').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 210,
        itemMargin: 5,
        pausePlay: true
      });
    </script>
  </body>
</html>
 
.slider {
  max-width: 430px;
}
​
.flex-direction-nav a:before {
  content: '';
}
​
.flex-direction-nav a.flex-next:before {
  content: '';
}
​
.flex-pauseplay a:before {
  content: '';
}
​
.body {
  position: absolute;
  color: #fff;
  font-weight: 700;
  margin-left: 1rem;
}
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
brunowegopro
0viewers