CSS JS transition in slider

Question

I've a slider in my code, it's need to be transition, but it doesn't work.

Here is the JS code It's also not working in CSS... It needs to be transitioning when the image is changing. I need a slow changing of images in my slider.

actually I tried this in js:

document.getElementById("img").style.transition = "5s ease";

Here is HTML

        <div class="photo_div">
            <img id="img" src="">
        </div>
        <button onclick="prev()">PREV</button>
        <button onclick="next()">NEXT</button>
    </div>

Here is JS

var names = ["img1.jpg", "img2.jpg", "img3.jpg"];
var index = 0;

function init() {
    document.getElementById("img").src = "photo/" + names[index];
    autoSlide();
}

function next() {
    index++;
    if (index == names.length) {
        index = 0;
    }
    document.getElementById("img").src = "photo/" + names[index];
    

}

function prev() {

    if (index == 0) {
        index = names.length
    }
    index--;

    document.getElementById("img").src = "photo/" + names[index];

}

function autoSlide() {
    if (index < names.length) {
        setInterval(function() {
         next();
        }, 3000);
    }
}

What sort of effect are you trying to achieve through the transition? fade transition? side transition? — Hamza Ishak, Feb 15 '17 at 11:26
it's need to be transition when the image is changing, I need a slow changing of images in my slider — VCF, Feb 15 '17 at 11:37
@VCF Transition happen when the text is changing. Refer link this jsfiddle- https://jsfiddle.net/kcwu006e/4/. lf you do with image, you should be proload images(that will cached) for perfect transition. — Mathankumar K, Feb 18 '17 at 07:46

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

In the next and prev functions fade out the image - and set queuing to true, then change the image, then fade the img tag back in.

You can try the following for next, and something similar for prev:

function next() {
    index++;
    if (index == names.length) {
        index = 0;
    }
    
    $('#img').fadeOut("slow", "linear", function(){
      document.getElementById("img").src = "photo/" + names[index];
       $('#img').fadeIn("slow", "linear");
    });
    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you can't use jQuery, maybe have a look at this.

edited May 23 '17 at 12:32

Community

1
1

answered Feb 15 '17 at 12:29

user7491506

186
1
3

you mean by Jquery? – VCF Feb 15 '17 at 13:12
yes, I just wanted to use CSS only...is it possible? or only jQuery? – VCF Feb 15 '17 at 13:16
See my update - it uses callbacks instead of queuing but I think that is simpler. – user7491506 Mar 08 '17 at 20:32
What do you want to see while it is changing? – user7491506 Mar 09 '17 at 15:06
the next image at once – VCF Mar 09 '17 at 16:10
I'm confused, what was wrong with your original code? – user7491506 Mar 09 '17 at 18:13
I don't want to see background while the image is slowly changing, is it possible? – VCF Mar 09 '17 at 21:31
sure it is possible, but I don't understand what you want to see. – user7491506 Mar 09 '17 at 21:44
I want to see the next image is fading in behind the fading out image, without background seeing – VCF Mar 09 '17 at 21:59
Position another img behind this one, and then fade this one out. – user7491506 Mar 09 '17 at 22:08
where should I position another img? another slider behind this one? – VCF Mar 19 '17 at 17:00

CSS JS transition in slider

1 Answers1