每个幻灯片具有两个元素的自适应引导轮播

Question

我一直在尝试使“轮播”响应迅速，但没有结果。我要为每个幻灯片显示两个项目（div结构），并且我只想为移动分辨率显示一个项目。

这是我的HTML：

<div id="recentReleases" class="carousel slide carouselRecentReleases" data-ride="carousel">
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <div class="layout-row">
        <!-- Comunicat 1 --> 
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeLightBlue">Corporatiu</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">1. Connexió a internet per a tothom a tota la flota de busos de TMB</p>
              </div>
              <div class="release__footer">
                <span class="release__footer-attachedFiles">2 adjunts</span>
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
        <!-- Comunicat 2 -->
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeRed">Canvis de Personals</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">2. Noves incorporacions en el departament de recursos humans</p>
              </div>
              <div class="release__footer">
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>
          </div>
      </div>                                                                 
    </div>
    <div class="carousel-item">
      <div class="layout-row">
        <!-- Comunicat 3 -->
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeRed">Canvis de Personals</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">3. Noves incorporacions en el departament de recursos humans</p>
              </div>
              <div class="release__footer">
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
        <!-- Comunicat 4 --> 
          <div class="layout-6-cols">
            <div class="release">
              <div class="release__header">
                <span class="release__header-date">02 Octubre 2017</span>
                <span class="tag-badge badgeLightBlue">Corporatiu</span>
              </div>
              <div class="release__body">
                <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
                <p class="release__body--text">4.Connexió a internet per a tothom a tota la flota de busos de TMB</p>
              </div>
              <div class="release__footer">
                <span class="release__footer-attachedFiles">2 adjunts</span>
                <a href="#" class="release__footer-link">Llegir més</a>
              </div>
            </div>  
          </div>
      </div>                                    
    </div>
    <div class="carousel-item">
      <div class="layout-row">
        <!-- Comunicat 5 --> 
        <div class="layout-6-cols">
          <div class="release">
            <div class="release__header">
              <span class="release__header-date">02 Octubre 2017</span>
              <span class="tag-badge badgeLightBlue">Corporatiu</span>
            </div>
            <div class="release__body">
              <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
              <p class="release__body--text">5.Connexió a internet per a tothom a tota la flota de busos de TMB</p>
            </div>
            <div class="release__footer">
              <span class="release__footer-attachedFiles">2 adjunts</span>
              <a href="#" class="release__footer-link">Llegir més</a>
            </div>
          </div>
        </div>
        <!-- Comunicat 6 -->
        <div class="layout-6-cols">
          <div class="release">
            <div class="release__header">
              <span class="release__header-date">02 Octubre 2017</span>
              <span class="tag-badge badgeRed">Canvis de Personals</span>
            </div>
            <div class="release__body">
              <img class="release__body-image" src="./images/img-release-1.png" alt="images release 1">
              <p class="release__body--text">6. Noves incorporacions en el departament de recursos humans</p>
            </div>
            <div class="release__footer">
              <a href="#" class="release__footer-link">Llegir més</a>
            </div>
          </div>  
        </div>
      </div>                                
    </div>                                                                                                                                                  
  </div>
</div>

我只需要轮播作为引导程序默认轮播：

$("#carouselRecentReleases").carousel({
  interval: 5000
});

关于如何实现自发行为的任何想法？已经找到了几种选择，但似乎对我没有任何作用。