Skip to content

Instantly share code, notes, and snippets.

@howardpanton

howardpanton/new_gist_file

Created August 27, 2013 16:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save howardpanton/6356047 to your computer and use it in GitHub Desktop.
Save howardpanton/6356047 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
new_gist_file
<!doctype html>
<html>
<head>
  <title>ReSRC with a responsive slideshow from ResponsiveSlides</title>
  <style>body{margin:0;} .resrc {width: 100%} .rslides{margin:0;padding:0;list-style-type:none;position:relative;}.rslides li{width:100%;opacity:0}.rslides li:first-child{position:relative;display:block;float:left;opacity:1}.rslides img{display:block;height:auto}.rslides_nav{position:absolute;top:10%;z-index:3;margin-top:-2em;width:3.75em;height:3.75em;background-color:rgba(0,0,0,0.5);text-indent:-9999px}.rslides_nav.next{right:3.5%;outline:0}.rslides_nav.next:after{position:absolute;margin-top:-0.75em;border-width:.75em 0 .75em .75em;border-style:solid;border-color:transparent;border-left-color:#fff;content:"";top:50%;right:50%;margin-right:-0.375em}.rslides_nav.prev{left:3.5%;outline:0}.rslides_nav.prev:after{position:absolute;margin-top:-0.75em;border-width:.75em .75em .75em 0;border-style:solid;border-color:transparent;border-right-color:#fff;content:"";top:50%;left:50%;margin-left:-0.375em}</style>
</head>
<body>
  <ul id="slideshow" class="rslides">
    <li><img data-src="http://app.resrc.it/o=80//www.your-site.co/image.jpg" alt="An awesome dog" class="resrc"/></li>
    <li><img data-src="http://app.resrc.it/o=80//www.your-site.co/image-control.jpg" alt="An awesome dog chilling on a bean bag" class="resrc"/></li>
  </ul>
  <script src="//use.resrc.it"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script src="//raw.github.com/viljamis/ResponsiveSlides.js/master/responsiveslides.js"></script>
  <script>
  $(document).ready(function() {
    $("#slideshow").responsiveSlides({
      auto: true,
      nav: true,
      speed: 500
    });
  });
  </script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment