Team:AUC TURKEY/Test2

From 2014hs.igem.org

(Difference between revisions)
(Blanked the page)
 
Line 1: Line 1:
 +
__NOTOC__
 +
<!doctype html>
 +
<html lang="en-US">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta http-equiv="Content-Type" content="text/html">
 +
  <title>Glide.js Content Slider Demo - Template Monster</title>
 +
  <meta name="author" content="Jake Rocheleau">
 +
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
 +
  <link rel="shortcut icon" href="http://www.templatemonster.com/favicon.ico">
 +
  <link rel="icon" href="http://www.templatemonster.com/favicon.ico">
 +
  <link rel="stylesheet" type="text/css" media="all" href="https://2014hs.igem.org/Team:AUC_TURKEY/styles.css?action=raw&ctype=text/javascript">
 +
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 +
  <script type="text/javascript" src="https://2014hs.igem.org/Team:AUC_TURKEY/jquery.glide.min.js?action=raw&ctype=text/javascript"></script>
 +
</head>
 +
<body>
 +
  <div id="w">
 +
    <header>
 +
      <h1>Responsive Glide.js Slider Demo</h1>
 +
    </header>
 +
   
 +
    <div class="slider">
 +
      <ul class="slides">
 +
        <li class="slide">
 +
          <figure>
 +
            <figcaption>Designed by <a href="http://dribbble.com/shots/1362980-Witches">Adam Record</a></figcaption>
 +
            <img src="img/witches.png" alt="dribbble witches">
 +
          </figure>
 +
        </li>
 +
        <li class="slide">
 +
          <figure>
 +
            <figcaption>Designed by <a href="http://dribbble.com/shots/1360304-Searing-Mountain">Martin Sorensen</a></figcaption>
 +
            <img src="img/searing-mountain.png" alt="searing mountain illustration">
 +
          </figure>
 +
        </li>
 +
        <li class="slide">
 +
          <figure>
 +
            <figcaption>Designed by <a href="http://dribbble.com/shots/1359635-Taipei-101">nos</a></figcaption>
 +
            <img src="img/taipei-fireworks.png" alt="taipei fireworks">
 +
          </figure>
 +
        </li>
 +
        <li class="slide">
 +
          <figure>
 +
            <figcaption>Designed by <a href="http://dribbble.com/shots/1364323-Mockup-Phone">Ruslan Siiz</a></figcaption>
 +
            <img src="img/iphone-mockup.png" alt="coffee cup iphone newspaper">
 +
          </figure>
 +
        </li>
 +
        <li class="slide">
 +
          <figure>
 +
            <figcaption>Designed by <a href="http://dribbble.com/shots/1364642-Super-Squirrel">Alex Grigoras</a></figcaption>
 +
            <img src="img/super-squirrel.png" alt="flying super squirrel">
 +
          </figure>
 +
        </li>
 +
      </ul>
 +
    </div><!-- @end .slider -->
 +
  </div><!-- @end #w -->
 +
<script type="text/javascript">
 +
$(function(){
 +
  $('.slider').glide({
 +
    autoplay: 3500,
 +
    hoverpause: true, // set to false for nonstop rotate
 +
    arrowRightText: '&rarr;',
 +
    arrowLeftText: '&larr;'
 +
  });
 +
});
 +
</script>
 +
</body>
 +
</html>

Latest revision as of 18:51, 6 June 2014

<!doctype html> Glide.js Content Slider Demo - Template Monster

Responsive Glide.js Slider Demo