slider-pro-js
Version:
Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use
217 lines (185 loc) • 9.43 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"/>
<style>
.sp-selected-thumbnail {
border: 4px solid #000;
}
</style>
</head>
<body>
<div id="example3" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image1_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image1_small.jpg 500w,
https://bqworks.net/slider-pro/images/image1_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image1_large.jpg 2000w"/>
<p class="sp-layer sp-white sp-padding"
data-horizontal="50" data-vertical="50"
data-show-transition="left" data-show-delay="400">
Lorem ipsum
</p>
<p class="sp-layer sp-black sp-padding"
data-horizontal="180" data-vertical="50"
data-show-transition="left" data-show-delay="600">
dolor sit amet
</p>
<p class="sp-layer sp-white sp-padding"
data-horizontal="315" data-vertical="50"
data-show-transition="left" data-show-delay="800">
consectetur adipisicing elit.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image2_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image2_small.jpg 500w,
https://bqworks.net/slider-pro/images/image2_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image2_large.jpg 2000w"/>
<h3 class="sp-layer sp-black sp-padding"
data-horizontal="40" data-vertical="40"
data-show-transition="left">
Lorem ipsum dolor sit amet
</h3>
<p class="sp-layer sp-white sp-padding"
data-horizontal="40" data-vertical="100"
data-show-transition="left" data-show-delay="200">
consectetur adipisicing elit
</p>
<p class="sp-layer sp-black sp-padding"
data-horizontal="40" data-vertical="160" data-width="350"
data-show-transition="left" data-show-delay="400">
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image3_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image3_small.jpg 500w,
https://bqworks.net/slider-pro/images/image3_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image3_large.jpg 2000w"/>
<p class="sp-layer sp-white sp-padding"
data-position="centerCenter" data-vertical="-50"
data-show-transition="right" data-show-delay="500" >
Lorem ipsum dolor sit amet
</p>
<p class="sp-layer sp-black sp-padding"
data-position="centerCenter" data-vertical="50"
data-show-transition="left" data-show-delay="700">
consectetur adipisicing elit
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image4_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image4_small.jpg 500w,
https://bqworks.net/slider-pro/images/image4_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image4_large.jpg 2000w"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft" data-vertical="0" data-width="100%"
data-show-transition="up">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image5_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image5_small.jpg 500w,
https://bqworks.net/slider-pro/images/image5_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image5_large.jpg 2000w"/>
<p class="sp-layer sp-white sp-padding"
data-vertical="5%" data-horizontal="5%" data-width="90%"
data-show-transition="down" data-show-delay="400">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image6_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image6_small.jpg 500w,
https://bqworks.net/slider-pro/images/image6_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image6_large.jpg 2000w"/>
<p class="sp-layer sp-white sp-padding"
data-horizontal="10" data-vertical="10" data-width="300">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image7_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image7_small.jpg 500w,
https://bqworks.net/slider-pro/images/image7_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image7_large.jpg 2000w"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft" data-horizontal="5%" data-vertical="5%" data-width="90%"
data-show-transition="up" data-show-delay="400">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image8_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image8_small.jpg 500w,
https://bqworks.net/slider-pro/images/image8_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image8_large.jpg 2000w"/>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image9_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image9_small.jpg 500w,
https://bqworks.net/slider-pro/images/image9_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image9_large.jpg 2000w"/>
<p class="sp-layer sp-black sp-padding"
data-horizontal="50" data-vertical="50"
data-show-transition="down" data-show-delay="500">
Lorem ipsum dolor sit amet
</p>
<p class="sp-layer sp-white sp-padding"
data-horizontal="50" data-vertical="100"
data-show-transition="up" data-show-delay="500">
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="sp-slide">
<img class="sp-image" src="blank.gif"
data-src="https://bqworks.net/slider-pro/images/image10_medium.jpg"
data-srcset="https://bqworks.net/slider-pro/images/image10_small.jpg 500w,
https://bqworks.net/slider-pro/images/image10_medium.jpg 1000w,
https://bqworks.net/slider-pro/images/image10_large.jpg 2000w"/>
</div>
</div>
<div class="sp-thumbnails">
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image1_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image2_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image3_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image4_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image5_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image6_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image7_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image8_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image9_thumbnail.jpg"/>
<img class="sp-thumbnail" src="https://bqworks.net/slider-pro/images/image10_thumbnail.jpg"/>
</div>
</div>
<script type="text/javascript" src="../build/slider-pro.js"></script>
<script type="text/javascript">
const slider = new SliderPro( '#example3', {
width: 960,
height: 500,
fade: true,
arrows: true,
buttons: false,
fullscreen: true,
shuffle: true,
thumbnailArrows: true,
autoplay: false
});
</script>
</body>
</html>