O slideshow permite visualizar várias imagens que ficam passando automaticamente no início do site. Para criar um slideshow no template Memphis, disponibilizaremos 2 formas de fazer e seus respectivos códigos fonte.
Este código fonte você precisará inserir no seguinte caminho:
Ao criar um novo módulo é necessário que vc coloque algumas informações importantes:
Agora na Aba Conteúdo HTML será necessário você adicionar um código fonte, clique na lupa e na próxima página clique em Novo.
Adicione um Título para este conteúdo HTML, como por exemplo, o título pode ser: SlideShow.
E no espaço embranco embaixo clique no botão Código Fonte e cole o código que estará abaixo.
<div class="carousel slide" data-ride="carousel" id="slideCarousel">
<ol class="carousel-indicators" style="bottom: -10px !important;">
<li class="active" data-slide-to="0" data-target="#slideCarousel"> </li>
<li data-slide-to="1" data-target="#slideCarousel"> </li>
<li data-slide-to="2" data-target="#slideCarousel"> </li>
<li data-slide-to="3" data-target="#slideCarousel"> </li>
<li data-slide-to="4" data-target="#slideCarousel"> </li>
</ol>
<div class="carousel-inner">
<div class="item active"><img alt="Promoção ITTV" src="/template/memphis/images/img01.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img alt="Turbine sua conexão" src="/template/memphis/images/img02.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img src="/arquivos/img01.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img src="/arquivos/img02.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img src="/arquivos/img03.jpg" style="width:100%; min-height: 155px;" /></div>
</div>
<a class="left carousel-control" data-slide="prev" href="#slideCarousel"><span class="sr-only">Anterior</span></a><a class="right carousel-control" data-slide="next" href="#slideCarousel"><span class="sr-only">Próximo</span></a>
<div class="flex">
<div class="bloco bloco-assinante animated bounceInDown">
<div class="imagem hidden-xs"><img class="img-responsive" src="/template/memphis/images/central.jpg" style="width: 200px;" /></div>
<div class="conteudo">
<h2>Central do<br />
Assinante</h2>
<a class="btn" href="index.php?tipo=minhaconta" id="0">Minha conta</a></div>
</div>
</div>
</div>
Ficando desta maneira:
Salve o código e feche a janela do conteúdo html. e Insira o registro no módulo.
A lógica aqui é, você tem um módulo chamado slideshow e disse que ele será do tipo que tem um html. Então você criou o conteúdo html, agora precisa dizer que este conteúdo html pertence ao módulo slide show.
Então vai ficar assim:
Salve. Agora volte na página módulos e desabilite o módulo Topo.
Agora você precisa carregar as imagens dos seus slides no servidor, serão 3 imagens com os nomes: img01.jpg, img02.jpg e img03.jpg
Essas imagens deverão ser adicionadas na pasta /var/www/template/memphis/images você conseguirá adicioná-las através da ferramente FileZilla, clique aqui para saber mais sobre o FileZilla
Pronto, seu slideshow estará funcionando e ficará parecido com este.
O primeiro passo é desabilitarmos o módulo Topo. Vá em:
Agora acesse:
Copie todo o código abaixo:
<div class="carousel slide" data-ride="carousel" id="slideCarousel">
<ol class="carousel-indicators" style="bottom: -10px !important;">
<li class="active" data-slide-to="0" data-target="#slideCarousel"> </li>
<li data-slide-to="1" data-target="#slideCarousel"> </li>
<li data-slide-to="2" data-target="#slideCarousel"> </li>
</ol>
<div class="carousel-inner">
<div class="item active"><img alt="Promo??o ITTV" src="/arquivos_publicos/img01.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img alt="Turbine sua conex?o" src="/arquivos_publicos/clicks.jpg" style="width:100%; min-height: 155px;" /></div>
<div class="item"><img src="/arquivos_publicos/dmc44.jpg" style="width: 100%; min-height: 155px;" /></div>
</div>
<a class="left carousel-control" data-slide="prev" href="#slideCarousel"><span class="sr-only">Anterior</span></a><a class="right carousel-control" data-slide="next" href="#slideCarousel"><span class="sr-only">Próximo</span></a>
<div class="flex">
<div class="bloco bloco-assinante animated bounceInDown">
<div class="imagem hidden-xs"> </div>
<div class="conteudo">
<h2>Central do<br />
Assinante</h2>
<a class="btn" href="index.php?tipo=minhaconta" id="0">Minha conta</a></div>
</div>
</div>
</div>
<h2 style="text-align: center; padding-top: 3%;"> </h2>
Agora antes da primeira linha cole todo este código e salve. Ficando desta maneira:
Agora adicione as imagens e chame cada uma delas dentro da tag:
<img src="NomeDaImagem">
Para subir as Imagens do seu computador para o servidor utileze o Filezilla