Inserindo Slideshow

Abaixo é apresentado um slideshow. Fique atento para os id nos elementos input, pois esses IDs são referênciados no for dos itens (li) da lista não ordenada ul. Além disso, são esse elementos citados, que criam as "bolinhas" no slideshow que linka as fotos. Caso tenha mais de 3 fotos basta adicionar um bloco de código, trocar a imagem e o ID do input e adicionar mais um item na lista não ordernada com o ID referenciado no for

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod dui sed ex sodales pulvinar. Quisque vestibulum, ante at luctus cursus.

Nullam venenatis semper nunc, at interdum libero dictum vel. Nunc ac magna mattis, accumsan elit vel, vehicula purus. Curabitur vitae nisi non nulla blandit maximus.

tincidunt. Cras congue dolor sed est aliquam, eget facilisis neque molestie. Donec elit est, semper in commodo sit amet, aliquet ut lectus.

<div class="slider-wrapper">
  <div class="slider">

    <!-- Fique atento para o id -->
    <input type="radio" name="slidershow" id="img-1" class="trigger" checked="checked">
    <div class="slide">
      <div class="slide-figure">
        <img class="slide-img" src="https://cdn.pixabay.com/photo/2016/11/08/05/20/adventure-1807524_960_720.jpg">
        <div class="slide-caption slide-caption-taped">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod dui sed ex sodales pulvinar.
            Quisque vestibulum, ante at luctus cursus.
          </p>
        </div>
      </div>
    </div>

    <!-- Fique atento para o id -->
    <input type="radio" name="slidershow" id="img-2" class="trigger">
    <div class="slide">
      <div class="slide-figure">
        <img class="slide-img" src="https://cdn.pixabay.com/photo/2015/07/27/17/14/switzerland-862870_960_720.jpg">
        <div class="slide-caption slide-caption-taped slide-caption-left">
          <p>
            Nullam venenatis semper nunc, at interdum libero dictum vel. Nunc ac magna mattis, accumsan elit vel,
            vehicula purus. Curabitur vitae nisi non nulla blandit maximus.
          </p>
        </div>
      </div>
    </div>

    <!-- Fique atento para o id -->
    <input type="radio" name="slidershow" id="img-3" class="trigger">
    <div class="slide">
      <div class="slide-figure">
        <img class="slide-img" src="https://cdn.pixabay.com/photo/2016/04/03/02/28/rio-1303951_960_720.jpg">
        <div class="slide-caption slide-caption-taped slide-caption-right">
          <p>
            tincidunt. Cras congue dolor sed est aliquam, eget facilisis neque molestie. Donec elit est, semper in
            commodo sit amet, aliquet ut lectus.
          </p>
        </div>
      </div>
    </div>

  </div>
  <ul class="slider-nav slider-nav">
                                                              <!-- os Ids são referenciados no for -->
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-1"></label>
    </li>
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-2"></label>
    </li>
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-3"></label>
    </li>
  </ul>
</div>
          

Alinhamento dos labels (bolinahs)

Também é possível alinhar os labels (bolinhas) para direita ou para esquerda e o elemento chave para esse alinhamento é a lista não ordenada. Veja os exemplos abaixo:

Alinhamento à direita

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod dui sed ex sodales pulvinar. Quisque vestibulum, ante at luctus cursus.

Nullam venenatis semper nunc, at interdum libero dictum vel. Nunc ac magna mattis, accumsan elit vel, vehicula purus. Curabitur vitae nisi non nulla blandit maximus.

<div class="slider-wrapper">
  <div class="slider">
    <!-- imagem 1 -->
    ...
    <!-- imagem n -->
  </div>
  <ul class="slider-nav slider-nav-right">
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-1"></label>
    </li>
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-2"></label>
    </li>
  </ul>
</div>
          

Alinhamento à esquerda

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod dui sed ex sodales pulvinar. Quisque vestibulum, ante at luctus cursus.

Nullam venenatis semper nunc, at interdum libero dictum vel. Nunc ac magna mattis, accumsan elit vel, vehicula purus. Curabitur vitae nisi non nulla blandit maximus.

<div class="slider-wrapper">
  <div class="slider">
    <!-- imagem 1 -->
    ...
    <!-- imagem n -->
  </div>
  <ul class="slider-nav slider-nav-left">
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-1"></label>
    </li>
    <li class="slider-nav_item">
      <label class="slider-nav_label slider-nav_label-invert slider-nav_label-dot" for="img-2"></label>
    </li>
  </ul>
</div>