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>