Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html lang="en">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script>
- <script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script>
- <script type="text/javascript">
- $().ready(function() {
- $('#coda-slider-1').codaSlider({
- dynamicArrows: false,
- dynamicTabs: false
- });
- });
- </script>
- <style>
- #nav { width: 500px; background: blue; height: 50px; }
- ul { list-style: none; margin: 0; }
- #mainWrapper #nav ul li { float: left; margin-right: 40px; }
- #slider { width: 500px; background: red; overflow: hidden; }
- .codaslider { width: 1500px; background: greenyellow; }
- .panel { width: 500px; height: 100px; float: left; }
- .panel1 { background: green; }
- .panel2 { background: lightblue; }
- .panel3 { background: yellow; }
- </style>
- <title>title</title>
- </head>
- <body>
- <div id="mainWrapper">
- <div id="coda-nav-1">
- <ul>
- <li class="tab1"><a href="#1">Panel 1</a></li>
- <li class="tab2"><a href="#2">Panel 2</a></li>
- <li class="tab3"><a href="#3">Panel 3</a></li>
- </ul>
- </div>
- <div id="slider">
- <div class="coda-slider" id="coda-slider-1">
- <div class="panel panel1">
- <h2>Panel 1</h2>
- <p>This is panel 1</p>
- </div>
- <div class="panel panel2">
- <h2>Panel 2</h2>
- <p>This is panel 2</p>
- </div>
- <div class="panel panel3">
- <h2>Panel 3</h2>
- <p>This is panel 3</p>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement