Write the notes for Carousel.

master
Zed A. Shaw 2 years ago
parent b7ff702bbd
commit c0326977cd
  1. 4
      public/build/bundle.css
  2. 76
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 2
      public/code/Carousel.css
  5. 41
      public/code/Carousel.notes.html
  6. 2
      src/demos/Carousel.svelte
  7. 2
      src/thumbs/Carousel.svelte

File diff suppressed because one or more lines are too long

@ -9069,31 +9069,31 @@ var app = (function () {
t8 = space();
next = element("next");
create_component(icon1.$$.fragment);
add_location(h1, file$g, 75, 2, 1217);
add_location(h1, file$g, 73, 2, 1159);
attr_dev(img0, "alt", "Stock photo");
if (img0.src !== (img0_src_value = holder(16 * 40, 9 * 40))) attr_dev(img0, "src", img0_src_value);
attr_dev(img0, "class", "svelte-12uwa5s");
add_location(img0, file$g, 79, 6, 1283);
attr_dev(figcaption0, "class", "svelte-12uwa5s");
add_location(figcaption0, file$g, 80, 6, 1346);
attr_dev(figure0, "class", "active svelte-12uwa5s");
add_location(figure0, file$g, 78, 4, 1253);
attr_dev(img0, "class", "svelte-15us2jh");
add_location(img0, file$g, 77, 6, 1225);
attr_dev(figcaption0, "class", "svelte-15us2jh");
add_location(figcaption0, file$g, 78, 6, 1288);
attr_dev(figure0, "class", "active svelte-15us2jh");
add_location(figure0, file$g, 76, 4, 1195);
attr_dev(img1, "alt", "Stock photo");
if (img1.src !== (img1_src_value = holder(16 * 40, 9 * 40))) attr_dev(img1, "src", img1_src_value);
attr_dev(img1, "class", "svelte-12uwa5s");
add_location(img1, file$g, 85, 6, 1467);
attr_dev(figcaption1, "class", "svelte-12uwa5s");
add_location(figcaption1, file$g, 86, 6, 1530);
attr_dev(figure1, "class", "svelte-12uwa5s");
add_location(figure1, file$g, 84, 4, 1452);
attr_dev(prev, "class", "svelte-12uwa5s");
add_location(prev, file$g, 88, 4, 1582);
attr_dev(next, "class", "svelte-12uwa5s");
add_location(next, file$g, 89, 4, 1636);
attr_dev(carousel, "class", "svelte-12uwa5s");
add_location(carousel, file$g, 77, 2, 1238);
attr_dev(content, "class", "svelte-12uwa5s");
add_location(content, file$g, 74, 0, 1205);
attr_dev(img1, "class", "svelte-15us2jh");
add_location(img1, file$g, 83, 6, 1409);
attr_dev(figcaption1, "class", "svelte-15us2jh");
add_location(figcaption1, file$g, 84, 6, 1472);
attr_dev(figure1, "class", "svelte-15us2jh");
add_location(figure1, file$g, 82, 4, 1394);
attr_dev(prev, "class", "svelte-15us2jh");
add_location(prev, file$g, 86, 4, 1524);
attr_dev(next, "class", "svelte-15us2jh");
add_location(next, file$g, 87, 4, 1578);
attr_dev(carousel, "class", "svelte-15us2jh");
add_location(carousel, file$g, 75, 2, 1180);
attr_dev(content, "class", "svelte-15us2jh");
add_location(content, file$g, 72, 0, 1147);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@ -16008,7 +16008,7 @@ var app = (function () {
return child_ctx;
}
// (83:4) {#each images as image}
// (81:4) {#each images as image}
function create_each_block$b(ctx) {
let figure;
let img;
@ -16029,13 +16029,13 @@ var app = (function () {
t2 = text(t2_value);
attr_dev(img, "alt", "Stock photo");
if (img.src !== (img_src_value = holder(16 * 40, 9 * 40))) attr_dev(img, "src", img_src_value);
attr_dev(img, "class", "svelte-12uwa5s");
add_location(img, file$z, 84, 8, 1462);
attr_dev(figcaption, "class", "svelte-12uwa5s");
add_location(figcaption, file$z, 85, 8, 1527);
attr_dev(figure, "class", "svelte-12uwa5s");
attr_dev(img, "class", "svelte-15us2jh");
add_location(img, file$z, 82, 8, 1404);
attr_dev(figcaption, "class", "svelte-15us2jh");
add_location(figcaption, file$z, 83, 8, 1469);
attr_dev(figure, "class", "svelte-15us2jh");
toggle_class(figure, "active", /*image*/ ctx[1] === 1);
add_location(figure, file$z, 83, 6, 1416);
add_location(figure, file$z, 81, 6, 1358);
},
m: function mount(target, anchor) {
insert_dev(target, figure, anchor);
@ -16059,7 +16059,7 @@ var app = (function () {
block,
id: create_each_block$b.name,
type: "each",
source: "(83:4) {#each images as image}",
source: "(81:4) {#each images as image}",
ctx
});
@ -16126,15 +16126,15 @@ var app = (function () {
create_component(icon1.$$.fragment);
t4 = space();
create_component(codeview.$$.fragment);
add_location(h1, file$z, 79, 2, 1350);
attr_dev(prev, "class", "svelte-12uwa5s");
add_location(prev, file$z, 88, 4, 1600);
attr_dev(next, "class", "svelte-12uwa5s");
add_location(next, file$z, 89, 4, 1654);
attr_dev(carousel, "class", "svelte-12uwa5s");
add_location(carousel, file$z, 81, 2, 1371);
attr_dev(content, "class", "svelte-12uwa5s");
add_location(content, file$z, 78, 0, 1338);
add_location(h1, file$z, 77, 2, 1292);
attr_dev(prev, "class", "svelte-15us2jh");
add_location(prev, file$z, 86, 4, 1542);
attr_dev(next, "class", "svelte-15us2jh");
add_location(next, file$z, 87, 4, 1596);
attr_dev(carousel, "class", "svelte-15us2jh");
add_location(carousel, file$z, 79, 2, 1313);
attr_dev(content, "class", "svelte-15us2jh");
add_location(content, file$z, 76, 0, 1280);
},
l: function claim(nodes) {
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");

File diff suppressed because one or more lines are too long

@ -7,7 +7,6 @@ content {
}
carousel {
outline: 2px solid green;
position: relative;
}
@ -19,7 +18,6 @@ carousel figure.active {
display: flex;
position: relative;
flex-direction: column;
outline: 1px solid red;
}
carousel figure img {

@ -0,0 +1,41 @@
<p>This is a simple example of doing multiple overlays using the <b>position:absolute</b> trick. You set the outer element <b>carousel</b> to <b>position:relative</b>, then when you set <b>position:absolute</b> on the internal <b>figure</b> elements. When you do that you can set the <b>top/bottom/left/right</b> to 0 and each figure will fill and cover each other.
Finally, you set all of the inactive <b>figure</b> to <b>display:none</b> to remove it from the display, and set the active <b>figure</b> to <b>display:flex</b>.</p>
<p>The <b>next/prev</b> tags are using a similar setting, but they are set to the far left and right using this:</p>
<pre>
<code class="language-css">
carousel next &lbrace;
right: 0;
&rbrace;
carousel prev &lbrace;
left: 0;
&rbrace;
</code>
</pre>
<p>This also demonstrates how to simplify your CSS by removing duplication. The common aspects of the <b>next/prev</b> buttons are placed in a single CSS stanza:</p>
<pre>
<code class="language-css">
carousel next,prev &lbrace;
position: absolute;
bottom: 0;
opacity: 0%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
&rbrace;
</code>
</pre>
<p>This configures the <b>next/prev</b> buttons with all of the common features by using the <b>, (comma)</b> which works as an "or" operation, meaning "this applies to next or prev inside carousel. Then you can set their positions after with a few lines more.</p>
<p>The last part to study is how the <b>figcaption</b> is placed at the bottom for each image. It's using the same setup as the <b>next/prev</b>.</p>
<h2>Using Opacity</h2>
<p>You can use <b>opacity: 0%</b> to make something invisible instead of using <b>display:none</b> or <b>visibility:hidden</b>. The only advantage of <b>opacity</b> over <b>visibility:hidden</b> seems to be that <b>visibility</b> removes the element from accessibility so screen readers won't recognize it. The issue with <b>display:none</b> is it removes the element completely so that it doesn't take up space, which is what we want with the figures but not the next/prev buttons.
</p>

@ -17,7 +17,6 @@
}
carousel {
outline: 2px solid green;
position: relative;
}
@ -29,7 +28,6 @@
display: flex;
position: relative;
flex-direction: column;
outline: 1px solid red;
}
carousel figure img {

@ -13,7 +13,6 @@
}
carousel {
outline: 2px solid green;
position: relative;
}
@ -25,7 +24,6 @@
display: flex;
position: relative;
flex-direction: column;
outline: 1px solid red;
}
carousel figure img {

Loading…
Cancel
Save