Skip to content
Snippets Groups Projects
Commit e3a322c2 authored by Marina Dali's avatar Marina Dali
Browse files

feat: #301 breakpoints monster-slider

parent 72f10d1d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
development/config/import.mjs
+ 3
− 3
View file @ e3a322c2
export const projectRoot = "/home/vs/workspaces/oss/monster/monster";
export const sourcePath = "/home/vs/workspaces/oss/monster/monster/source";
export const developmentPath = "/home/vs/workspaces/oss/monster/monster/development";
export const projectRoot = "/home/md/projekte/workspaces/libraries/monster";
export const sourcePath = "/home/md/projekte/workspaces/libraries/monster/source";
export const developmentPath = "/home/md/projekte/workspaces/libraries/monster/development";
export const pnpxBin = "/nix/store/sxw7i3pyw8v1ycw2sph0zq2byh1prrwm-nodejs-20.18.1/bin/npx";
export const nodeBin = "/nix/store/057dsl3wh2q8syy5sis0x9y5dksl63mv-nodejs-23.8.0/bin/node";
export const license = "/**" + "\n" +
......
development/issues/closed/239.html
+ 3
− 3
View file @ e3a322c2
......@@ -30,13 +30,13 @@
<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=";background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<div class="slide" style="background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
</div>
<div class="slide" style=";background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div class="slide" style="background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
</div>
<div class="slide" style=";background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div class="slide" style="background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</div>
</monster-slider>
......
development/issues/open/301.html 0 → 100644
+ 53
− 0
View file @ e3a322c2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slider view more slides #239</title>
<script src="./239.mjs" type="module"></script>
</head>
<body>
<h1>Slider view more slides #239</h1>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/239">Issue #239</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main style="width: 1200px">
<div class="container">
<monster-slider style="height:360px"
data-monster-option-slides-0="1"
data-monster-option-slides-600="2"
data-monster-option-slides-1200="3"
data-monster-option-slides-1800="4">
<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>
<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="background-color: var(--monster-bg-color-primary-2); color: var(--monster-color-primary-2)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 1</div>
</div>
<div class="slide" style="background-color: var(--monster-bg-color-secondary-3); color: var(--monster-color-secondary-3)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 2</div>
</div>
<div class="slide" style="background-color: var(--monster-bg-color-primary-4); color: var(--monster-color-primary-4)">
<div style="align-self: center;display: flex;width: 100%;justify-content: center;font-size: 3rem;">SLIDE 3</div>
</div>
</monster-slider>
</div>
</main>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment