simple slider w/background img headline and paragraph

simpleSlider

$(function () {

    var slides = [],
        liSize = $(window).width(),
        autoplay = true,
        step = 1,
        current = 0,
        maximum = 0,
        visible = 1,
        speed = 200,
        carousel_height = $('#featured').height(),
        ulSize = liSize * maximum,
        divSize = liSize * visible,
        container = $('#feature'),
        headlineDiv = $('#feature').find('h1'),
        leadDiv = $('#feature').find('p.lead');

    slides = [
        { 
            'url': '/assets/img/carousel_Imgs/rallybot-color.png',
            'headline': 'Supercharge Your Content Calendar',
            'lead' : 'You need to send a dozen Tweets, 3 Facebook posts, 8 LinkedIn Updates, write a blog post and send your email newsletter? Our content marketing platform can help.'
        },
        { 
            'url': '/assets/img/carousel_Imgs/kids-color.png',
            'headline': 'Make Your Organization More Social',
            'lead' : 'Share ready-to-send social posts with your whole organization via email or mobile and make your colleagues a force multiplier for your content marketing.'
        },
        { 
            'url': '/assets/img/carousel_Imgs/robots-color.png',
            'headline': 'Real Technology Means You Go Faster',
            'lead' : 'Our patented content recommendation engine plus a full suite of publishing, CRM and analytics tools mean you get more done — and look good doing it.'
        }
    ];

    maximum = slides.length; // Here we have 3 slides.
    liSize = $(window).width() > 1140 ? 1140 : $(window).width();

    ////////////
    function nextimage(autoplay) {
        $('#feature').fadeOut("slow", function(){
            if (current + step > maximum - visible){
                current = 0;
            } else {
                current++;
            }

            //swap bg url and text
            // background: url('/assets/img/carousel_Imgs/rallybot-color.png') center -80px no-repeat;
            $(container).css('background', 'url('+ slides[current].url +') center -80px no-repeat');
            $(headlineDiv).text(slides[current].headline);
            $(leadDiv).text(slides[current].lead);

            //then fade back in
            $('#feature').fadeIn("slow", showSlide(autoplay));
        });
    };

    ////////////

    function showSlide(autoplay) {
        if (autoplay) { 
            setTimeout(function () { 
                nextimage(true); 
            }, 7000); 
        }
    }

    ////////////

    $('#featured .next').on('click',function (e) {
        if (current + step > maximum - visible){
            current = 0;
        } else {
            current = current + step;
        }

        $('#carouselIndex ul').fadeIn("slow", showSlide());
        return false;
    });

    $('#featured .prev').on('click', function (e) {
        if (current - step < 0){
            current = maximum - 1;
        } else {
            current = current - step;
        }

        $('#carouselIndex ul').fadeIn("slow", showSlide());
        return false;
    });

    /*$( window ).on('resize', function() {
        liSize = $(window).width() > 1140 ? 1140 : $(window).width();
        carousel_height = $('#featured').height();
        ulSize = liSize * maximum;
        divSize = liSize * visible;

        $('#carouselIndex ul').css({"width": ulSize + "px",
            "left": '-' + (current * liSize) + "px",
            "position": "absolute"
        });

        $('#carouselIndex').css({"width": divSize + "px",
            "height": carousel_height + "px",
            "visibility": "visible",
            "overflow": "hidden",
            "max-width": "1140px",
            "position": "relative"
        });


        $('#featured #carouselIndex li').css({"width": liSize + "px",
            "left": '-' + (current * liSize) + "px",
            "position": "absolute"
        });
    });*/

    showSlide(autoplay);
});