<script>
// See https://github.com/buhrmi/thumb-ui for more examples
import {Swipeable, Preload, Screen, Controls} from 'thumb-ui'
let images = [
{url: 'https://i.imgur.com/WSNVjAp.jpg', name: 'Lamborghini Veneno'},
{url: 'https://i.imgur.com/ktLr47i.jpg', name: 'Zenvo TS1'},
{url: 'https://i.imgur.com/IBPaYOH.jpg', name: 'McLaren P1 LM'},
{url: 'https://i.imgur.com/E97i8c8.jpg', name: 'LaFerrari FXX K'},
{url: 'https://i.imgur.com/eurkXGH.jpg', name: 'Bugatti Chiron'},
{url: 'https://i.imgur.com/1BdAJno.jpg', name: 'Lamborghini Centenario'},
{url: 'https://i.imgur.com/0AZOG1D.jpg', name: 'Aston Martin One-77'},
{url: 'https://i.imgur.com/qlgU0n9.jpg', name: 'Pagani Huayra'},
{url: 'https://i.imgur.com/Qol6aNw.jpg', name: 'W Motors Lykan Hypersport'}
]
let current = 3
</script>
<div class="container">
<Swipeable bind:current>
<div class="images">
{#each images as image}
<Screen>
<Preload url={image.url} let:src>
<div class="img" style="background-image: url({src})"/>
</Preload>
</Screen>
{/each}
</div>
<Controls />
</Swipeable>
</div>
<style>
.images {
width: 100%;