CODEWITHSUNDEEP
javascript
ClaudioZ
ClaudioZ

Reputation: 33

Delay in JavaScript slider

I'm coding a little slider with JavaScript and CSS. The slider works, but... in the transition of the last slide to the first I have troubles...

CSS:

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

HTML:

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

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)

}

jsfiddle: https://jsfiddle.net/paw30e8b/

Somebody knows what is happening here? Thanks!

Upvotes: 0

Views: 510

Answers (4)

ClaudioZ
ClaudioZ

Reputation: 33

Well, i'm still wondering what happend here... why the problem is the last slide :(. I know the solution in this case, is a solution that not resolve at all my question. I want to fade out and fade in using opacity and transition. Works well in every slide... the problem is between the last and first slide. ¿Why? I don't know :P

But if you wanna know, I just delete the transition line in .cambiaFoto. Then the active slide disappear and the new fade in.

Upvotes: 0

metarmask
metarmask

Reputation: 1857

Remove position: relative; from the .cambiaFotoActivo rule.

Elements with position: relative will use the natural page order which is next to the other images.

Upvotes: 2

Paolo
Paolo

Reputation: 15827

The CSS should be adjusted this way:

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

Fiddle: https://jsfiddle.net/gmdwv4hg/

Basically you just have to set positioning to absolute on both classes.

Upvotes: 0

theblindprophet
theblindprophet

Reputation: 7927

Change opacity: 0; to display: none; and opacity: 1 to display: inline.

.cambiaFoto{
    transition: all 0.8s;
    position: relative;
    display: none;
}
.cambiaFotoActivo{
    transition: all 0.8s;
    display: inline;
}

Fiddle: https://jsfiddle.net/0ke2q38d/1/

** Don't worry about how the functions are declared and the Jquery, just did that to make an easy example.

Upvotes: 0

Related Questions