Add more than one image in slider

Question

I wanted to put more than one image in this slider. Currently, I can only put one. How do I put more than one image?

HTML code

<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>

CSS code

.banner{
    background: url(../images/1.jpg) no-repeat;
    background-size: cover;
    width:100%;
    min-height: 460px;
    position: relative;
}

Answer 1

Without seeing how it is, I will send in a way that I think would be easier the implementation:

<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>

After that, with Javascript DOM just use the code

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

to select the desired item and then

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

or also

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

To change link is

variavel.href = "endereço desejado";

or also

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

To change the image is

variavel.src = "endereço desejado";

or also

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

Basically, you can use the variable by storing the ID and modifying the attribute by placing it right after a point:

variavel.atributo = valor;

even, can be used to insert some that has not been declared in html. For example, if you put the code I put to change any attribute, for clarification, title in the selected elements, as none of them has this attribute in html, after the code is processed in Javascript, the attribute will be inserted.

Other than that, just look for how to change these attribute values after a certain time, that just do not command agr pq do not remember how it does, kkkk. But it is not difficult, just look for that on many websites and forums have examples.

I hope I helped, even though the explanation was long. Abç.

Answer 2

That’s exactly what Murilo Gamboa commented.

The desired image of the slider should be part of the list items, which in this code, as if it were another element of the "banner-text" class, however, with the desired image as background. Or just a tag for image insertion inside of a list element (with overlaid text).

Now to change the images and text to the slider, you have to use Javascript and can be basically two ways:

1. Only one item in the list is visible and after a certain time, you access the view css properties to change which one will be visible instead of the previous one, hiding the previous one.

2. Modify after a certain fixed time the Divs with the contents of the list items, but in this case I recommend using an id for each div, to facilitate the selection.

I hope it helped.

Abç.