Как добавить панели в существующую карусель?

Question

Для одного из веб-сайтов брошюр моего клиента я использую Bootstrap carousel. Карусель имеет 6 панелей, каждая из которых имеет довольно большое изображение.

Чтобы ускорить начальное время загрузки, я собираюсь с идеей включить только две панели в источник страницы и каким-то образом использовать JavaScript для добавления дополнительных панелей после загрузки страницы в DOM. То есть, я хочу lazy load дополнительные панели для карусели; мы надеемся, что они будут на месте, прежде чем карусель должна будет отобразить их (моя карусель настроена на смену панелей каждые 4 секунды, поэтому две исходные панели дают мне 8 секунд, чтобы добавить третью панель).

Как добавить панели в существующую карусель?

HTML:

<div id="home_pictures" class="carousel slide"> 
    <!-- Carousel items --> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <img src="img/carousel_wellness.jpg" alt="Wellness: Comprehensive approaches for your individual needs" /> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h2>Wellness</h2> 
        <p class="lead">Comprehensive approaches for your individual needs</p> 
       </div> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="img/carousel_psychotherapy.jpg" alt="Psychotherapy: Increase your sense of your own well-being" /> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h2>Psychotherapy</h2> 
        <p class="lead">Increase your sense of your own well-being</p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- Carousel nav --> 
    <a class="carousel-control left" href="#home_pictures" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#home_pictures" data-slide="next">&rsaquo;</a> 
</div> 

Answer 1

Этот JavaScript, который использует JSON для легкого определения объекта и JQuery для добавления панелей, кажется, сделать трюк красиво:

$(document).ready(function() { 
    if($html_js.find('#home_pictures').length) { 
     var $carousel_inner=$('div.carousel-inner'), 
      carousel_panels = [{ 
       "title" : "Massage", 
       "img_src" : "carousel_massage.jpg", 
       "description": "Promote healing, relaxation and well-being" 
      }, 
      { 
       "title" : "Nutritional Therapy", 
       "img_src" : "carousel_nutrition.jpg", 
       "description": "Change behaviors, eat well, feel well" 
      }, 
      { 
       "title" : "Reiki", 
       "img_src" : "carousel_reiki.jpg", 
       "description": "Facilitate self-healing and equilibrium" 
      }, 
      { 
       "title" : "Chiropractic Treatment", 
       "img_src" : "carousel_chiropractic.jpg", 
       "description": "Adjustments to realign pain away" 
      }]; 

     for(var i = 0; i < carousel_panels.length; i++) { 
      var panel = carousel_panels[i]; 
      $carousel_inner.append('<div class="item"><img src="img/'+panel.img_src+'" alt="'+panel.title+': '+panel.description+'" /><div class="container"><div class="carousel-caption"><h2>'+panel.title+'</h2><p class="lead">'+panel.description+'</p></div></div></div>'); 
     } 
    }; 

}); 

Конечный результат доступен на http://fallschurchwellness.com/

В данном решении применяется ответ «JavaScript loop through json array?»