Activating image and video carousels

I am using this jQuery code to get two carousels working in bootstrap, and it's working for me.

$('#image-gallery-carousel').carousel({
  interval: 5000
});

$('#carousel-caption-text').html($('#slide-content-0').html());

// When the carousel slides, auto update the text
$('#image-gallery-carousel').on('slid.bs.carousel', function (e) {
  var id = $(this).find('.item.active').data('slide-number');
  //alert(id);
  $('#carousel-caption-text').html($('#slide-content-'+id).html());
});

$('#video-gallery-carousel').carousel({
  interval: 12000
});

$('#carousel-caption-video-text').html($('#slide-content-0').html());

// When the carousel slides, auto update the text
$('#video-gallery-carousel').on('slid.bs.carousel', function (e) {
  var id = $(this).find('.item.active').data('slide-number');
  //alert(id);
  $('#carousel-caption-video-text').html($('#slide-content-'+id).html());
});

If there is any better way to implement this, please point it out to me.

From a once over:

• Magic constants should go on top ( 5000 and 12000

• You use this construct .html($('#slide-content-'+id).html()); 4 times, a helper functions might be in order.

• You don't need e in the event handling function, so you can just drop that

• Image and video carousel use pretty much the same code, that could be a helper function as well.

So something like this potentially:

var imageCarouselSpeed = 5000,
    videoCarouselSpeed = 12000;

startCarousel( '#image-gallery-carousel', '#carousel-caption-text', imageCarouselSpeed );
startCarousel( '#video-gallery-carousel', '#carousel-caption-video-text', videoCarouselSpeed );

function startCarousel( carouselSelector, textSelector, speed ){
  //Start bootstrap carousel
  $( carouselSelector ).carousel({
    interval: speed
  });
  //Set the first caption
  $(textSelector).html($('#slide-content-0').html());
  // When the carousel slides, auto update the caption
  $(carouselSelector).on('slid.bs.carousel', function () {
    var id = $(this).find('.item.active').data('slide-number');
    $(textSelector).html($('#slide-content-'+id).html());
  });
}

I would agree with Larz a jsfiddle or jsbin would have gotten you a code review much sooner.

StackExchange Code Review Q#54944, answer score: 2