Team:Imperial College/Templates/Carousel

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/slidesjs/3.0.1/jquery.slides.min.js" type="text/javascript"></script>
 +
  <style>
 +
    #slides
 +
      -webkit-font-smoothing: antialiased;
 +
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
      color: #232525;
 +
      display: none
 +
    }
 +
 +
    #slides .slidesjs-navigation {
 +
      margin-top:5px;
 +
    }
 +
 +
    a.slidesjs-next,
 +
    a.slidesjs-previous,
 +
    a.slidesjs-play,
 +
    a.slidesjs-stop {
 +
      background-image: url(img/btns-next-prev.png);
 +
      background-repeat: no-repeat;
 +
      display:block;
 +
      width:12px;
 +
      height:18px;
 +
      overflow: hidden;
 +
      text-indent: -9999px;
 +
      float: left;
 +
      margin-right:5px;
 +
    }
 +
 +
    a.slidesjs-next {
 +
      margin-right:10px;
 +
      background-position: -12px 0;
 +
    }
 +
 +
    a:hover.slidesjs-next {
 +
      background-position: -12px -18px;
 +
    }
 +
 +
    a.slidesjs-previous {
 +
      background-position: 0 0;
 +
    }
 +
 +
    a:hover.slidesjs-previous {
 +
      background-position: 0 -18px;
 +
    }
 +
 +
    a.slidesjs-play {
 +
      width:15px;
 +
      background-position: -25px 0;
 +
    }
 +
 +
    a:hover.slidesjs-play {
 +
      background-position: -25px -18px;
 +
    }
 +
 +
    a.slidesjs-stop {
 +
      width:18px;
 +
      background-position: -41px 0;
 +
    }
 +
 +
    a:hover.slidesjs-stop {
 +
      background-position: -41px -18px;
 +
    }
 +
 +
    .slidesjs-pagination {
 +
      margin: 7px 0 0;
 +
      float: right;
 +
      list-style: none;
 +
    }
 +
 +
    .slidesjs-pagination li {
 +
      float: left;
 +
      margin: 0 1px;
 +
    }
 +
 +
    .slidesjs-pagination li a {
 +
      display: block;
 +
      width: 13px;
 +
      height: 0;
 +
      padding-top: 13px;
 +
      background-image: url(img/pagination.png);
 +
      background-position: 0 0;
 +
      float: left;
 +
      overflow: hidden;
 +
    }
 +
 +
    .slidesjs-pagination li a.active,
 +
    .slidesjs-pagination li a:hover.active {
 +
      background-position: 0 -13px
 +
    }
 +
 +
    .slidesjs-pagination li a:hover {
 +
      background-position: 0 -26px
 +
    }
 +
 +
    #slides a:link,
 +
    #slides a:visited {
 +
      color: #333
 +
    }
 +
 +
    #slides a:hover,
 +
    #slides a:active {
 +
      color: #9e2020
 +
    }
 +
 +
    .navbar {
 +
      overflow: hidden
 +
    }
 +
    #slides {
 +
      display: none
 +
    }
 +
 +
    .container {
 +
      margin: 0 auto
 +
    }
 +
 +
    /* For tablets & smart phones */
 +
    @media (max-width: 767px) {
 +
      body {
 +
        padding-left: 20px;
 +
        padding-right: 20px;
 +
      }
 +
      .container {
 +
        width: auto
 +
      }
 +
    }
 +
 +
    /* For smartphones */
 +
    @media (max-width: 480px) {
 +
      .container {
 +
        width: auto
 +
      }
 +
    }
 +
 +
    /* For smaller displays like laptops */
 +
    @media (min-width: 768px) and (max-width: 979px) {
 +
      .container {
 +
        width: 724px
 +
      }
 +
    }
 +
 +
    /* For larger displays */
 +
    @media (min-width: 1200px) {
 +
      .container {
 +
        width: 1170px
 +
      }
 +
    }
 +
  </style>
</html>
</html>

Revision as of 16:47, 24 August 2013

Retrieved from "http://2013.igem.org/Team:Imperial_College/Templates/Carousel"