Jive BxSlider with Advanced Captions

by Laurie

HTML

<link rel="stylesheet" href="https://community.jivesoftware.com/resources/statics/86268/jquery.bxslider.css">
<script src="https://community.jivesoftware.com/resources/statics/86268/jquery.bxslider.min.js"></script>
<div class="blue" id="carousel">
    <div class="slides" style="width: auto; position: relative;">
        <!-- SLIDE 1 -->
        <div class="slide">
            <img src="https://community.jivesoftware.com/resources/statics/86268/slide-project%20manage%20series%202.jpg" alt="" />	<a class="btn" href="https://community.jivesoftware.com/community/jivetalks/blog/2015/03/17/5-employee-engagement-ideas-that-make-a-difference">Read Blog</a>

        </div>
        <!-- SLIDE 2 -->
        <div class="slide">
            <img src="https://community.jivesoftware.com/resources/statics/86268/slide-patty-mar15.jpg" alt="" />	<a class="btn" href="https://community.jivesoftware.com/community/jivetalks/blog/2015/03/11/how-i-work-an-interview-with-patty-mcenaney-from-envestnet-asset-management">Full Story</a>

        </div>
        <!-- SLIDE 3 -->
        <div class="slide">
            <img src="https://community.jivesoftware.com/resources/statics/86268/slide-project%20manage%20series%202.jpg" alt="" />	<a class="btn" href="https://community.jivesoftware.com/community/jivetalks/blog/2015/03/18/jive-for-project-managers-iii-running-your-project">Read Blog</a>

        </div>
    </div>
    <!-- END slides -->
</div>
<!-- END bx-viewport -->
</div>
<!-- END bx-wrapper -->
</div>
<!-- END carousel -->

CSS

#carousel {
    
    color: #021677;
    font-size: 16px;
}
#carousel .slide {
    width: 100%;
   
    padding-top: 90px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    display: none;
    cursor: pointer;
    box-sizing: border-box;
}
#carousel .slide .content, #carousel .slide .btn {
    width:100%;
}
#carousel .slide img {
    left: 0%;
    top: 5%;
    width: 100%;
    height: auto;
    margin-top: -5%;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    position: absolute;
    z-index: -1;
}


#carousel h2 {
    color: #5a2bac;
    line-height: 1;
    font-size: 32px;
    margin-bottom: 18px;
}
#carousel .slide .btn {
    color: #fff;
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    font-size: 15px;
    display: inline-block;
    background-color: rgba(80, 80, 80, 0.75);
    margin-top:232px;
}

#carousel .slide .btn::after {
    color: inherit;
    line-height: 1;
    margin-top: -2px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    vertical-align: middle;
    display: inline-block;
    content: url('/resources/statics/86268/btn-arrow.png');
}
#carousel .slide .content, #carousel .slide .btn {
    top: 12px;
    opacity: 0;
    transition-property: opacity, top;
    transition-duration: 0.8s, 0s;
    transition-timing-function: ease, ease;
    /*transition-delay: 0.4s;*/
}
#carousel .active.slide .content, #carousel .active.slide .btn {
    top: 0px;
    opacity: 1;
}

JavaScript

(function ($) {

    $(document).ready(function () {



        // --------------------------- CAROUSEL
        $('#carousel .slides').bxSlider({
            minSlides: 1,
            maxSlides: 1,
            slideMargin: 0,
            moveSlides: 1,
            mode: 'fade',
            auto: true,
            pause: 5000,
            speed: 700,
             adaptiveHeight: true,
            autoHover: true,
            onSlideBefore: function ($slideElement, oldIndex, newIndex) {
                $('#carousel .slide').eq(oldIndex).removeClass('active');
            },
            onSlideAfter: function ($slideElement, oldIndex, newIndex) {
                $('#carousel .slide').eq(newIndex).addClass('active');
                $('#carousel .ellipsis').trigger('update.dot');
            },
            onSliderLoad: function () {
                $('#carousel .slide').eq(0).addClass('active');
                $('#carousel .ellipsis').trigger('update.dot');
            }
        });

        $('#carousel .slide a[href^="http"]').attr("target", "_blank");
        $('#carousel .slide').click(function (e) {
            if ($(this).find('a').attr('target')) {
                e.preventDefault();
                e.stopPropagation();
                window.open($(this).find('a').attr('href'), '_blank');
            } else {
                e.preventDefault();
                e.stopPropagation();
                window.top.location.href = $(this).find('a').attr('href');
            }
        });

        // --------------------------- ELLIPSES
        $(".ellipsis").dotdotdot();

    });

    equalheight = function (container) {

        var currentTallest = 0,
            currentRowStart = 0,
            rowDivs = new Array(),
            $el,
            topPosition = 0;
        $(container).each(function () {

            $el = $(this);
            $($el).height('auto')
            topPostion = $el.position().top;

            if (currentRowStart != topPostion) {
      ...