Grid image banner slider

Question

we are using jquery for grid view image slider with thumb image. but the jquery code is static can any one help me to make this dynamic.

jquery code:-

jQuery(document).ready(function($) {
  $('#myCarousel').carousel({
      interval: 5000
  });
  $('#myCarouselTwo').carousel({
      interval: 5000
  });
  $('#myCarouselThree').carousel({
      interval: 5000
  });
  $('#carousel-text').html($('#slide-content-0').html());
  //Handles the carousel thumbnails
 $('[id^=carousel-selector-]').click( function(){
      var id = this.id.substr(this.id.lastIndexOf("-") + 1);
      var id = parseInt(id);
      $('#myCarousel').carousel(id);
  });
 $('[id^=carousel-selector1-]').click( function(){
      var id = this.id.substr(this.id.lastIndexOf("-") + 1);
      var id = parseInt(id);        
      $('#myCarouselTwo').carousel(id);
  });
 $('[id^=carousel-selector2-]').click( function(){
      var id = this.id.substr(this.id.lastIndexOf("-") + 1);
      var id = parseInt(id);         
      $('#myCarouselThree').carousel(id);
  });
  // When the carousel slides, auto update the text
  $('#myCarousel').on('slid.bs.carousel', function (e) {
           var id = $('.item.active').data('slide-number');
          $('#carousel-text').html($('#slide-content-'+id).html());
  });
  $('#myCarouselTwo').on('slid.bs.carousel', function (e) {
           var id = $('.item.active').data('slide-number');
          $('#carousel-text').html($('#slide-content-'+id).html());
  });
  $('#myCarouselThree').on('slid.bs.carousel', function (e) {
           var id = $('.item.active').data('slide-number');
          $('#carousel-text').html($('#slide-content-'+id).html());
  });
});

Answer 1

Not sure what you want to make dynamic here, but first there are a couple of things you can do to on your code that will help readability, maintainability and maybe made your code even more dynamic.

First of all you should wrap your code as a module to separate it from the main content. A function is perfect for this:

function Carousels($) {
    // Use an object to export your module's functions
    var Carousels = {};

    // Example:
    // This is internal function.
    function myFunction() {
        // do something...
    }

    // Now we allow to access the function from outside.
    Carousels.myExportedFunction = myFunction;

    // Remember to return the internal object
    return Carousels;
}

You could avoid the return part just attaching your object on the jQuery objet:

function MyModule($) {
    // ...
    var MyModule = {};
    // ...
    $.MyModule = MyModule;
}

Then you could change the initialization like this:

jQuery(document).ready(function ($) {
    var Carousels = Carousels();
});

Now you could optimize some staff on your code, for example when you work with jQuery it's always a good practice to avoid the searches in the DOM.

So save the $('selector') in a variable, if you use more than one time.

// It's common to put a $ as first char on the 
// variable name just to remember that is a 
// jQuery object
var $myCarousel = $('#myCarousel');
var $myCarouselTwo = $('#myCarouselTwo');
var $myCarouselThree = $('#myCarouselThree');
var $carouselText = $('#carousel-text');

var carouselOptions = {
  interval: 5000
};

$myCarousel.carousel(carouselOptions);
$myCarouselTwo.carousel(carouselOptions);
$myCariyselThree.carousel(carouselOptions);
$carouselText.html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
  var id = this.id.substr(this.id.lastIndexOf("-") + 1);
  var id = parseInt(id);
  $myCarousel.carousel(id);
});
$('[id^=carousel-selector1-]').click( function(){
  var id = this.id.substr(this.id.lastIndexOf("-") + 1);
  var id = parseInt(id);        
  $myCarouselTwo.carousel(id);
});
$('[id^=carousel-selector2-]').click( function(){
  var id = this.id.substr(this.id.lastIndexOf("-") + 1);
  var id = parseInt(id);         
  $myCarouselThree.carousel(id);
});
// When the carousel slides, auto update the text
$myCarousel.on('slid.bs.carousel', function (e) {
       var id = $('.item.active').data('slide-number');
      $carouselText.html($('#slide-content-'+id).html());
});
$myCarouselTwo.on('slid.bs.carousel', function (e) {
       var id = $('.item.active').data('slide-number');
      $carouselText.html($('#slide-content-'+id).html());
});
$myCarouselThree.on('slid.bs.carousel', function (e) {
       var id = $('.item.active').data('slide-number');
      $carouselText.html($('#slide-content-'+id).html());
});

Another thing you can do is to avoid repeating code like:

$('[id^=carousel-selector-]').click( function(){
  var id = this.id.substr(this.id.lastIndexOf("-") + 1);
  var id = parseInt(id);
  $myCarousel.carousel(id);
});
$('[id^=carousel-selector1-]').click( function(){
  var id = this.id.substr(this.id.lastIndexOf("-") + 1);
  var id = parseInt(id);        
  $myCarouselTwo.carousel(id);
});

Instead you can define a function that returns the proper handler:

function clickHandler($carouselObject) {
    return function () {
        var id = this.id.substr(this.id.lastIndexOf("-") + 1);
        var id = parseInt(id);
        carouselObject.carousel(id);
    };
}

// And then:
$('[id^=carousel-selector-]').click(clickHandler($myCarousel));
$('[id^=carousel-selector1-]').click(clickHandler($myCarouselTwo));

The carousel update part is much easy as it is the same code:

function slideUpdate(e) {
      var id = $('.item.active').data('slide-number');
      $carouselText.html($('#slide-content-'+id).html());
}

[$myCarousel,
 $myCarouselTwo,
 $myCarouselThree].forEach(function(carousel) {

  carousel.on('slid.bs.carousel', slideUpdate);

});