How can I put another slide like this without conflicts and the two work?

Asked

Viewed 79 times

1

Javascript 

    <script type="text/javascript">
    function setaImagem(){
        var settings = {
            primeiraImg: function(){
                elemento = document.querySelector("#slider a:first-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            },

            slide: function(){
                elemento = document.querySelector(".ativo");

                if(elemento.nextElementSibling){
                    elemento.nextElementSibling.classList.add("ativo");
                    settings.legenda(elemento.nextElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");
                    settings.primeiraImg();
                }

            },

            proximo: function(){
                clearInterval(intervalo);
                elemento = document.querySelector(".ativo");

                if(elemento.nextElementSibling){
                    elemento.nextElementSibling.classList.add("ativo");
                    settings.legenda(elemento.nextElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");
                    settings.primeiraImg();
                }
                intervalo = setInterval(settings.slide,4000);
            },

            anterior: function(){
                clearInterval(intervalo);
                elemento = document.querySelector(".ativo");

                if(elemento.previousElementSibling){
                    elemento.previousElementSibling.classList.add("ativo");
                    settings.legenda(elemento.previousElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");                     
                    elemento = document.querySelector("a:last-child");
                    elemento.classList.add("ativo");
                    this.legenda(elemento);
                }
                intervalo = setInterval(settings.slide,4000);
            },

            legenda: function(obj){
                var legenda = obj.querySelector("img").getAttribute("alt");
                document.querySelector("figcaption").innerHTML = legenda;
            }

        }

        //chama o slide
        settings.primeiraImg();

        //chama a legenda
        settings.legenda(elemento);

        //chama o slide à um determinado tempo
        var intervalo = setInterval(settings.slide,4000);
        document.querySelector(".next").addEventListener("click",settings.proximo,false);
        document.querySelector(".prev").addEventListener("click",settings.anterior,false);
    }

    window.addEventListener("load",setaImagem,false);
    </script>

HTML

                            <figure>
                                <span class="trs next"></span>
                                <span class="trs prev"></span>

                                <div id="slider">
                                    <a href="#" class="trs"><img class="slide_serv" src="Imagens/Fotos/DSCF1.jpeg" alt="LLavagem" /></a>
                                    <a href="#" class="trs"><img class="slide_serv1" src="Imagens/Fotos/DSCF2.JPG" alt="Manutenção" /></a>
                                    <a href="#" class="trs"><img class="slide_serv1" src="Imagens/Fotos/DSCF3.JPG" alt="Manutenção" /></a>
                                    <a href="#" class="trs"><img class="slide_serv2" src="Imagens/Fotos/DSCF4.JPG" alt="Produtos" /></a>
                                </div>

                                <figcaption></figcaption>
                            </figure>
                        </div>

CSS

        a,img {
        border: none;

    }

    .trs {
        -webkit-transition:all ease-out 0.5s;
        -moz-transition:all ease-out 0.5s;
        -o-transition:all ease-out 0.5s;
        -ms-transition:all ease-out 0.5s;
        transition:all ease-out 0.5s;
    }  

    #slider {
        position: relative; 
        z-index: 1;
        width:33rem;

    }
    #slider a { 
        position: absolute; 
        top: 0;
        left: 0; 
        opacity: 0;
        filter:alpha(opacity=0);
    }
    .slider {
        position: relative; 
        z-index: 1;
        width:33rem;

    }
    #slider a { 
        position: absolute; 
        top: 0;
        left: 0; 
        opacity: 0;
        filter:alpha(opacity=0);
    }
    .ativo {
        opacity: 1!important;
        filter:alpha(opacity=100)!important;
    }

    /*controladores*/
    .next, .prev{
        background-color: black;
        cursor: pointer; 
        opacity: 0;
        filter:alpha(opacity=0); 
        position: absolute; 
        bottom: 40%; 
        width: 43px; 
        height: 43px; 
        z-index: 5;
    }
    .next {
        right: 10px;
    }
    .next:before, .next:after {
        left: 21px;
    }
    .next:before {
        -webkit-transform: rotate(-42deg);
        top: 5px;
    }
    .next:after {
        -webkit-transform: rotate(-132deg);
        top: 19px;
    }
    .next:before,.next:after,.prev:before,.prev:after {content: "";
        height: 20px;
        background: #fff;
        width: 1px;
        position: absolute;
    }
    .prev {
        left: 10px;
    }
    .prev:before,.prev:after {
        left: 18px;
    }
    .prev:before {
        -webkit-transform: rotate(42deg);
        top: 5px;
    }
    .prev:after {
        -webkit-transform: rotate(132deg);
        top: 19px;
    }

    figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
        figure {
        max-width: 937px;
        height: 354px;
        position: relative;
        overflow: hidden;
        margin: 50px auto;
    }

    figcaption {
        opacity: 0;
    }

    .slide_serv{
        width:42rem;
    }
    .slide_serv1{
        top:2rem;
        width:35rem;
    }

    .slide_serv2{
        top:2rem;
        width:33rem;
    }
javascript html css slide

  • My dear your question is very bad in visualization.

  • All right, I think you’ve made an improvement now

  • 1

    Maury, be careful when using possessive pronouns, may embarrass the new contributor and also sound like unprofessional. Thank you

  • 1

    @Luizangusto I made a point of education,I did not mean it. The owner of the question herself did not care. But I will avoid it .

  • 2

    In fact Luiz Augusto is right, I said nothing myself because I don’t want to cause discomfort, this type of pronoun ends up bothering even...

  • I’m sorry @Ana. I edited your question can review and see if it’s good.

  • Ana, copy the entire <figure></figure> object id for a class <figure><div class="slideshow"></div></figure> next in css , and javascript swap #slide for . slideshow (all places) that works.

  • If there’s a problem I’ll go to the computer to make it complete.

  • @Risk you tested?

  • @Maurydeveloper I didn’t test. More if you are working with 1. And she wants two just copy the object, instead of id( unico object ) use a class ( many objects )

  • When I change id by class the slide stops working

  • You must not have made the change in css or js where you have #slide Voce changes to . slideshow HAS Q STITCH

  • Check and tell me. If it doesn’t work do the example on the computer and send you.

  • please take the example

  • I put as an answer, because the size of the content does not fit here.

  • Still with the same problem the second slide does not show and does not pass the images

  • In that case I would have to create a different script for each slide?

Show 12 more comments

1 answer

0

For it to work, it’s important that the css is above the html, and that the javascript is below the html. Getting like this: css-html-javascript

CSS - 01

    <style type="text/css">
        a,img {
            border: none;

        }

        .trs {
            -webkit-transition:all ease-out 0.5s;
            -moz-transition:all ease-out 0.5s;
            -o-transition:all ease-out 0.5s;
            -ms-transition:all ease-out 0.5s;
            transition:all ease-out 0.5s;
        }  

        .slidershow {
            position: relative; 
            z-index: 1;
            width:33rem;

        }
        .slidershow a { 
            position: absolute; 
            top: 0;
            left: 0; 
            opacity: 0;
            filter:alpha(opacity=0);
        }
        .slider {
            position: relative; 
            z-index: 1;
            width:33rem;

        }
        .slidershow a { 
            position: absolute; 
            top: 0;
            left: 0; 
            opacity: 0;
            filter:alpha(opacity=0);
        }
        .ativo {
            opacity: 1!important;
            filter:alpha(opacity=100)!important;
        }

        /*controladores*/
        .next, .prev{
            background-color: black;
            cursor: pointer; 
            opacity: 0;
            filter:alpha(opacity=0); 
            position: absolute; 
            bottom: 40%; 
            width: 43px; 
            height: 43px; 
            z-index: 5;
        }
        .next {
            right: 10px;
        }
        .next:before, .next:after {
            left: 21px;
        }
        .next:before {
            -webkit-transform: rotate(-42deg);
            top: 5px;
        }
        .next:after {
            -webkit-transform: rotate(-132deg);
            top: 19px;
        }
        .next:before,.next:after,.prev:before,.prev:after {content: "";
            height: 20px;
            background: #fff;
            width: 1px;
            position: absolute;
        }
        .prev {
            left: 10px;
        }
        .prev:before,.prev:after {
            left: 18px;
        }
        .prev:before {
            -webkit-transform: rotate(42deg);
            top: 5px;
        }
        .prev:after {
            -webkit-transform: rotate(132deg);
            top: 19px;
        }

        figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
            figure {
            max-width: 937px;
            height: 354px;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
        }

        figcaption {
            opacity: 0;
        }

        .slide_serv{
            width:42rem;
        }
        .slide_serv1{
            top:2rem;
            width:35rem;
        }

        .slide_serv2{
            top:2rem;
            width:33rem;
        }
    </style>

HTML 02

    <figure>
        <span class="trs next"></span>
        <span class="trs prev"></span>

        <div class="slidershow">
            <a href="#" class="trs"><img class="slide_serv" src="1.png" alt="Residencia" /></a>
            <a href="#" class="trs"><img class="slide_serv1" src="2.png" alt="viagem" /></a>
            <a href="#" class="trs"><img class="slide_serv1" src="3.jpg" alt="politica" /></a>
            <a href="#" class="trs"><img class="slide_serv2" src="4.png" alt="saude" /></a>
        </div>

        <figcaption></figcaption>
    </figure>

    <figure>

        <span class="trs next"></span>
        <span class="trs prev"></span>

        <div class="slidershow">
            <a href="#" class="trs"><img class="slide_serv" src="1.png" alt="veiculos" /></a>
            <a href="#" class="trs"><img class="slide_serv1" src="2.png" alt="alimentos" /></a>
            <a href="#" class="trs"><img class="slide_serv1" src="3.jpg" alt="Sapatos" /></a>
            <a href="#" class="trs"><img class="slide_serv2 " src="4.png" alt="Roupas" /></a>
        </div>

       <figcaption></figcaption>
    </figure>

JAVASCRIPT 03

    <script type="text/javascript">
    function setaImagem(){
        var settings = {
            primeiraImg: function(){
                elemento = document.querySelector(".slidershow a:first-child");
                elemento.classList.add("ativo");
                this.legenda(elemento);
            },

            slide: function(){
                elemento = document.querySelector(".ativo");

                if(elemento.nextElementSibling){
                    elemento.nextElementSibling.classList.add("ativo");
                    settings.legenda(elemento.nextElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");
                    settings.primeiraImg();
                }

            },

            proximo: function(){
                clearInterval(intervalo);
                elemento = document.querySelector(".ativo");

                if(elemento.nextElementSibling){
                    elemento.nextElementSibling.classList.add("ativo");
                    settings.legenda(elemento.nextElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");
                    settings.primeiraImg();
                }
                intervalo = setInterval(settings.slide,4000);
            },

            anterior: function(){
                clearInterval(intervalo);
                elemento = document.querySelector(".ativo");

                if(elemento.previousElementSibling){
                    elemento.previousElementSibling.classList.add("ativo");
                    settings.legenda(elemento.previousElementSibling);
                    elemento.classList.remove("ativo");
                }else{
                    elemento.classList.remove("ativo");                     
                    elemento = document.querySelector("a:last-child");
                    elemento.classList.add("ativo");
                    this.legenda(elemento);
                }
                intervalo = setInterval(settings.slide,4000);
            },

            legenda: function(obj){
                var legenda = obj.querySelector("img").getAttribute("alt");
                document.querySelector("figcaption").innerHTML = legenda;
            }

        }

        //chama o slide
        settings.primeiraImg();

        //chama a legenda
        settings.legenda(elemento);

        //chama o slide à um determinado tempo
        var intervalo = setInterval(settings.slide,4000);
        document.querySelector(".next").addEventListener("click",settings.proximo,false);
        document.querySelector(".prev").addEventListener("click",settings.anterior,false);
    }

    window.addEventListener("load",setaImagem,false);
    </script>

Browser other questions tagged javascript html css slide

You are not signed in. Login or sign up in order to post.