You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
2.1 KiB
41 lines
2.1 KiB
<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 {
|
|
right: 0;
|
|
}
|
|
|
|
carousel prev {
|
|
left: 0;
|
|
}
|
|
</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 {
|
|
position: absolute;
|
|
bottom: 0;
|
|
opacity: 0%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-content: center;
|
|
justify-content: center;
|
|
}
|
|
</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>
|
|
|