Jquery carousel with fading text

Question

Picrelated is a carousel i'm struggling with.

By clicking "next" navigation arrow, text caption should fadeout first and then the image block should slide to the left. While the image block slides - next caption fades in.

I've tried to use Nivo Slider and BX Slider, but failed permanently.

Can you suggest me any helpful jquery plugin or the way to do this?

Answer 1

Hey Try this code.

  <style>
    #slideshow #slidesContainer
    {
        margin: 0 auto;
        width: 300px;
        height: 263px;
        overflow: auto; /* allow scrollbar */
        position: relative;
    }

    #slideshow #slidesContainer .slide
    {
        margin: 0 auto;
        width: 300px; /* reduce by 20 pixels to avoid horizontal scroll */
        height: 263px;
        display: none;
    }
    #slideshow #slidesContainer .slide img
    {
        margin: 0 auto;
        width: 290px; /* reduce by 20 pixels to avoid horizontal scroll */
        height: 263px;
    }


    /**
    * Slideshow controls style rules.
    */
    .control
    {
        display: block;
        width: 39px;
        height: 263px;
        text-indent: -10000px;
        position: absolute;
        cursor: pointer;
    }
    #leftControl
    {
        top: 0;
        left: 0;
        background: transparent url(http://cdn1.iconfinder.com/data/icons/fs-icons-     ubuntu-by-franksouza-/128/go-previous.png) no-repeat 0 0;
    }
    #rightControl
    {
        top: 0;
        right: 0;
        background: transparent    url(http://cdn4.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/sq_br_next.png) no-repeat 0 0;
    }
    .active
    {
        color: red;
    }
</style>

Js Code Is

   $(document).ready(function () {
        var currentPosition = 0;
        var slideWidth = 300;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        var timer = 3000;
        var img1, img2;
        var sliderLink = $("#slider a");
        var direction = 1;
        // Remove scrollbar in JS
        $('#slidesContainer').css('overflow', 'hidden');

        // Wrap all .slides with #slideInner // Float left to display horizontally, readjust .slides width
        slides.wrapAll('<div id="slideInner"></div>').css({
            'float': 'left',
            'width': slideWidth
        });

        // Set #slideInner width equal to total width of all slides
        $('#slideInner').css('width', slideWidth * numberOfSlides);

        // Insert left and right arrow controls in the DOM
        $('#slideshow').prepend('<span class="control" id="leftControl">Move left</span>').append('<span class="control" id="rightControl">Move right</span>');

        // Hide left arrow control on first load
        // manageControls(currentPosition);
        // manageSlide();
        // Create event listeners for .controls clicks
        $('#rightControl').bind('click', rightControl);
        $('#leftControl').bind('click', leftControl);
        function leftControl() {
            var butonid = 0;
            direction = 0;
            $("#slideInner").stop();
            $("#slideInner").dequeue();
            $('#timer').stop();
            $('#timer').dequeue();
            $('#leftControl').unbind('click');

            manageSlide(0, direction);
            setTimeout(function () {

                $('#leftControl').bind('click', leftControl);
            }, timer, null);


        }
        function rightControl() {
            var butonid = 1;
            direction = 1;
            $("#slideInner").stop();
            $("#slideInner").dequeue();
            $('#timer').stop();
            $('#timer').dequeue();
            $('#rightControl').unbind('click');

            manageSlide(0, direction);
            setTimeout(function () {

                $('#rightControl').bind('click', rightControl);
            }, timer, null);

        }

        var slideIndex = 0;
        var data = $("#slideInner .slide").toArray();
        $("#slideInner").empty();
        function manageSlide(auto, idButtonid) {

            $("#slideInner").empty();


            // console.log(slideIndex);

            if (idButtonid == 0) {

                $("#slideInner").css({ 'marginLeft': "-300px" });
                $(data).each(function (index) {
                    //                        if (index == slideIndex - 1) {
                    //                            $(this).show();
                    //                        } else {
                    $(this).hide();
                    // }
                });
                $(data[slideIndex - 1]).show();
                if (slideIndex == numberOfSlides - 1) {
                    slideIndex = 0;
                    img1 = data[0];
                    img2 = data[numberOfSlides - 1];

                    $("#slideInner").append(img1);
                    $("#slideInner").append(img2);
                    $(img2).show();
                    $(img1).show();

                } else {
                    img1 = data[slideIndex];
                    img2 = data[slideIndex + 1];
                    $("#slideInner").append(img2);
                    $("#slideInner").append(img1);

                    $(img1).show();
                    $(img2).show();
                    slideIndex = slideIndex + 1;
                }



                $('#slideInner').animate({
                    'marginLeft': "0px"
                }, 'slow', function () {
                    $('#timer').animate({
                        opacity: 1
                    }, timer, function () {
                        console.log('leftControl');
                        manageSlide(1, direction);
                    });

                });
            }

            // right move here
            else if (idButtonid == 1) {
                $("#slideInner").css({ 'marginLeft': "0px" });
                $(data).each(function (index) {
                    if (index == slideIndex + 1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
                if (slideIndex == numberOfSlides - 1) {
                    slideIndex = 0;
                    img1 = data[0];
                    img2 = data[numberOfSlides - 1];
                    $("#slideInner").append(img2);
                    $("#slideInner").append(img1);
                    $(img2).show();
                    $(img1).show();

                } else {
                    img1 = data[slideIndex];
                    img2 = data[slideIndex + 1];
                    $("#slideInner").append(img1);
                    $("#slideInner").append(img2);
                    $(img1).show();
                    $(img2).show();
                    slideIndex = slideIndex + 1;
                }

                $('#slideInner').animate({
                    'marginLeft': slideWidth * (-1)
                }, 'slow', function () {
                    console.log('rightControl');
                    $('#timer').animate({
                        opacity: 1
                    }, timer, function () {
                        manageSlide(1, direction);
                    });

                });
            }


            if (auto == 1) {


                sliderLink.each(function () {
                    $(this).removeClass();
                    if ($(this).text() == (slideIndex + 1)) {

                        $(this).addClass('active');
                    }

                });
            }
            auto = 1;

        }



        $("#slider a").click(function () {

            sliderLink.each(function () {
                $(this).removeClass();
            });
            slideIndex = $(this).addClass('active').text() - 1;
            $('#timer').stop();
            $('#timer').dequeue();
            $("#slideInner").stop();
            $("#slideInner").dequeue();
            manageSlide(0, direction);
        });

        manageSlide(1, direction);
    });

HTML Code is

<body>
<div style="width: 560; overflow: hidden" align="center">
    <!-- Slideshow HTML -->
    <div id="timer">
    </div>
    <div id="slideshow">
        <div id="slidesContainer">
            <div class="slide">
                <!-- Content for slide 1 goes here -->
                <img src="http://www.themobileindian.com/images/nnews/2012/10/8999/Apple-logo.jpg" />
                <span>I need some he file. I have normal javascript, as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <!-- Content for slide 2 goes here. -->
                <img src="http://www.maxxpotential.com/stephen2/wp-content/uploads/2013/03/Images-from-Deep-in-the-Woods-by-Astrid-Yskout-4.jpg">
                <span>I to move it to it's own file. I have normal javascript, as well as Jquery. Here
                </span>
            </div>
            <div class="slide">
                <!-- Content for slide 3 goes here. -->
                <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSnyrnGRAcKu3bY2bLUiCDnPetbKT97o892huSfYQv148ERpRFJ" />
                <span>I need some help with this... I wrote all of my javascript code within the .html
                    file withing the brackets. I need to move it to it's own file. I have normal javascript,
                    as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <img src="http://i.livescience.com/images/i/000/034/622/i02/bioscapes3.jpg" />
                <span>within the .html file withing the brackets. I need to move it to it's own file.
                    I have normal javascript, as well as Jquery. Here </span>
            </div>
            <div class="slide">
                <img src="http://www.thinkstockphotos.in/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg" />
                <span>I need some help with this.. have normal javascript, as well as Jquery. Here
                </span>
            </div>
        </div>
        <div id="slider">
            <a href="javascript:void(0)">1</a> <a href="javascript:void(0)">2</a> <a href="javascript:void(0)">
                3</a> <a href="javascript:void(0)">4</a> <a href="javascript:void(0)">5</a>
        </div>
    </div>
    <!-- Slideshow HTML -->
</div>

For Demo Please Navigate here....See Demo