Skip to content

Instantly share code, notes, and snippets.

@omares

omares/demo.css

Last active March 14, 2019 00:13
Show Gist options
  • Save omares/44bd071f8ba3a173522529a19381c7ae to your computer and use it in GitHub Desktop.
Save omares/44bd071f8ba3a173522529a19381c7ae to your computer and use it in GitHub Desktop.
Download ZIP
glidejs/glide demos
Raw
demo.css
body {
background-color: #05070b;
overflow-x: hidden;
margin: 0;
padding: 30px;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
color: white;
}
.heading--h1, .heading--h2, .heading--h3, .heading--h4, .heading--h5, .heading--h6, h1, h2, h3, h4, h5, h6 {
color: #fff;
line-height: 1.25;
font-family: Lato, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 400
}
.heading--h1, h1 {
font-size: 1.77778em
}
.heading--h2, h2 {
font-size: 1.5em
}
.heading--h3, h3 {
font-size: 1em
}
.heading--h4, h4 {
font-size: .88889em
}
.heading--h5, h5 {
font-size: .77778em
}
.heading--h6, h6 {
font-size: .66667em
}
hr {
border-color: #32333f;
margin-top: 3em;
margin-bottom: 3em;
border-width: 1px
}
.example__frame {
padding: 1.5rem;
border: 2px solid hsla(0, 0%, 100%, .1);
border-top-left-radius: .27778em;
border-top-right-radius: .27778em
}
.example__code {
width: 100% !important;
display: none;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
margin: 0 !important
}
.space > * + * {
margin-top: 0
}
.space--medium > * + * {
margin-top: .5625em
}
.slider__frame {
border-radius: .16667em;
text-align: center;
height: 150px;
line-height: 150px;
-webkit-box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .5);
box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .5);
color: #fff;
background: transparent;
font-size: 1em;
font-weight: 900
}
.slider__frame[class*=active] {
-webkit-box-shadow: none;
box-shadow: none;
background: linear-gradient(-45deg, #ed145b, #7b31f4)
}
.slider__arrow {
background-color: #818999;
}
.slider__arrow:hover {
background-color: #ed145b
}
.slider__arrow--next {
right: 1.5rem
}
.slider__arrow--prev {
left: 1.5rem
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Glide Demo</title>
<link rel="stylesheet" href="../dist/css/glide.core.min.css">
<link rel="stylesheet" href="../dist/css/glide.theme.min.css">
<link rel="stylesheet" href="demo.css">
<script src="../dist/glide.js"></script>
</head>
<body>
<h1>Glide Demos</h1>
<div class="example__frame">
<div class="space space--medium">
<h2>Glide slider #1</h2>
<p>Glide as type slider</p>
<div id="glide-demo-slider1" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-slider1', {
type: 'slider',
focusAt: 'center',
perView: 3
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide slider #2</h2>
<p>Glide as type slider with pageable navigation</p>
<div id="glide-demo-slider2" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
<li class="slider__frame glide__slide">10</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="|<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir="|>">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-slider2', {
type: 'slider',
focusAt: 'center',
perView: 3,
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide slider #3</h2>
<p>Glide as type slider with pageable navigation and rewind deactivated</p>
<div id="glide-demo-slider3" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="|<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir="|>">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-slider3', {
type: 'slider',
rewind: false,
// focusAt: 'center',
perView: 2,
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide slider #4</h2>
<p>Glide as type slider with pageable navigation, rewind deactivated and bound activated</p>
<div id="glide-demo-slider4" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="|<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir="|>">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-slider4', {
type: 'slider',
bound: true,
rewind: false,
perView: 4,
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide slider #5</h2>
<p>Glide as type slider with pageable navigation, rewind activated and bound activated</p>
<div id="glide-demo-slider5" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="|<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir="|>">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-slider5', {
type: 'slider',
bound: true,
rewind: true,
perView: 4,
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide carousel #1</h2>
<div id="glide-demo-carousel1" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir=">">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-carousel1', {
type: 'carousel',
focusAt: 'center',
perView: 3
})
glide.mount()
})
</script>
</div>
</div>
<hr />
<div class="example__frame">
<div class="space space--medium">
<h2>Glide carousel #2</h2>
<div id="glide-demo-carousel2" class="slider glide glide--ltr glide--slider glide--swipeable">
<div class="slider__track glide__track" data-glide-el="track">
<ul class="slider__slides glide__slides" style="transition: transform 0ms cubic-bezier(0.165, 0.84, 0.44, 1) 0s; width: 2540px; transform: translate3d(255px, 0px, 0px);">
<li class="slider__frame glide__slide glide__slide--active">0</li>
<li class="slider__frame glide__slide">1</li>
<li class="slider__frame glide__slide">2</li>
<li class="slider__frame glide__slide">3</li>
<li class="slider__frame glide__slide">4</li>
<li class="slider__frame glide__slide">5</li>
<li class="slider__frame glide__slide">6</li>
<li class="slider__frame glide__slide">7</li>
<li class="slider__frame glide__slide">8</li>
<li class="slider__frame glide__slide">9</li>
</ul>
</div>
<div data-glide-el="controls">
<button class="slider__arrow slider__arrow--prev glide__arrow glide__arrow--prev" data-glide-dir="|<">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
</svg>
</button>
<button class="slider__arrow slider__arrow--next glide__arrow glide__arrow--next" data-glide-dir="|>">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
</svg>
</button>
</div>
<div class="slider__bullets glide__bullets" data-glide-el="controls[nav]">
<button class="slider__bullet glide__bullet glide__bullet--active" data-glide-dir="=0"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=1"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=2"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=3"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=4"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=5"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=6"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=7"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=8"></button>
<button class="slider__bullet glide__bullet" data-glide-dir="=9"></button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var glide = new Glide('#glide-demo-carousel2', {
type: 'carousel',
// focusAt: 'center',
perView: 2
})
glide.mount()
})
</script>
</div>
</div>
<hr />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment