Jive BxSlider

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>
<script src="https://community.jivesoftware.com/"></script>
<script src="http://fonts.googleapis.com/css?family=Montserrat:400,700"></script>
<div class="blue" id="carousel">
<div class="bx-wrapper">


    
<div class="slides">
    
    <!-- SLIDE 1 -->
     <div class="slide">
         <img src="https://community.jivesoftware.com/resources/statics/86268/slide-Employee-Engagement.jpg" alt=""/>
    	<div class="content ellipsis">
    		<h2> 5 Ideas for Employee Engagement</h2>
    		<p>      Get your employees fired up with engagement ideas for your online community.</p>
    	</div>
    	<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=""/>
    	<div class="content ellipsis">
    		<h2>  What’s Your Workstyle?</h2>
    		<p>       Meet Patty McEnaney of Envestnet Asset Management</p>
    	</div>
    	<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=""/>
    	<div class="content ellipsis">
    		<h2> Part 3: Managing Projects in Jive</h2>
    		<p>Ryan Ruark completes his blog series by outlining how to run a project in a Jive community.</p>
    	</div>
    	<a class="btn"...

CSS

#carousel {
font-family: 'Montserrat', sans-serif;
}

/* CAROUSEL */
#carousel {height:380px; font-size:16px; color:#021677;}
#carousel .slide {display:none; width:100%; height:380px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; padding:90px 0 0 0; cursor:pointer;}
#carousel .slide .content, #carousel .slide .btn {margin:0 17.25% 0 36.75%; z-index:5;}
#carousel .slide img {width:100%; height:auto; position:absolute; top:5%; left:0%; margin:-5% 0 0 0; z-index:-1;}
#carousel .slide .content {background-color:#fff; padding:30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; height:180px;}
#carousel .slide .content {background-color:rgba(255,255,255,.85);}
#carousel h2 {font-size:32px; line-height:1; margin-bottom:18px; color:#5a2bac}
#carousel .slide .btn {display:inline-block; text-transform:uppercase; font-size:13px; margin-top:-20px; border-top:solid 20px #00c4dc; padding:30px; color:#fff; background-color:#021677;}
#carousel .slide .btn {background-color:rgba(2, 22, 119, 0.8);}
#carousel .slide .btn:hover {text-decoration:none;}
#carousel .slide .btn:after {content:url('https://community.jivesoftware.com/resources/statics/86268/btn-arrow.png'); display:inline-block; color:inherit; vertical-align:middle; line-height:1; margin:-2px 0 0 10px}

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {background-image:url(https://community.jivesoftware.com/resources/statics/86268/controls.png)}
.bx-wrapper .bx-pager {bottom:10px; right:10px; z-index:500; text-align:right;}
.bx-wrapper .bx-pager.bx-default-pager a {background:transparent; border:solid 3px #fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; text-align:left;}
.bx-wrapper .bx-pager.bx-default-pager a:hover, 
.bx-wrapper .bx-pager.bx-default-pager a.active {background:#fff}

/* animate slide stuff */
#carousel .slide .content,
#carousel .slide .btn {opacity:0; top:12px; transition:.8s opacity,top; -webkit-transition:.8s...

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,
			
        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) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) :(currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
    ...