Primeiramente, esse slider não foi feito por mim, ele é do site Codrops, mais conhecido como Tympanus. Eu só estou traduzindo o tutorial e explicando direitinho como se faz, mas se caso usar o tutorial, credite ao Single Themes. Obrigada <3
Visualize o slider clicando aqui.
Abra seu customize, e coloque no css do seu theme esses códigos.
No próprio código eu explico algumas coisas, para vocês, como, mudar a cor dos links e outros, leia com atenção para não ficar feio o seu slider!
Depois de <body> coloque isso:
<section class="cr-container">
<input name="radio-set-1" type="radio" class="cr-selector-img-1" checked/>
<input name="radio-set-1" type="radio" class="cr-selector-img-2" />
<label for="select-img-2" class="cr-label-img-2">2</label>
<input name="radio-set-1" type="radio" class="cr-selector-img-3" />
<label for="select-img-3" class="cr-label-img-3">3</label>
<input name="radio-set-1" type="radio" class="cr-selector-img-4" />
<label for="select-img-4" class="cr-label-img-4">4</label>
<div class="clr"></div>
<div class="cr-bgimg">
<div>
<span>Slide 1 - Image 1</span>
<span>Slide 1 - Image 2</span>
<span>Slide 1 - Image 3</span>
<span>Slide 1 - Image 4</span>
</div>
<div>
<span>Slide 2 - Image 1</span>
<span>Slide 2 - Image 2</span>
<span>Slide 2 - Image 3</span>
<span>Slide 2 - Image 4</span>
</div>
<div>
<span>Slide 3 - Image 1</span>
<span>Slide 3 - Image 2</span>
<span>Slide 3 - Image 3</span>
<span>Slide 3 - Image 4</span>
</div>
<div>
<span>Slide 4 - Image 1</span>
<span>Slide 4 - Image 2</span>
<span>Slide 4 - Image 3</span>
<span>Slide 4 - Image 4</span>
</div>
</div>
<div class="cr-titles">
<h3><span>Titulo para Imagem 1</span><span>Pequena descrição 1</span></h3>
<h3><span>Titulo para Imagem 2</span><span>Pequena descrição 2</span></h3>
<h3><span>Titulo para Imagem 3</span><span>Pequena descrição 3</span></h3>
<h3><span>Titulo para Imagem 4</span><span>Pequena descrição 4</span></h3>
</div>
Notas, leia é importante:
Este slide foi projetado com uma largura de 600x400 (em pixel) de altura. Só modifique o tamanho se você souber mexer o suficiente com css, para que não ocorra nenhum erro.
As imagens do slide possuem um tamanho máximo de 600×400. Crie imagens deste tamanho, ou se você for mudar o tamanho lá no seu css, faça as imagens do tamanho que você colocou.
Esse slide não suporta links e nem muitas imagens, ele serve para representar o conteúdo do seu tumblr/blog, não para representar postagens.
Espero que você credite esse tutorial, para que não ocorra nenhuma briga, e não repasse o tutorial, tenha um pingo de decência e não faça bobagens ^-^