Smooth Transition in Image Slider

Asked

Viewed 3,057 times

-1

I have a div that displays a series of images in its background:

<div id="header-slider">

   ...   

</div>

For the images to loop I did the following code in Jquery:

var imagens = 
[
    'url(imagem01.jpg)',
    'url(imagem02.jpg)',
    'url(imagem03.jpg)',
    'url(imagem04.jpg)',
    'url(imagem05.jpg)',
],imgindex = 0, $header = $('#header-slider');

setInterval(function()
    { 
        $header
        .css('background-image', imagens[imgindex++ % imagens.length]);
    }, 3000);

Now I need this transition to be smooth. There are several slider solutions that use img elements but I haven’t found one that handles the 'background-image' attribute. How can I do that?

Code

3 answers

2

To do this, try to create a div within the header-slider which must be the same size as the header-slider.

After that, you can play with the backgrounds since you can put two at the same time.

Here comes an example:

var imagens = 
[
    'url(imagem01.jpg)',
    'url(imagem02.jpg)',
    'url(imagem03.jpg)',
    'url(imagem04.jpg)',
    'url(imagem05.jpg)',
],imgindex = 0, div1 = $('#header-slider'), div2 = $('#header-slider2');
div2.css('background-image', fundos[0]);
setInterval(function() {
    div1.css('background-image', div2.css('background-image'));
    div2.fadeOut().css('background-image', imagens[imgindex++ % imagens.length]).fadeIn(1000);
}, 3000);

HTML

<div id="header-slider">
    <div id="header-slider2"></div>
</div>

CSS

#header-slider {
    position: relative;
}
#header-slider2 {
    position: absolute;
    top: 0px; left: 0px;
}

And a test.

0

    <!doctype html>
    <html lang="pt-br">
    <head>
    <title>Slide
    </title>
    <style>
    input[type="text"]{
    -webkit-voice-volume: loud;
    }
    .image {
        position: absolute;
        margin-left: auto;

        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        -ms-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        align: center;
    }

    .Number {
        top: 5px;
        position: relative;
        display: inline;
        margin-left: 60px;
        height: 55px;
        width: 55px;
        padding: 5px;
        background-color: #999999;
        z-index: 6;
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        color: #ffffff;
        font-family: 'Prosto One', cursive;

        -webkit-box-shadow: 0px 0px 5px #000000;
        box-shadow: 0px 0px 5px #000000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        opacity: 0.8;

        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }

    .Number:hover {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
    }

    .Number:active{
        top: 7px;
    }

    .pp{
    font-family: 'Prosto One', cursive;
    text-decoration: none;
    font-size: 100px;
    color: #fff;
    line-height: 400px;
    position: absolute;
    top: 0px;
    z-index: 100;
    opacity: 0.8;
    -webkit-transition: all 0.5s;
    }
    .pp:hover{
    opacity: 1;
    }
    </style>
    <script>
    function prev(n){
        if(n == '1'){
            document.getElementById('img1').style.opacity = "1";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('5')";
            document.getElementById('two').href = "javascript:prev('2')";
        }if(n == '2'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "1";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('1')";
            document.getElementById('two').href = "javascript:prev('3')";
        }if(n == '3'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "1";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('2')";
            document.getElementById('two').href = "javascript:prev('4')";
        }if(n == '4'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "1";
            document.getElementById('img5').style.opacity = "0";
            document.getElementById('one').href = "javascript:prev('3')";
            document.getElementById('two').href = "javascript:prev('5')";
        }if(n == '5'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "1";
            document.getElementById('one').href = "javascript:prev('4')";
            document.getElementById('two').href = "javascript:prev('2')";
        }if(document.getElementById('aluie').value == 'passar'){
            document.getElementById('img1').style.opacity = "0";
            document.getElementById('img2').style.opacity = "0";
            document.getElementById('img3').style.opacity = "0";
            document.getElementById('img4').style.opacity = "0";
            document.getElementById('img5').style.opacity = "1";
            document.getElementById('one').href = "javascript:prev('4')";
            document.getElementById('two').href = "javascript:prev('2')";
        }
    }
    </script>
    <meta charset="utf-8" />
    <link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>
    </head>
    <body onload="prev('1')" id="body">
    <img src="http://www.agendapet.com.br/Content/images/uploads/artigos/Gato%20himalaio%20andando.jpg" style="z-index:5" class="image" name="img1" id="img1" />
    <img src="http://caninablog.files.wordpress.com/2011/08/cachorro-louco.jpg?w=500&h=400" style="z-index:4" class="image" name="img2" id="img2" />
    <img src="http://mlb-s2-p.mlstatic.com/cavalo-mangalarga-marchador-marcha-picada-11207-MLB20041796266_022014-O.jpg" style="z-index:3" class="image" name="img3" id="img3" />
    <img src="http://www.unitmagazine.com/images/pet/23/pet-5.jpg" style="z-index:2" class="image" name="img4" id="img4" />
    <img src="http://1.bp.blogspot.com/-hUMf0dm72eQ/Uwfl0KLLDqI/AAAAAAAABk0/Q958VLvi2HQ/s1600/Sem+T%C3%ADtulo-1.png" style="z-index:1" class="image" name="img5" id="img5" />
    <a href="" class="pp" id="one" style="left: 15px"><</a>
    <a href="javascript:prev('2')" class="pp" style="left: 460px" id="two">></a>

    <a href="javascript:prev('1')" class="Number">1</a>
    <a href="javascript:prev('2')" class="Number">2</a>
    <a href="javascript:prev('3')" class="Number">3</a>
    <a href="javascript:prev('4')" class="Number">4</a>
    <a href="javascript:prev('5')" class="Number">5</a>

    </body>
    </html>

See if that fits.

0

I suggest using CSS Transitions. So you don’t need Javascript to smooth the transition, you just need to add this to the CSS for the div #header-slider:

-webkit-transition: background-image 0.7s ease-in-out; 
-moz-transition: background-image 0.7s ease-in-out;   
-o-transition: background-image 0.7s ease-in-out;
-ms-transition: background-image 0.7s ease-in-out;
transition: background-image 0.7s ease-in-out;
            ^-propriedade         ^-estilo de transição
                             ^-velocidade de transição   

CSS Transitions only work in modern browsers. ie IE10+

Example

  • I need it to work on IE9, and even on Chrome it doesn’t look cool.

Browser other questions tagged

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