TechQA.

How to write bootstrap carousel elements using jquery?

842 views Asked by At

This is the site. You don't have to visit the site, everything is written here. It's wordpress using an old wordpress theme that I can't modify to make the images look like a slideshow with thumbnails. I could access header and footer to write the css and the javascript needed but it's so hard to find which function is echoing the images and write the classes by hand. I can edit the classes using jquery

So I took this example

// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {

 var conf = {
  center: true,
  backgroundControl: false
 };

 var cache = {
  $carouselContainer: $('.thumbnails-carousel').parent(),
  $thumbnailsLi: $('.thumbnails-carousel li'),
  $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
 };

 function init() {
  cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
  cache.$thumbnailsLi.first().addClass('active-thumbnail');

  if(!conf.backgroundControl) {
   cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
  }
  else {
   cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
  }

  if(conf.center) {
   cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
  }
 }

 function refreshOpacities(domEl) {
  cache.$thumbnailsLi.removeClass('active-thumbnail');
  cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
 } 

 function bindUiActions() {
  cache.$carouselContainer.on('slide.bs.carousel', function(e) {
     refreshOpacities(e.relatedTarget);
  });

  cache.$thumbnailsLi.click(function(){
   cache.$carouselContainer.carousel($(this).index());
  });
 }

 $.fn.thumbnailsCarousel = function(options) {
  conf = $.extend(conf, options);

  init();
  bindUiActions();

  return this;
 }

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();
/*         Just for demo     */
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
 padding: 5px 0 0 0;
 margin: 0;
 list-style-type: none;
 text-align: center;
}
ul.thumbnails-carousel .center {
 display: inline-block;
}
ul.thumbnails-carousel li {
 margin-right: 5px;
 float: left;
 cursor: pointer;
}
.controls-background-reset {
 background: none !important;
}
.active-thumbnail {
 opacity: 0.4;
}
.indicators-fix {
 bottom: 70px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
   <!-- Indicators -->
   <ol class="carousel-indicators">
     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
     <li data-target="#carousel-example-generic" data-slide-to="3"></li>
   </ol>

   <!-- Wrapper for slides -->
   <div class="carousel-inner">

     <div class="item active srle">
       <img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
       <div class="carousel-caption">
         <p> 1.jpg </p>
       </div>
     </div>

     <div class="item">
       <img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
       <div class="carousel-caption">
         <p> 2.jpg </p>
       </div>
     </div>

     <div class="item">
       <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
       <div class="carousel-caption">
         <p> 3.jpg </p>
       </div>
     </div>

     <div class="item">
       <img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
       <div class="carousel-caption">
         <p> 4.jpg </p>
       </div>
     </div>

   </div>

   <!-- Controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
   </a>

   <!-- Thumbnails --> 
   <ul class="thumbnails-carousel clearfix">
    <li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
  <li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
  <li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
  <li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
   </ul>
 </div>

And modified it like so, assuming I have nothing but images and I want to build the rest using jquery

;(function(window, $, undefined) {

 var conf = {
  center: true,
  backgroundControl: false
 };

 var cache = {
  $carouselContainer: $('.thumbnails-carousel').parent(),
  $thumbnailsLi: $('.thumbnails-carousel li'),
  $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
 };

 function init() {
  cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
  cache.$thumbnailsLi.first().addClass('active-thumbnail');

  if(!conf.backgroundControl) {
   cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
  }
  else {
   cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
  }

  if(conf.center) {
   cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
  }
 }

 function refreshOpacities(domEl) {
  cache.$thumbnailsLi.removeClass('active-thumbnail');
  cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
 } 

 function bindUiActions() {
  cache.$carouselContainer.on('slide.bs.carousel', function(e) {
     refreshOpacities(e.relatedTarget);
  });

  cache.$thumbnailsLi.click(function(){
   cache.$carouselContainer.carousel($(this).index());
  });
 }

 $.fn.thumbnailsCarousel = function(options) {
  conf = $.extend(conf, options);

  init();
  bindUiActions();

  return this;
 }

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();


// here's what i added

 $('img').wrap('<div class="img-responsive"></div>');



 $('.img-responsive').wrap('<div class="item"></div>');


 $('.item').wrapAll('<div class="carousel-inner"></div>');


 $('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');


$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');

var numItems = $('.img-responsive').length;
var counter =0;

for (i = counter; i < numItems; i++) {
 // I don't know how to continue from here
}



 $('.item:first').addClass('active srle');
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
 padding: 5px 0 0 0;
 margin: 0;
 list-style-type: none;
 text-align: center;
}
ul.thumbnails-carousel .center {
 display: inline-block;
}
ul.thumbnails-carousel li {
 margin-right: 5px;
 float: left;
 cursor: pointer;
}
.controls-background-reset {
 background: none !important;
}
.active-thumbnail {
 opacity: 0.4;
}
.indicators-fix {
 bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  <img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
       <img src="https://s29.postimg.org/xaf064313/image.jpg" >
       <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >

As you can see, I'm getting there, I don't know what to put in the for loop in order to generate the thumbnails and the carousel-indicators. I hope I'm not missing anything.

javascript jquery wordpress twitter-bootstrap bootstrap-carousel
Original Q&A
1

There are 1 answers

2
Sam Battat On BEST ANSWER

You need carousel indicators added to your carousel

(function(window, $, undefined) {

 var conf = {
  center: true,
  backgroundControl: false
 };

 var cache = {
  $carouselContainer: $('.thumbnails-carousel').parent(),
  $thumbnailsLi: $('.thumbnails-carousel li'),
  $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
 };

 function init() {
  cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
  cache.$thumbnailsLi.first().addClass('active-thumbnail');

  if(!conf.backgroundControl) {
   cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
  }
  else {
   cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
  }

  if(conf.center) {
   cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
  }
 }

 function refreshOpacities(domEl) {
  cache.$thumbnailsLi.removeClass('active-thumbnail');
  cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
 } 

 function bindUiActions() {
  cache.$carouselContainer.on('slide.bs.carousel', function(e) {
     refreshOpacities(e.relatedTarget);
  });

  cache.$thumbnailsLi.click(function(){
   cache.$carouselContainer.carousel($(this).index());
  });
 }

 $.fn.thumbnailsCarousel = function(options) {
  conf = $.extend(conf, options);

  init();
  bindUiActions();

  return this;
 }

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();


// here's what i added

 $('img').wrap('<div class="img-responsive"></div>');



 $('.img-responsive').wrap('<div class="item"></div>');


 $('.item').wrapAll('<div class="carousel-inner"></div>');


 $('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');


$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');

var numItems = $('.img-responsive').length;
var counter =0;

var $indicators = $('<ol/>', {
  'class': 'carousel-indicators'
}).appendTo('#carousel-example-generic');
for (i = counter; i < numItems; i++) {
  var indClass = '';
  if(i == 0) {
    indClass = 'active'
  }
 $('<li/>', {
    'data-target': '#carousel-example-generic',
    'data-slide-to': i,
    'class': indClass
  }).appendTo($indicators);
}



 $('.item:first').addClass('active srle');
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
 padding: 5px 0 0 0;
 margin: 0;
 list-style-type: none;
 text-align: center;
}
ul.thumbnails-carousel .center {
 display: inline-block;
}
ul.thumbnails-carousel li {
 margin-right: 5px;
 float: left;
 cursor: pointer;
}
.controls-background-reset {
 background: none !important;
}
.active-thumbnail {
 opacity: 0.4;
}
.indicators-fix {
 bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  <img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
       <img src="https://s29.postimg.org/xaf064313/image.jpg" >
       <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in WORDPRESS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in BOOTSTRAP-CAROUSEL

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions