<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new slieder control #226</title>
<script src="./226.mjs" type="module"></script>
<style>
:not(:defined) {
display: none;
}
.slide {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
monster-slider::part(prev) {
}
monster-slider::part(control) {
}
.container {
padding: 10px;
width: 1200px;
height: 600px;
background-color: #cccccc;
box-sizing: border-box;
overflow: hidden;
}
</style>
</head>
<body>
<h1>new slieder control #226</h1>
<p>user aborted</p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/226">Issue #226</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<div class="container">
<monster-slider>
<div slot="prev"><svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-left-square-fill" viewBox="0 0 16 16">
<path d="M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1"/>
</svg></div>
<div class="slide" style="display:none;background-color: #ff6666;width:50px">
<h1>SLIDE 1</h1>
</div>
<div class="slide" style="background-color: #ff6666;width:50px">
<h1>SLIDE 1 a</h1>
</div>
<div class="slide" style="background-color: #66ff66;width:50px;"><svg xmlns="http://www.w3.org/2000/svg"
width="467" height="462">
<rect x="80" y="60" width="250" height="250" rx="20"
style="fill:#ff0000; stroke:#000000;stroke-width:2px;" />
<rect x="140" y="120" width="250" height="250" rx="40"
style="fill:#0000ff; stroke:#000000; stroke-width:2px;
fill-opacity:0.7;" />
</svg></div>
<div class="slide" style="background-color: #6666ff;width:50px;">
<h1>SLIDE 3</h1>
</div>
<div slot="next">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-arrow-right-square-fill" viewBox="0 0 16 16">
<path d="M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1"/>
</svg>
</div>
</monster-slider>
</div>
</main>
</body>
</html>