sliderplex
Version:
A simple and responsive jQuery content slider plugin
77 lines (74 loc) • 2.57 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">
<link rel="stylesheet" href="../src/css/SliderPlex.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Poiret+One">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="../src/SliderPlex.js"></script>
<title>SliderPlex demo</title>
</head>
<style>
html, body { height: 100%; }
body { margin: 0; background: #ddd; font-family: 'Open Sans'; }
.slider { height: 80%; box-shadow: 0 0 2px #000; }
.barner {
font-family: 'Poiret One';
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.barner h1 { width: 70%; color: #efefef; }
.barner-1 {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url('0.jpg');
}
.barner-1 h1 { color: #7e7e7e; }
.barner-2 { background-color: #00714d; }
.barner-3 { background-color: #003d71; }
header { display: flex; justify-content: center; align-items: center; color: #adadad; height: 20%; }
.plex-link { text-decoration: none; color: #597256; }
</style>
<body>
<div class="slider slider-plex">
<ul>
<li>
<div class="barner barner-1">
<h1>Where do new ideas come from? The answer is simple: differences. Creativity comes from unlikely juxtapositions.</h1>
</div>
</li>
<li>
<div class="barner barner-2">
<h1>“Do not seek praise. Seek criticism.”</h1>
</div>
</li>
<li>
<div class="barner barner-3">
<h1>Good design is a language, not a style</h1>
</div>
</li>
</ul>
</div>
<header>
<a class="plex-link" href="https://github.com/e200/SliderPlex"><h1>SliderPlex demo</h1></a>
</header>
<script>
$('.slider').SliderPlex({
slideInterval: 3,
animation: 'fade',
animationTime: .5,
direction: 'right',
nonFocusArrows: true,
fillSpace: true,
autoPlay: true,
pauseOnMouseOver: false,
pauseOnMouseDown: false
});
</script>
</body>
</html>