slider-pro-js
Version:
Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use
131 lines (114 loc) • 5.69 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Slider Pro</title>
<link rel="stylesheet" type="text/css" href="../build/slider-pro.css" media="screen"/>
</head>
<body>
<div id="example2" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image1_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image1_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image1_large.jpg 2x"/>
</a>
<p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image2_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image2_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image2_large.jpg 2x"/>
</a>
<p class="sp-caption">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image3_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image3_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image3_large.jpg 2x"/>
</a>
<p class="sp-caption">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image4_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image4_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image4_large.jpg 2x"/>
</a>
<p class="sp-caption">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image5_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image5_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image5_large.jpg 2x"/>
</a>
<p class="sp-caption">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image6_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image6_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image6_large.jpg 2x"/>
</a>
<p class="sp-caption">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image7_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image7_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image7_large.jpg 2x"/>
</a>
<p class="sp-caption">Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image8_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image8_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image8_large.jpg 2x"/>
</a>
<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image9_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image9_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image9_large.jpg 2x"/>
</a>
<p class="sp-caption">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image10_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image10_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image10_large.jpg 2x"/>
</a>
<p class="sp-caption">Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
</div>
<div class="sp-slide">
<a href="https://bqworks.net/slider-pro/images2/image11_large.jpg">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images2/image11_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images2/image11_large.jpg 2x"/>
</a>
<p class="sp-caption">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
</div>
</div>
</div>
<script type="text/javascript" src="../build/slider-pro.js"></script>
<script type="text/javascript">
const slider = new SliderPro( '#example2', {
width: 500,
height: 300,
autoplay: false,
visibleSize: '100%',
forceSize: 'fullWidth',
autoSlideSize: true
});
</script>
</body>
</html>