<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<section class="card">
<div class="card__content">
<div class="card__heading">
More stuff you may like
<div class="card__slider js-carousel-navigation">
<a href="#" class="sliderIcon sliderIcon--left" data-nav-scroll="left"><i class="fa fa-chevron-left"></i></a>
<div class="list-wrapper">
<ul class="list">
<li class="list__item"><a href="#">Slider_1</a></li>
<li class="list__item active"><a href="#">Slider_2</a></li>
<li class="list__item"><a href="#">Slider_3</a></li>
<li class="list__item"><a href="#">Slider_4</a></li>
<li class="list__item"><a href="#">Slider_5</a></li>
</ul>
</div>
<a href="" class="sliderIcon sliderIcon--right" data-nav-scroll="right"><i class="fa fa-chevron-right"></i></a>
</div>
<!-- /.card__slider -->
</div>
<!-- /.card__heading -->
</div>
<!-- /.card__content -->
</section>
<!-- /.card -->
</div>
<script>
(function() {
function carouselMenu(el, options) {
this.el = el;
this.options = options;
this.links = $('.list__item', this.el);
this.wrapperWidth = this.el.width();
this.activeElementWidth = 0;
this.overlappingValue = 0;
this.init();
}
carouselMenu.prototype = {
init: function() {
this.slideIncrement = 10;
this.slideInitialLocation = 0;
this.getInitialWidthWithActiveLink();
this.initArrows();
this.initLinks();
},
getInitialWidthWithActiveLink: function() {
var done = false;
var self = this;
this.links.each(function(index, element) {
if ( ! done) {
var current = $(element);
if (current.hasClass('active')) done = true;
self.activeElementWidth += current.width();
}
})
},
initArrows: function() {
var self = this;
var arrows = $('.sliderIcon');
var wrapper = $('.list', this.el);
var interval;
arrows.on('mousedown', function(event) {
var direction = $(this).data('navScroll');
switch (direction) {
case 'left':
{
interval = setInterval(repeat.bind(null, 'increment'), 100);
break;
}
case 'right':
{
interval = setInterval(repeat.bind(null, 'decrement'), 100);
break;
}
}
function repeat(operation) {
if (operation === 'decrement') {
self.slideInitialLocation -= self.slideIncrement;
} else {
self.slideInitialLocation += self.slideIncrement;
}
wrapper.css({
'transform': 'translateX(' + self.slideInitialLocation + '%)'
});
}
}).on('mouseup', function() {
clearInterval(interval);
})
arrows.on('click', function(event) {
var direction = $(this).data('navScroll');
var wrapper = $('.list', this.el);
var activeIndex = self.links.map(function(index, element) {
return ($(element).hasClass('active')) ? index : null
});
// var activeEl =
switch (direction) {
// case 'left':
// if (activeIndex[0] === 0) {
// return false;
// }
// $(self.links[activeIndex[0]]).removeClass('active');
// $(self.links[activeIndex[0] - 1]).addClass('active');
// break;
// case 'right':
// if (activeIndex[0] === self.links.length - 1) {
// return false;
// }
// $(self.links[activeIndex[0]]).removeClass('active');
// $(self.links[activeIndex[0] + 1]).addClass('active');
// self.activeElementWidth += $(self.links[activeIndex[0] + 1]).width();
// if (self.activeElementWidth > self.wrapperWidth) {
// self.overlappingValue += $(self.links[activeIndex[0] + 1]).width()
// wrapper.css({
// 'transform': 'translateX(-' + self.overlappingValue + 'px)'
// });
// }
// break;
}
event.preventDefault();
});
},
initLinks: function() {
var self = this;
this.links.on('click', function(event) {
var activeIndex = self.links.map(function(index, element) {
return ($(element).hasClass('active')) ? index : null
});
$(self.links[activeIndex[0]]).removeClass('active');
$(this).addClass('active');
event.preventDefault();
});
}
}
var menu = $('.js-carousel-navigation');
new carouselMenu(menu);
})()
</script>
body {
background-color: #E4EDF1;
}
.card {
margin-top: 40px;
padding: 10px;
background-color: #fff;
border: 1px solid;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
}
.card__heading {
position: relative;
padding: 20px 15px 20px 56px;
color: #fff;
background-color: #004171;
font-size: 18px;
line-height: 1.2em;
margin-bottom: 10px;
text-transform: uppercase;
margin-top: 0;
}
.card__heading:before {
content: '';
position: absolute;
display: block;
top: 15px;
left: 15px;
width: 30px;
height: 30px;
background: #FF1F20;
}
.card__slider {
position: absolute;
right: 20px;
top: 20px;
max-width: 360px;
padding: 0 30px;
z-index: 100;
}
.list-wrapper {
position: relative;
overflow: hidden;
/*height: 220px;*/
overflow-x: none;
-webkit-overflow-scrolling: touch;
width: auto;
white-space: nowrap;
/* transform: translate3d(-30%, 0px, 0px); */
z-index: 96;
}
.list {
position: relative;
margin: 0;
padding: 0;
transition-duration: 0.5s;
transform: translateX(0);
}
.list__item {
display: inline-block;
/* float: left; */
}
.list__item a {
padding: 5px 10px;
color: white;
font-size: 14px;
}
.list__item.active a,
.list__item a:active,
.list__item a:focus,
.list__item a:hover {
color: #004171;
background-color: #fff;
text-decoration: none;
}
.sliderIcon {
position: absolute;
top: 0;
color: white;
font-size: 24px;
}
.sliderIcon:active, .sliderIcon:focus {
color: white;
}
.sliderIcon--right {
right: 0;
}
.sliderIcon--left {
left: 0;
}
/** BX SLIDER */
#bx-pager a {
/*display: inlin;*/
padding: 5px 10px;
color: white;
font-size: 14px;
}
#bx-pager a.active {
color: #004171;
background-color: #fff;
}
