Adding more than one slider image

Navigation
0

I wanted to put more than one image in this slider. I currently only have 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;
}
    
asked by anonymous 08.08.2017 / 03:25

2 answers

0

That's exactly what Murilo Gambôa commented on.

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, but with the desired image as the background. Or just a tag for inserting an image inside an element of the list (with text overlaid).

Now to make the change of the images and the text to the slider, you have to use JavaScript and can basically be in two ways:

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

  • I hope you have helped.

    Abc.

        
    • 08.08.2017 / 04:45
    0

    Without seeing how it is, I'll send it in a way that I think would be easier to implement: 

    <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 you just need to use the 

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

    to select the desired element and then 

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

    or 

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

    To change link is 

    variavel.href = "endereço desejado";

    or 

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

    To change the image is 

    variavel.src = "endereço desejado";

    or 

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

    Basically, you can use the variable storing the ID and modify the attribute by putting it next after a period: 

    variavel.atributo = valor;

    In addition, it can be used to insert some that has not been declared in html. For example, if you put the code that I put to change any attribute, for clarification, title in the elements selected, as none of them has this attribute in html, after being processed the code in JavaScript, the attribute will be inserted. / p>

    Otherwise, just look for how to change these attribute values after a certain time, which I just do not say agr because I do not remember how it does, kkkk. But it's not difficult, just look for that on many websites and forums have examples.

    I hope I have helped, although the explanation has been long. Abc.

        
    10.08.2017 / 05:22
    How to remove duplicate dates in sql? Problem with angle selection