Carrusel Bootstrap con miniatura en una sola fila

Este es un tema ampliado de mi última pregunta

Cuando las miniaturas aumentan, cae en la segunda línea. ¿Cómo hago que se desborde ( sin esperar desplazamiento horizontal para las miniaturas ) y avance junto con el botón pre / próximo?

$('#myCarousel').carousel({ pause: true, interval: false }); // handles the carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); console.log(id_selector); // var id = id_selector.substr(id_selector.length -1); var parts = id_selector.split("-"); var id = parts[parts.length - 1] id = parseInt(id); $('#myCarousel').carousel(id); $('[id^=carousel-selector-]').removeClass('selected'); $(this).addClass('selected'); }); $('#myCarousel').bind('slide.bs.carousel', function (e) { var slideFrom = $(this).find('.active').index(); var videoContent = $('.item[data-slide-number='+slideFrom+'] .embed-responsive'); videoContent.html( videoContent.html() ); }); // when the carousel slides, auto update $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); id = parseInt(id); $('[id^=carousel-selector-]').removeClass('selected'); $('[id=carousel-selector-'+id+']').addClass('selected'); }); 

MANIFESTACIÓN