"nav slide"
Bootstrap 3.0.0 Snippet by evarevirus

<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; }

Related: See More


Questions / Comments: