Slideshow with UIKit
Image galleries and the old jQuery cycle plugin can do image transitions with different transition types.
I was very thrilled when I first saw jQuery cycle plugin. Nowadays image gallery methods are dime a dozen. I myself wrote one called blackgallery sometime ago using tiny circles as cues.
What is UIKit?
UIKit is very popular web application toolkit and we have seen plenty of samples using uikit already. You only need this in the initial section to get uikit going.
<!DOCTYPE html>
<html>
<head>
<title>Slideshow with UIKit</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</head>
What is an image gallery?
Image gallery or slideshow are popular methods to show multiple items or pictures/images using some CSS animation technique like fade or shake or some such thing.
It is a common way to engage users when they have to sit through multiple images.
Code sample and demo
Slideshow.html
<!DOCTYPE html>
<html>
<head>
<title>Slideshow with UIKit</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.19.2/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<h1 class='uk-flex uk-flex-center uk-text-primary '>Slideshow with UIKit</h1>
<div class="uk-child-width-1-2@m" uk-grid>
<div>
<div class="uk-h3">Slide</div>
<div class="uk-position-relative uk-visible-toggle uk-light"
tabindex="-1" uk-slideshow>
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small
uk-hidden-hover" href uk-slidenav-previous
uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small
uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Fade</div>
<div class="uk-position-relative uk-visible-toggle uk-light"
tabindex="-1" uk-slideshow="animation: fade">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small
uk-hidden-hover" href uk-slidenav-previous
uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small
uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Scale</div>
<div class="uk-position-relative uk-visible-toggle uk-light"
tabindex="-1" uk-slideshow="animation: scale">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small
uk-hidden-hover" href uk-slidenav-previous
uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small
uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Pull</div>
<div class="uk-position-relative uk-visible-toggle uk-light"
tabindex="-1" uk-slideshow="animation: pull">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small
uk-hidden-hover" href uk-slidenav-previous
uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small
uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
<div>
<div class="uk-h3">Push</div>
<div class="uk-position-relative uk-visible-toggle uk-light"
tabindex="-1" uk-slideshow="animation: push">
<ul class="uk-slideshow-items">
<li>
<img src="images/photo.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/dark.jpg" alt="" uk-cover>
</li>
<li>
<img src="images/light.jpg" alt="" uk-cover>
</li>
</ul>
<a class="uk-position-center-left uk-position-small
uk-hidden-hover" href uk-slidenav-previous
uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small
uk-hidden-hover" href uk-slidenav-next uk-slideshow-item="next"></a>
</div>
</div>
</div>
</body>
</html>
It is the line
uk-slideshow="animation: fade" in the line before the list items for images are given in markup that determines the transition type.
One of these days we will check the switcher method of transitioning using uikit.
The images are all available here.
Conclusion
Being able to do image gallery transitions are cool as they have lot of applications. UIKit is able to do this and much more. We have seen multiple UIkit samples before.
Answer
How does svelte do packaging?
$ npm run svelte-package
There is a svelte-package executable under node_modules/.bin directory. This was really useful in my progress-up project. Other tools you have to use rollup but svelte comes with inbuilt tools for it.
Question
How does bitcoin work?
Feedback
What is the point of writing good quality code if you cannot mint money and get rich? SaaS makes this possible with good quality software and tiny bit of marketing.