2016年12月29日 星期四

Owl-Carousel 控制 height 的問題

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


  1. //自動依圖尺寸
  2. $(".owl-carousel").each(function () {
  3. var $this = $(this);
  4. $this.owlCarousel({
  5. afterUpdate: function () {
  6. updateSize($this);
  7. },
  8. afterInit: function () {
  9. updateSize($this);
  10. }
  11. });
  12. });
  13. function updateSize($carousel) {
  14. var maxHeight = 0;
  15. $('.owl-item', $carousel).each(function () {
  16. var $this = $(this);
  17. var $image = $this.find('img');
  18. //Max height
  19. var prevHeight = $this.height();
  20. var thisHeight = $this.height('auto').height();
  21. $this.height(prevHeight);
  22. maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);
  23. //Set image as background
  24. var imageSource = $image.attr('src');
  25. $this.css('backgroundImage', 'url(' + imageSource + ')');
  26. });
  27. //Set equal height
  28. $('.owl-item', $carousel).height(maxHeight); //maxHeight
  29. $('#max-height').text(maxHeight + 'px'); //maxHeight
  30. }
  31. //

沒有留言:

張貼留言