0

Queria colocar mais de uma imagem neste slider. Atualmente, consigo colocar apenas uma. Como faço para colocar mais de uma imagem?

Código HTML

<div class="banner">
        <div class="container">
            <div  id="top" class="callbacks_container">
            <ul class="rslides" id="slider">
                <li>

                        <div class="banner-text">
                            <h3>Camisa Doutor Estranho  </h3>
                        <p>R$50,00 a vista</p>
                        <p>ou em 5x de R$10,00 sem juros</p>
                        <a href="single.html">Comprar</a>
                        </div>

                </li>

                <li>

                        <div class="banner-text">
                            <h3>There are many variations </h3>
                        <p>Contrary to popular belief,  Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor .</p>
                                                <a href="single.html">Learn More</a>

                        </div>

                </li>

                <li>
                        <div class="banner-text">
                            <h3>Sed ut perspiciatis unde omnis</h3>
                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor .</p>
                                <a href="single.html">Learn More</a>

                        </div>

                </li>
            </ul>
        </div>

    </div>
</div>

Código CSS

.banner{
    background: url(../images/1.jpg) no-repeat;
    background-size: cover;
    width:100%;
    min-height: 460px;
    position: relative;
}
3
  • no caso, você precisa tirar o background: url(../images/1.jpg) no-repeat;, e coloca-lo dentro da propriedade style="" na tag <li> Commented 8/08/2017 às 2:13
  • ficaria algo como <li style="background: url(../images/1.jpg);"> Commented 8/08/2017 às 2:13
  • fazendo isso, coloque cada uma das imagens desejadas nas url's, assim quando o slider trouxer o próximo conteúdo, a imagem roda junto Commented 8/08/2017 às 2:14

2 Respostas 2

0

É exatamente o que o Murilo Gambôa comentou.

A imagem desejada do slider deve fazer parte dos itens da lista, que nesse código, como se fosse mais um elemento da classe "banner-text", porém, com a imagem desejada como fundo. Ou apenas uma tag para inserção de imagem dentro da de um elemento da lista (com o texto sobreposto).

Agora pra fazer a mudança das imagens e do texto para o slider, tem que usar JavaScript e pode ser basicamente de duas formas:

  1. Apenas um item da lista fica visível e depois de um determinado tempo, tu acessa as propriedades do css de visualização pra alterar qual vai ficar visível no lugar do anterior, ocultando o anterior.

  2. Modificar após um determinado tempo fixo as divs com o conteúdo dos itens da lista, mas nesse caso eu recomendo usar um id pra cada div, pra facilitar a seleção.

Espero que tenha ajudado.

Abç.

2
  • Então no caso como ficaria isso dentro do códico que mencionei acima ? Commented 9/08/2017 às 0:05
  • Tu pode mandar uma imagem de como tá? Ficaria mais fácil de entender como tu qr fazer Commented 10/08/2017 às 2:46
0

Sem ver como tá, vou mandar de um jeito que eu ache que ficaria mais fácil a implementação:

<div class="banner">
    <div class="container">
        <div  id="top" class="callbacks_container">
            <div id="slider">
                <img id="sliderImage" src="(../images/1.jpg" >
                <h3 id="sliderHeader">Camisa Doutor Estranho  </h3>
                <p id="sliderText1">R$50,00 a vista</p>
                <p id="sliderText2">ou em 5x de R$10,00 sem juros</p>
                <a id="sliderText3" href="single.html">Comprar</a>
            </div>
        </div>
    </div>
</div>

Após isso, com DOM do JavaScript basta usar o código

var variavel = document.getElementById("id desejado");

para selecionar o elemento desejado e em seguida

variavel.innerHTML = "texto que substituirá o anterior";

ou também

var novoTexto = "texto que substituirá o anterior";
variavel.innerHTML = novoTexto;

Pra mudar link fica

variavel.href = "endereço desejado";

ou também

var novoLink = "endereço do novo link";
variavel.href = novoLink;

Pra mudar a imagem fica

variavel.src = "endereço desejado";

ou também

var novaImagem = "endereço da nova imagem";
variavel.src = novaImagem;

Basicamente, tu pode usar a variável armazenando o ID e modificar o atributo colocando ele logo em seguida após um ponto:

variavel.atributo = valor;

inclusive, pode ser usado pra inserir algum que não tenha sido declarado no html. Por exemplo, se tu colocar o código que eu coloquei pra mudar um atributo qualquer, pra questão de esclarecimento, title nos elementos selecionados, como nenhum deles possui esse atributo no html, após ser processado o código em JavaScript, o atributo será inserido.

Fora isso, basta procurar como fazer pra mudar esses valores de atributos após um determinado tempo, que só não mando agr pq não lembro como faz, kkkk. Mas não é difícil, basta procurar que em muitos sites e fóruns têm exemplos.

Espero ter ajudado, apesar da explicação ter sido longa. Abç.

1
  • Vlw vc ajudou mt, agradecido por sua ajuda!! Commented 11/08/2017 às 1:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .