slider-pro-js
Version:
Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use
286 lines (240 loc) • 10.7 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-thumbnail {
width: 100%;
padding: 8px;
background-color: #F0F0F0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.sp-thumbnail-title {
margin-bottom: 5px;
text-transform: uppercase;
color: #333;
}
.sp-thumbnail-description {
font-size: 14px;
color: #333;
}
@media (max-width: 860px) {
.hide-medium-screen {
display: none;
}
}
@media (max-width: 640px) {
.sp-layer {
font-size: 12px;
}
.hide-small-screen {
display: none;
}
}
@media (max-width: 500px) {
.sp-thumbnail {
text-align: center;
}
.sp-thumbnail-title {
font-size: 12px;
text-transform: uppercase;
}
.sp-thumbnail-description {
display: none;
}
}
</style>
</head>
<body>
<div id="example1" 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_large.jpg 2x"/>
<p class="sp-layer sp-white sp-padding"
data-horizontal="50" data-vertical="50"
data-show-transition="left" data-hide-transition="up" data-show-delay="400" data-hide-delay="200">
Lorem ipsum
</p>
<p class="sp-layer sp-black sp-padding hide-small-screen"
data-horizontal="180" data-vertical="50"
data-show-transition="left" data-hide-transition="up" data-show-delay="600" data-hide-delay="100">
dolor sit amet
</p>
<p class="sp-layer sp-white sp-padding hide-medium-screen"
data-horizontal="315" data-vertical="50"
data-show-transition="left" data-hide-transition="up" 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_large.jpg 2x"/>
<h3 class="sp-layer sp-black sp-padding sp-static"
data-horizontal="40" data-vertical="10%"
data-show-transition="left" data-hide-transition="left">
Lorem ipsum dolor sit amet
</h3>
<p class="sp-layer sp-white sp-padding hide-medium-screen sp-static"
data-horizontal="40" data-vertical="22%"
data-show-transition="left" data-show-delay="200" data-hide-transition="left" data-hide-delay="200">
consectetur adipisicing elit
</p>
<p class="sp-layer sp-black sp-padding hide-small-screen sp-static"
data-horizontal="40" data-vertical="34%" data-width="350"
data-show-transition="left" data-show-delay="400" data-hide-transition="left" data-hide-delay="500">
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_large.jpg 2x"/>
<p class="sp-layer sp-white sp-padding"
data-position="centerCenter" data-vertical="-50"
data-show-transition="right" data-hide-transition="left" data-show-delay="500" >
Lorem ipsum dolor sit amet
</p>
<p class="sp-layer sp-black sp-padding hide-small-screen"
data-position="centerCenter" data-vertical="50"
data-show-transition="left" data-show-delay="700" data-hide-transition="right" data-hide-delay="200">
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_large.jpg 2x"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft"
data-show-transition="up" data-hide-transition="down">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</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_large.jpg 2x"/>
<p class="sp-layer sp-white sp-padding"
data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="down" data-show-delay="400" data-hide-transition="up">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</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_large.jpg 2x"/>
<p class="sp-layer sp-white sp-padding"
data-horizontal="10" data-vertical="10" data-width="35%">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</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_large.jpg 2x"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft" data-vertical="10" data-horizontal="2%" data-width="96%"
data-show-transition="up" data-show-delay="400" data-hide-transition="down">
Lorem ipsum dolor sit amet <span class="hide-small-screen">, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> <span class="hide-medium-screen">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>
</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_large.jpg 2x"/>
</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_large.jpg 2x"/>
<p class="sp-layer sp-black sp-padding"
data-position="bottomLeft" data-horizontal="50" data-vertical="100"
data-show-transition="down" data-show-delay="500" data-hide-transition="up">
Lorem ipsum dolor sit amet
</p>
<p class="sp-layer sp-white sp-padding hide-small-screen"
data-position="bottomLeft" data-horizontal="50" data-vertical="50"
data-show-transition="up" data-show-delay="500" data-hide-transition="down">
consectetur adipisicing elit <span class="hide-medium-screen">, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
</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_large.jpg 2x"/>
</div>
</div>
<div class="sp-thumbnails">
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Lorem ipsum</div>
<div class="sp-thumbnail-description">Dolor sit amet, consectetur adipiscing elit sed</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Do eiusmod</div>
<div class="sp-thumbnail-description">Tempor incididunt ut labore et dolore magna aliqua</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Ut enim</div>
<div class="sp-thumbnail-description">Ad minim veniam, quis nostrud exercitation</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Ullamco oris</div>
<div class="sp-thumbnail-description">Nisi ut aliquip ex ea commodo consequat</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Duis aute</div>
<div class="sp-thumbnail-description">Irure dolor in reprehenderit in voluptate velit</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Esse cillum</div>
<div class="sp-thumbnail-description">Dolore eu fugiat nulla pariatur excepteur</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Sint occaecat</div>
<div class="sp-thumbnail-description">Cupidatat non proident, sunt in culpa qui officia</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Deserunt</div>
<div class="sp-thumbnail-description">Mollit anim id est laborum sed ut perspiciatis</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Unde omnis</div>
<div class="sp-thumbnail-description">Iste natus error sit voluptatem doloremque</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-title">Laudantium</div>
<div class="sp-thumbnail-description">Totam rem aperiam, eaque ipsa quae ab illo</div>
</div>
</div>
</div>
<script type="text/javascript" src="../build/slider-pro.js"></script>
<script type="text/javascript">
const slider = new SliderPro( '#example1', {
width: 960,
height: 500,
arrows: true,
buttons: false,
waitForLayers: true,
thumbnailWidth: 200,
thumbnailHeight: 100,
thumbnailPointer: true,
autoplay: false,
autoScaleLayers: false,
breakpoints: {
500: {
thumbnailWidth: 120,
thumbnailHeight: 50
}
}
});
</script>
</body>
</html>