Offset in slider with Javascript

Question

Offset in slider with Javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I'm coding a small slider quite simple and I run into a problem that I really do not know what it is.

The slider works well until you try to go back to the first photo, you see the change of positions showing the malfunction and then it happens again correctly, the lag is between the last and the first photo.

In css I have this:

.cambiaFoto {
    opacity: 0;
    transition: all 0.8s;
    position: absolute;
}
.cambiaFotoActivo {
    opacity: 1;
    transition: all 0.8s;
    position: relative;
}

HTML Code:

   <div class="col-sm-5 alinear-der" ng-controller="cambiaFoto">
     <img src="img/productos/foto1.png" alt="" class="responsive-img cambiaFoto cambiaFotoActivo">
     <img src="img/productos/foto2.png" alt="" class="responsive-img cambiaFoto">
     <img src="img/productos/foto3.png" alt="" class="responsive-img cambiaFoto">
   </div>

Javascript code:

function cambiaFotoCtrl($scope){

    function miniSlider(){
        var activo = document.getElementsByClassName('cambiaFotoActivo');
    activo = activo[0]
    siguiente = activo.nextElementSibling
    if (siguiente == null){
        siguiente = activo.parentNode.firstElementChild
    }
    activo.classList.remove('cambiaFotoActivo')
    siguiente.classList.add('cambiaFotoActivo')
    }

    setInterval(miniSlider, 5000)

}

Example in JSfiddle

Does anyone have any idea why there would be a lag?

javascript html css3

asked by ClaudioZ 29.04.2016 в 21:14

source

2 answers

Get a value instead of an object in a SELECT in Angularjs Deleting the last row of a DataGridView

score 1 · Answer 1

1

change "relative" to "absolute" in your css

.cambiaFotoActivo{
    opacity: 1;
    transition: all 0.8s;
    position: absolute;
}

answered by 29.04.2016 в 22:05

score 1 · Answer 2

I solved the problem, it was not the solution I was looking for since I wanted to do fade-out and then fade-in with opacity and transition . The mini slider works quite well on each slide, the problem is between the last and the first. Why? I nosed.

I also solved it in a way I did not want: P. I took out the transition line in class .cambiaFoto . This way it does not fade-out , but disappears completely and then fade-in .