Skip to content

Instantly share code, notes, and snippets.

<div class="cycle-slideshow"
data-slides=">div"
data-cycle-auto-height="calc"
>
<div>
<img src="img1.jpg" width="###" height="###">
<p>caption 1</p>
</div>
<div>
<img src="img2.jpg" width="###" height="###">
<div id="myshow" class="cycle-slideshow" data-cycle-pager="#pager-container">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img3.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img4.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img5.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img6.jpg"/>
</div>
<div id="pager-container"></div>
<div id="myshow" class="cycle-slideshow" data-cycle-pager="#pager-container">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img3.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img4.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img5.jpg"/>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" data-img="img6.jpg"/>
</div>
<div id="pager-container"></div>