2016年12月29日 星期四

Owl-Carousel 控制 height 的問題

Owl-Carousel 真的很強的照片輪撥外掛
只是 因加入了[透明遮照] 高度問題,一直控制不了 !
翻找好久 , 總算找到這篇 依原照片寬高來呈現的方法
Image slider: maintaining equal height for all images while keeping slider responsive
--
也能符合手機的瀏覽尺寸


          
//自動依圖尺寸
          $(".owl-carousel").each(function () {
              var $this = $(this);

              $this.owlCarousel({
                  afterUpdate: function () {
                      updateSize($this);
                  },
                  afterInit: function () {
                      updateSize($this);
                  }
              });
          });

          function updateSize($carousel) {
              var maxHeight = 0;

              $('.owl-item', $carousel).each(function () {
                  var $this = $(this);
                  var $image = $this.find('img');

                  //Max height
                  var prevHeight = $this.height();
                  var thisHeight = $this.height('auto').height();
                  $this.height(prevHeight);
                  maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);

                  //Set image as background
                  var imageSource = $image.attr('src');
                  $this.css('backgroundImage', 'url(' + imageSource + ')');
              });

              //Set equal height
              $('.owl-item', $carousel).height(maxHeight); //maxHeight

              $('#max-height').text(maxHeight + 'px'); //maxHeight
          }
          //

沒有留言:

張貼留言