jQuery carousel slider with fade animation

Question

I've created an infinite carousel slider with fade in and fade out effects for text. So, I have 5 pictures, their width equal to the screen width, which slide to the right after the text above them has faded, then a different text above the next image fades in.

Currently, I have a class for the text from all images, and when I fade in and out, they all fade in and out, even though I can see only one image.

I want to apply the fade effects only to the text on the current image, but I don't know how to select that in javascript and what classes should I use.

I was thinking that for each text element I should give a class named something like "content1", "content2" etc. , but how do I know to which class I apply that effect?

JavaScript:

$(document).ready(function() {
        var auto_slide_seconds = 4000;
        init();
        setInterval(function(){slide("right");}, auto_slide_seconds);
});

function init() {
    var img = $('.homepage-img')
        content = $('.slider-content')
        img.width($(window).width())
        $("li").width($(window).width())
        img.height($('.slider-list').height())
        content.height($('.slider-list').height())
}

function slide(where){
    if(where === 'left') {
        switchLeft();
    }
    fadeOutContent(where); 
}

function fadeOutContent(where) {
    $('.slider-content').animate(
        { 'opacity': 0 },
        1000, 
        function(){ animateSlider(where) }
    );
}

function animateSlider(where) {
    var itemWidth = $('.slider-list li').outerWidth();
    if(where === 'right'){
        itemWidth = -itemWidth;
    }

    $('.slider-list').animate(
        { 'margin-left' : "+=" + itemWidth },
        1000,
        function(){ fadeInContent(where) }
    );
}

function fadeInContent(where) {
    if(where === 'right') {
        switchRight()
    }

    $('.slider-content').animate({
        'opacity': 1
    }, 1000);
}

function switchLeft() { 
    $('.slider-list li:first').before($('.slider-list li:last'));
    $('.slider-list').css({'margin-left': - $('.slider-list li').outerWidth()});
}

function switchRight() {
    $('.slider-list li:last').after($('.slider-list li:first'));
    $('.slider-list').css({'margin-left': 0});
}

HTML:

<ul class="slider-list">
            <li><img class="homepage-img"src="images/homepage.jpg">
                <div class="slider-content content1">
                    <h1>Crowdfunding romanesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>      
            </li><!--
         --><li><img class="homepage-img"src="images/image1.jpg">
                <div class="slider-content content2">
                    <h1>Crowdfunding englezesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>      
         </li><!--
         --><li><img class="homepage-img"src="images/image2.jpg">
                <div class="slider-content content3">
                    <h1>Crowdfunding frantuzesc</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
         </li><!--
         --><li><img class="homepage-img"src="images/image3.jpg">
                <div class="slider-content content4">
                    <h1>Crowdfunding german</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
            </li><!--
         --><li>
                <img class="homepage-img"src="images/image4.jpg">
                <div class="slider-content content5">
                    <h1>Crowdfunding american</h1>
                    <div class="slider-details">
                        <div class="description">
                            <p>This is Photoshop's version of Lorem Ipsum. Proin gravida 
                            nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis
                            bibendum auctor, nisi elit consequat.</p>
                        </div>
                        <div class="slider-actions">
                            <a href="#">Creeaza cont</a>
                            <p>sau vezi video</p>
                            <img src="images/arrow.png">
                        </div>
                    </div>
                </div>
            </li>
        </ul>

Answer 1

What I usually do, is keep a variable index that represents the current slide of the carousel:

var index = 0;
function slide(where){
    if(where === 'left') {
        switchLeft();
        index--;
    } else {
        index++;
    }
    showCurrentTitle();
    fadeOutContent(where); 
}

function showCurrentTitle = function() {
    $('.slider-content h1').hide().eq(index).show(); //you might want to cache the selector and use animations instead of hide and show
}