Skip to content

Instantly share code, notes, and snippets.

/index.html

Created March 29, 2016 07:42
Show Gist options
  • Save anonymous/4d934f322689581debce to your computer and use it in GitHub Desktop.
Save anonymous/4d934f322689581debce to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin uikit slideshow + counts // source http://jsbin.com/pewuwi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="uikit slideshow + counts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/components/slideshow.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.almost-flat.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/slideshow.almost-flat.css" type="text/css" />
<title>JS Bin</title>
<style id="jsbin-css">
.tm-slideshow-nav a {
display: inline-block;
border: 2px solid #000;
padding: 22px 18px 20px;
line-height: normal;
margin: 0 30px;
}
</style>
</head>
<body>
<div class="uk-position-relative tm-slideshow" data-uk-slideshow="{animation: 'scroll', autoplay:true}">
<div class="tm-slideshow-nav">
<a href="" data-uk-slideshow-item="previous" class="prev"> </a>
<p><span class="choose tm-slider-current">1</span> / <span class="all tm-slider-total">6</span> </p>
<a href="" data-uk-slideshow-item="next" class="next"> </a>
</div>
<ul class="uk-slideshow">
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1&w=350&h=150" width="" height="" alt=""></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=2&w=350&h=150" width="" height="" alt=""></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=3&w=350&h=150" width="" height="" alt=""></li>
</ul>
</div>
<script id="jsbin-javascript">
(function($) {
"use strict";
UIkit.on('init.uk.component', function(e, name, component) {
if (name === 'slideshow') {
component.find('.tm-slider-total').text(component.slidesCount);
}
});
UIkit.on('show.uk.slideshow', function(e, slide) {
$(e.target).find('.tm-slider-current').text($(slide).index() + 1);
});
}(jQuery));
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="uikit slideshow + counts">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"><\/script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/uikit.min.js"><\/script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/js/components/slideshow.js"><\/script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/uikit.almost-flat.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.25.0/css/components/slideshow.almost-flat.css" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<div class="uk-position-relative tm-slideshow" data-uk-slideshow="{animation: 'scroll', autoplay:true}">
<div class="tm-slideshow-nav">
<a href="" data-uk-slideshow-item="previous" class="prev"> </a>
<p><span class="choose tm-slider-current">1</span> / <span class="all tm-slider-total">6</span> </p>
<a href="" data-uk-slideshow-item="next" class="next"> </a>
</div>
<ul class="uk-slideshow">
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1&w=350&h=150" width="" height="" alt=""></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=2&w=350&h=150" width="" height="" alt=""></li>
<li><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=3&w=350&h=150" width="" height="" alt=""></li>
</ul>
</div>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">.tm-slideshow-nav a {
display: inline-block;
border: 2px solid #000;
padding: 22px 18px 20px;
line-height: normal;
margin: 0 30px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">(function($) {
"use strict";
UIkit.on('init.uk.component', function(e, name, component) {
if (name === 'slideshow') {
component.find('.tm-slider-total').text(component.slidesCount);
}
});
UIkit.on('show.uk.slideshow', function(e, slide) {
$(e.target).find('.tm-slider-current').text($(slide).index() + 1);
});
}(jQuery));
</script></body>
</html>
Raw
jsbin.pewuwi.css
.tm-slideshow-nav a {
display: inline-block;
border: 2px solid #000;
padding: 22px 18px 20px;
line-height: normal;
margin: 0 30px;
}
Raw
jsbin.pewuwi.js
(function($) {
"use strict";
UIkit.on('init.uk.component', function(e, name, component) {
if (name === 'slideshow') {
component.find('.tm-slider-total').text(component.slidesCount);
}
});
UIkit.on('show.uk.slideshow', function(e, slide) {
$(e.target).find('.tm-slider-current').text($(slide).index() + 1);
});
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment