@dhavalvyas/basic-slider
Version:
Basic Slider - Simple Slider with Simple API
268 lines (233 loc) • 5.91 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Basic Slider - Simple Slider with Simple API</title>
<style>
html,
body {
margin: 0;
padding: 0;
font-size: 14px;
font-family: sans-serif;
color: #111;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
.users-list {
width: 400px;
min-height: 200px;
border-radius: 3px;
background-color: #fff;
padding: 15px 30px;
list-style-type: none;
}
.users-list>li {
line-height: 30px;
}
.container {
max-width: 620;
width: 620px;
margin: 32px auto 0;
position: relative;
}
#app {
max-width: 620;
width: 620px;
margin: 0 auto;
position: relative;
}
.sliderMain>div {
display: flex;
}
body {
margin: 0;
}
.sliderPagination {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 20px;
text-align: center;
}
.sliderPagination li {
display: inline-block;
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
margin: 0 4px;
opacity: 0.5;
cursor: pointer;
transition: opacity 0.3s;
}
.sliderPagination li:hover {
background-color: rgba(0, 0, 255, 0.4);
}
.sliderPagination li.active,
.sliderPagination li:hover {
opacity: 1;
}
.sliderMain {
position: relative;
width: 100%;
text-align: center;
margin: 0 auto;
cursor: pointer;
overflow: hidden;
}
/* .sliderMain:after {
content: "";
display: table;
clear: both;
} */
.sliderMain .sliderItem {
position: relative;
}
.sliderMain .sliderItem img {
display: block;
}
.sliderMain .sliderItem span {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3em;
letter-spacing: 1vw;
font-family: Impact, Charcoal, sans-serif;
text-shadow: 5px 5px 0px #ffffff;
z-index: 10;
}
a.arrow {
position: absolute;
display: block;
top: 50%;
margin-top: -20px;
width: 40px;
height: 40px;
transition: border 0.3s ease-in;
}
a.arrow.is-disabled {
border-color: rgba(0, 0, 0, 0.7);
}
.prev {
left: 20px;
border-bottom: 6px solid #ffffff;
border-left: 6px solid #ffffff;
transform: rotate(45deg);
transition: left 0.5s;
}
.prev:hover {
border-color: rgba(0, 0, 255, 0.4);
}
.next {
right: 20px;
border-bottom: 6px solid #ffffff;
border-right: 6px solid #ffffff;
transform: rotate(-45deg);
transition: right 0.5s;
}
.next:hover {
border-color: rgba(0, 0, 255, 0.4);
}
.buttons {
display: flex;
justify-content: center;
margin-bottom: 32px;
}
.destroyButton, .reInitButton {
display: inline-block;
padding: 16px;
text-decoration: none;
}
.destroyButton:hover, .reInitButton:hover {
opacity: 0.6;
}
.destroyButton {
background-color: #ff3700;
color: white;
margin-right: 16px;
}
.reInitButton {
background-color: #14a014;
color: black;
}
</style>
</head>
<body>
<div class="container">
<div class="buttons">
<a href="#" class="destroyButton">Destroy</a>
<a href="#" class="reInitButton">ReInit</a>
</div>
<div id="app">
<div class="sliderMain">
<div class="sliderItem">
<img src="src/images/demo.jpeg" />
<span>Slide 1</span>
</div>
<div class="sliderItem">
<img src="src/images/demo.jpeg" />
<span>Slide 2</span>
</div>
<div class="sliderItem">
<img src="src/images/demo.jpeg" />
<span>Slide 3</span>
</div>
<div class="sliderItem">
<img src="src/images/demo.jpeg" />
<span>Slide 4</span>
</div>
</div>
<a class="prev arrow" href="javascript:void(0);"></a>
<a class="next arrow" href="javascript:void(0);"></a>
<div class="sliderPagination"></div>
</div>
</div>
<!-- plugin initialization -->
<script src="index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
let slider = new BasicSlider({
selector: '.sliderMain',
dotsWrapper: '.sliderPagination',
loop: true,
arrowLeft: '.prev',
arrowRight: '.next',
transition: {
speed: 800,
easing: 'cubic-bezier(0.46,-0.07, 0.87, 0.04)'
},
onInit: (slider) => {
console.log("Called on slider initialization: slider Object ---> ", slider);
},
onSlideChange: (slider) => {
console.log("Called on slide change: slider Object ---> ", slider);
}
});
reInitButton = document.querySelector('.reInitButton');
reInitButton.addEventListener('click', () => {
slider.reInit();
}, false);
destroyButton = document.querySelector('.destroyButton');
destroyButton.addEventListener('click', () => {
slider.destroy(() => {
console.log("Slider is destroyed");
});
}, false);
});
</script>
<script type="text/javascript" src="./index.js"></script></body>
</html>