Skip to content

Instantly share code, notes, and snippets.

@justinmc
Created February 22, 2014 19:23
Show Gist options
  • Select an option

  • Save justinmc/9160645 to your computer and use it in GitHub Desktop.

Select an option

Save justinmc/9160645 to your computer and use it in GitHub Desktop.
jQuery Open Carousel Example - HTML
<div class="ocarousel example_photos" data-ocarousel-perscroll="3">
<div class="ocarousel_window">
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_0.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_1.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_2.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_3.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_4.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_5.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_6.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_7.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_8.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_9.jpg" />
<img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_normal_10.jpg" />
</div>
<br />
<a href="#" data-ocarousel-link="left" style="float: left;">Previous</a>
<a href="#" data-ocarousel-link="right" style="float: right;">Next</a>
<br />
<div class="example_photos_thumbs">
<a href="#" data-ocarousel-link="0"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_0.jpg" /></a>
<a href="#" data-ocarousel-link="1"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_1.jpg" /></a>
<a href="#" data-ocarousel-link="2"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_2.jpg" /></a>
<a href="#" data-ocarousel-link="3"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_3.jpg" /></a>
<a href="#" data-ocarousel-link="4"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_4.jpg" /></a>
<a href="#" data-ocarousel-link="5"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_5.jpg" /></a>
<a href="#" data-ocarousel-link="6"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_6.jpg" /></a>
<a href="#" data-ocarousel-link="7"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_7.jpg" /></a>
<a href="#" data-ocarousel-link="8"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_8.jpg" /></a>
<a href="#" data-ocarousel-link="9"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_9.jpg" /></a>
<a href="#" data-ocarousel-link="10"><img src="http://www.justinmccandless.com/img/posts/qingdao/qingdao_small_10.jpg" /></a>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment