Bootstrap Matrix Carousel

Question

我想爲集團公司網站製作主頁，其他頁面將從這裏鏈接。 主頁將是矩陣傳送帶。第一張幻燈片將橫向並重定向到另一個頁面，如每個公司的網頁和下一個新聞等enter image description here。 第二個輪播將是垂直的，每張幻燈片將顯示不同的頁面，如'新聞，獎項，聯繫人等。

請給我一個想法，我該如何以最好和簡單的方式做到這一點。是否有任何樣品或文件。

在此先感謝。

Answer 1

看看光滑sldier：http://kenwheeler.github.io/slick/

它有一個「中心模式」選項，凸顯在中間就像截圖當前幻燈片。它也有一個「垂直」選項，它允許你製作垂直滑塊。

我在許多其他項目中使用滑動滑塊，它是一個非常穩定和容易的樣式。

Answer 2

謝謝。我也有下面的東西。幻燈片水平工作有五張幻燈片，我想添加另一個垂直旋轉木馬來控制水平幻燈片。例如，如果垂直旋轉木馬是1，它會運行一次水平，如果它是2（下一個），它將在同一個容器中運行另一個不同的水平。

(function ($) { 
 
    // 創建構造函數 
 
    function Slide(ele, options) { 
 
     this.$ele = $(ele)//this. 構造函數的實例對象 
 
     this.options = $.extend({ 
 
      speed: 1000, 
 
      delay: 3000 
 
     }, options)//拓展 
 
     this.states = [ 
 
      { '&zIndex': 1, width: 120, height: 150, top: 71, left: 134, $opacity: 0.5 }, 
 
      { '&zIndex': 2, width: 130, height: 170, top: 61, left: 0, $opacity: 0.6 }, 
 
      { '&zIndex': 3, width: 170, height: 218, top: 37, left: 110, $opacity: 0.7 }, 
 
      { '&zIndex': 4, width: 224, height: 288, top: 0, left: 262, $opacity: 1 }, 
 
      { '&zIndex': 3, width: 170, height: 218, top: 37, left: 468, $opacity: 0.7 }, 
 
      { '&zIndex': 2, width: 130, height: 170, top: 61, left: 620, $opacity: 0.6 }, 
 
      { '&zIndex': 1, width: 120, height: 150, top: 71, left: 496, $opacity: 0.5 } 
 
     ] 
 
     this.lis = this.$ele.find('li') 
 
     this.interval 
 
     // 點擊切換到下一張 
 

 
     this.$ele.find('section:nth-child(2)').on('click', function() { 
 
      this.stop() 
 
      this.next() 
 
      this.play() 
 
     }.bind(this)) 
 
     // 點擊切換到上一張 
 
     this.$ele.find('section:nth-child(1)').on('click', function() { 
 
      this.stop() 
 
      this.prev() 
 
      this.play() 
 
     }.bind(this)) 
 
     this.move() 
 
     // 讓輪播圖開始自動播放 
 
     this.play() 
 
    } 
 

 

 
    Slide.prototype = { 
 

 

 
     // 原型是一個對象，所以寫成一個花括號 
 

 
     // move()方法讓輪播圖到達states指定的狀態 
 
     // <1>當頁面打開時將輪播圖從中心點展開 
 
     // <2>當輪播圖已經展開時，會滾動輪播圖(需要翻轉states數組中的數據) 
 
     move: function() { 
 

 
      this.lis.each(function (i, el) { 
 
       $(el) 
 
        .css('z-index', this.states[i]['&zIndex']) 
 
        .finish().animate(this.states[i], this.options.speed) 
 
        // .stop(true,true).animate(states[i], 1000) 
 
        .find('img').css('opacity', this.states[i].$opacity) 
 
      }.bind(this)) 
 
     }, 
 
     // 讓輪播圖切換到下一張 
 
     next: function() { 
 

 
      this.states.unshift(this.states.pop()) 
 
      this.move() 
 
     }, 
 
     // 讓輪播圖滾動到上一張 
 
     prev: function() { 
 

 
      this.states.push(this.states.shift()) 
 
      this.move() 
 
     }, 
 
     play: function() { 
 

 
      this.interval = setInterval(function() {//這個this指window 
 
       // setInterval、setTimeOut 中的this指向window 
 

 
       // states.unshift(states.pop())  //從後往前走 
 
       // states.push(states.shift())  //從前往後走 
 
       this.next() 
 
      }.bind(this), this.options.delay) 
 
     }, 
 
     // 停止自動播放 
 
     stop: function() { 
 
      // var _this = this 
 
      clearInterval(this.interval) 
 
     } 
 

 
    } 
 
    $.fn.zySlide = function (options) { 
 
     this.each(function (i, ele) { 
 
      new Slide(ele, options) 
 
     }) 
 
     return this 
 
    } 
 
})(jQuery)

.zy-Slide{ 
 
    font-size: 12px; 
 
    position:relative; 
 
    width:754px; 
 
    height:292px; 
 
    margin:115px auto 0; 
 
} 
 
.zy-Slide ul{ 
 
    position:relative; 
 
    width:754px; 
 
    height:292px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.zy-Slide li{ 
 
    position:absolute; 
 
    list-style:none; 
 
    background:#000; 
 
    width:0; 
 
    height:0; 
 
    top:146px; 
 
    left:377px; 
 
    z-index:0; 
 
    cursor:pointer; 
 
    border-radius:3px; 
 
    margin:0; 
 
    padding:0; 
 
} 
 
.zy-Slide li img{ 
 
    width:100%; 
 
    height:100%; 
 
    vertical-align:middle; 
 
} 
 
.zy-Slide section:nth-child(1), .zy-Slide section:nth-child(2){ position: absolute; top: 50%; width: 63px; height: 40px; margin-top: -20px; cursor: pointer; line-height: 40px; padding-left: 8px; padding-right: 10px; } 
 
.zy-Slide section:nth-child(1){ 
 
    left:-64px; 
 
} 
 
.zy-Slide section:nth-child(2){ 
 
    right:-60px; 
 
}

<div class="container-fluid"> 
 
     <div class="row"> 
 
      <!-- slide images--> 
 
      <div id="Slide1" class="zy-Slide"> 
 
       <!--prev:元素中的文本通常會保留空格和換行符。而文本也會呈現爲等寬字體。--> 
 
       <section>Previous</section> 
 
       <section>Next</section> 
 
       <ul> 
 
        <!--alt + shift : 可以創建一個矩形選擇區域--> 
 
        <li><a href="<?=base_url('home/company_detail')?>"> 
 
        <img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/_picture_01.png" /></li> 
 
        </a> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/2.jpg" /></li> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/3.jpg" /></li> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/4.jpg" /></li> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/5.jpg" /></li> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/6.jpg" /></li> 
 
        <li><img class="img-thumbnail" src="http://localhost:8012/fp/application/assets/images/7.jpg" /></li> 
 
       </ul> 
 
      </div> <!--slide images--> 
 
      
 
      <script src="http://localhost:8012/fp/application/assets/jiaben/jquery.zySlide.js"></script> 
 
      <script src="http://localhost:8012/fp/application/assets/jiaben/index.js"></script> 
 
      
 
     </div> 
 
    </div>