Smooth Transition in Image Slider

Question

Smooth Transition in Image Slider

Asked 10 years, 9 months ago

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

Browser other questions tagged jquery css

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

by Guilherme Chaguri • **172** points · Answer 1 · 2014-03-03T00:12:48+00:00

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.

by Samir Braga • **10,016** points · Answer 2 · 2014-03-02T23:58:29+00:00

    <!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.

by Sergio • **133,294** points · Answer 3 · 2014-03-03T07:38:39+00:00

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+}

Smooth Transition in Image Slider

3 answers

Example