title: How to display multiple active items in different breakpoints(xs,sm,md,lg) using bootstrap carousel?
body: <p>I am trying to display 10  images in a row in desktop and  5 images in a row in tablet and  on click of next button i want to display remaining 5 images .In phone ,i want to display one image at time.</p>
  
  <p>But the problem is when i click on next button in tablet view,its doesnt work and not showing next set of images.</p>
  
  <p>I am trying to add active class to divs in jquery.</p>
  
  <p>here is my code,</p>
  
  <p>Script:</p>
  
  <pre><code>$(document).ready(function () {
          if ($(window).width() &lt; 768) {
  
              $('[id^="icon_FirstSet_"]').removeClass('active');
              $('[id^="icon_SecSet_"]').removeClass('active');
              $('#icon_FirstSet_1').addClass('active');
  
              //  small screens
          }
          else if ($(window).width() &gt;= 768 &amp;&amp; $(window).width() &lt;= 992) {
  
              $('[id^="icon_FirstSet_"]').removeClass('active');
              $('[id^="icon_SecSet_"]').removeClass('active');
              $('[id^="icon_FirstSet_"]').addClass('active');
            //medium screens
  
  
          }
          else if ($(window).width() &gt; 992 &amp;&amp; $(window).width() &lt;= 1200) {
  
              $('[id^="icon_FirstSet_"]').removeClass('active');
              $('[id^="icon_SecSet_"]').removeClass('active');
              $('[id^="icon_FirstSet_"]').addClass('active');
              $('[id^="icon_SecSet_"]').addClass('active');
              //  big screens
          }
          else {
  
              $('[id^="icon_FirstSet_"]').removeClass('active');
              $('[id^="icon_SecSet_"]').removeClass('active');
              $('[id^="icon_FirstSet_"]').addClass('active');
              $('[id^="icon_SecSet_"]').addClass('active');
              // huge screens
          }
  
  
          $('.carousel').carousel();
      });
  </code></pre>
  
  <p>code:</p>
  
  <pre><code>&lt;div id="carousel-example-generic" class="carousel slide" data-ride="carousel"&gt;
      &lt;!-- Indicators --&gt;
      &lt;!-- Wrapper for slides --&gt;
      &lt;div class="carousel-inner " role="listbox"&gt;
  
  
          &lt;div class="item" id="icon_FirstSet_1"&gt;
              &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12  "  &gt;
                  &lt;div id="divslide1" &gt;
                      &lt;a id="lnkslide1" href="#lnkslide1"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide1" src="~/Content/Images/App/Onslide1.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="item" id="icon_FirstSet_2"&gt;
              &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                  &lt;a id="lnkslide2" href="#lnkslide2"&gt;
                      &lt;div&gt;
                          &lt;img id="imgslide2" src="~/Content/Images/App/slide2.png" /&gt;
                      &lt;/div&gt;
  
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="item" id="icon_FirstSet_3"&gt;
              &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                  &lt;a id="lnkslide3" href="#lnkslide3"&gt;
                      &lt;div&gt;
                          &lt;img id="imgSlide3" src="~/Content/Images/App/Slide3.png" /&gt;
                      &lt;/div&gt;
  
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="item" id="icon_FirstSet_4"&gt;
              &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                  &lt;a id="lnkslide4" href="#lnkslide4"&gt;
                      &lt;div&gt;
                          &lt;img id="imgslide4" src="~/Content/Images/App/slide4.png" /&gt;
                      &lt;/div&gt;
  
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;div class="item" id="icon_FirstSet_5"&gt;
              &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                  &lt;a id="lnkslide5" href="#lnkslide5"&gt;
                      &lt;div&gt;
                          &lt;img id="imgslide5" src="~/Content/Images/App/slide5.png" /&gt;
                      &lt;/div&gt;
  
                  &lt;/a&gt;
              &lt;/div&gt;
              &lt;/div&gt;
  
  
  
          &lt;div class="item" id="icon_SecondSet"&gt;
  
              &lt;div class="item" id="icon_SecondSet_1"&gt;
                  &lt;div class="col-lg-1 col-md-1  col-sm-1 col-xs-12 "&gt;
                      &lt;a id="lnkslide6" href="#lnkslide6"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide6" src="~/Content/Images/App/slide6.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="item" id="icon_SecondSet_2"&gt;
                  &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                      &lt;a id="lnkslide7" href="#lnkslide7"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide6" src="~/Content/Images/App/slide7.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
              &lt;div class="item" id="icon_SecondSet_3"&gt;
                  &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                      &lt;a id="lnkslide8" href="#lnkslide8"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide8" src="~/Content/Images/App/slide8.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;div class="item" id="icon_SecondSet_4"&gt;
                  &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                      &lt;a id="lnkslide9" href="#lnkslide9"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide9" src="~/Content/Images/App/slide9.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;div class="item" id="icon_SecondSet_4"&gt;
                  &lt;div class="col-lg-1 col-md-1  col-sm-2 col-xs-12 "&gt;
                      &lt;a id="lnkslide10" href="#lnkslide10"&gt;
                          &lt;div&gt;
                              &lt;img id="imgslide10" src="~/Content/Images/App/slide10.png" /&gt;
                          &lt;/div&gt;
  
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
  
  
      &lt;!-- Controls --&gt;
      &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev" &gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/a&gt;
      &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next" &gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/a&gt;
              &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>can anyone please help? Thanks in advance!</p>