CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Hashey100
Hashey100

Reputation: 984

Image not hiding correctly

I made a JQuery carousel from scratch, so far the code is good and it works quite nice.

The main issue is when I try and use the fadeOut function alongside the fadeIn function, the images stack on top of each other.

I cant figure out how to make them overlap.

I tried to play around with absolute positioning but had no luck.

You can clearly see it when you go on my website http://techyhesh.com/Dogs/

html

<div class="carousel">

    <div id="background-slideshow">

        <div style="display: none;" id="img1" class="slides">
           <img src="/2015/03/Carosuel2.png">
            <div class="textblock">
                <p class="carousel-text1">Slider 1</p>
                <p class="carousel-text2">His nose gets into everything</p>
            </div>
        </div>
        <div style="display: block;" id="img2" class="slides">
           <img src="/2015/03/Carosuel.png">
            <div class="textblock">
                <p class="carousel-text1">Slider 2</p>
                <p class="carousel-text2">His nose gets into everything</p>
            </div>
        </div>
        <div style="display:none;" class="SlideJSON">2</div>
    </div>

</div>

JS

jQuery(document).ready(function($) {

var slides= $(".JSONNumber").html();

var slides= parseInt(slides);

var animateInterval;
var i = 1;
var x = 2;

function animate() {


    $("#img" + i).fadeOut(2000)
    $("#img" + x).fadeIn(2000);


    if (i == slidenumber) { 

        $("#img1").fadeIn(2000);

        i = 1;
        x = 2;

    } else {
        i++;
        x++;
    }

}

animateInterval = setInterval(animate, 3000);


})

Upvotes: 0

Views: 57

Answers (2)

Sushil
Sushil

Reputation: 2835

in your slides css, just add display: inline-block;

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

As per your HTML, The selector you've used is wrong.

$("#img" + i)

It should be

$("#slideimg" + i)

Upvotes: 1

Related Questions