Skip to content

Instantly share code, notes, and snippets.

@felds

felds/demo-lightslider.html

Created April 17, 2016 03:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save felds/6fbe50b7dd5b090807e3f3bf6c4ec3ac to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save felds/6fbe50b7dd5b090807e3f3bf6c4ec3ac to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo-lightslider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lightslider</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/css/lightslider.min.css" rel="stylesheet" />
<style>
.container {
margin: 2rem auto;
width: 30rem;
}
.gallery {
background: whitesmoke;
}
.gallery li {
display: flex;
min-height: 100%;
align-items: center;
justify-content: center;
}
.gallery li img {
max-width: 100%;
max-height: 100%;
}
</style>
</head>
<body>
<div class="container">
<ul class="gallery">
<li data-thumb="https://unsplash.it/200/200?image=811"><img src="https://unsplash.it/200/300?image=811" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=802"><img src="https://unsplash.it/200/300?image=802" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=803"><img src="https://unsplash.it/200/300?image=803" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=804"><img src="https://unsplash.it/400/300?image=804" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=805"><img src="https://unsplash.it/600/400?image=805" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=806"><img src="https://unsplash.it/200/300?image=806" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=807"><img src="https://unsplash.it/700/300?image=807" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=808"><img src="https://unsplash.it/200/300?image=808" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=810"><img src="https://unsplash.it/200/300?image=810" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=812"><img src="https://unsplash.it/200/300?image=812" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=813"><img src="https://unsplash.it/200/300?image=813" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=814"><img src="https://unsplash.it/400/300?image=814" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=815"><img src="https://unsplash.it/600/400?image=815" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=816"><img src="https://unsplash.it/200/300?image=816" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=817"><img src="https://unsplash.it/700/300?image=817" alt="" /></li>
<li data-thumb="https://unsplash.it/200/200?image=818"><img src="https://unsplash.it/200/300?image=818" alt="" /></li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.5/js/lightslider.min.js"></script>
<script>
jQuery(function ($) {
$('.gallery').lightSlider({
gallery: true,
item: 1,
thumbItem: 9,
slideMargin: 0,
enableDrag: false,
currentPagerPosition: 'left',
loop: true,
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment