parent
b7ff702bbd
commit
c0326977cd
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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 { |
||||
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> |
||||
Loading…
Reference in new issue