Write the notes for Carousel.

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

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

Loading…
Cancel
Save