css bee3D修复响应

Posted 2021-05-13

$('.beeSlider').each(function(index) {
	
	var element = $(this);
	var id = $(this).attr('id');
	var el = document.getElementById(id);
	var beeType = element.data('beetype');
    var size = element.data('beeSize');
    var sliderName = 'beeSlider-' + index;

	function resize_bee_slider(obj, mode) {
	   var container = obj.children('.bee3D--parent');
	   var slide = obj.children('.bee3D--slide');
	   var parentW = container.parent().width();
	   var slideH = obj.children('.bee3D--slide__active').height();

	   var slideNewW = parentW/3;
	   var slideNewH = 0;
	   var containerNewH = slideH * 1.1;
	   var slideMarginT = "";

	   switch(mode) {
		    case 'square':
		        slideNewH = slideNewW;
		        containerNewH = slideH * 1.1;
		        slideMarginT = '-16%';
		        break;
		    case 'wide':
		        slideNewH = slideNewW*0.7;
		        containerNewH = slideH * 0.8;
		        slideMarginT = '-12%';
		        break;
		    case 'tall':
		        slideNewH = slideNewW*1.3;
		        containerNewH = slideH * 1.4;
		        slideMarginT = '-22%';
		        break;
		    default:
		        slideNewH = slideNewW*0.7;
		        slideMarginT = '-16%';
		}

	   slide.css({
	   	'height': slideNewH,
	   	'width': slideNewW,
	   	'margin-top': slideMarginT
	   })
	   container.height(containerNewH);
	}

	$(window).on('resize', function() {
	   resize_bee_slider(el, size);
	});
   
    
    window[sliderName] = new Bee3D(el, {
      effect: beeType,
      focus: 1,
      listeners: {
        keys: true,
        touches: true,
        clicks: true,
        drag: true,
      },
      navigation: {
        enabled: true
      },
      parallax: {
        enabled: true
      },
      autoplay: {
        enabled: true,
        speed: 5000,
        pauseHover: true
      },
      loop: {
        enabled: true,
        continuous: true
      },
      onInit: function(){
	    resize_bee_slider(el, size)
	    lazy_init();
	  }
    });

});

.slider-inner-bg {
	height: 100%;
	width: 100%;
}

.slider-inner-cont {
    background: url(https://dev.berettacaldaie.tv/wp-content/uploads/slider-images/base/dummy-600x400-Floral.jpg);
    background-size: cover;
    width: 100%;
    height: 100%;
}

.bee3D--effect__concave .bee3D--slide {
	margin-left: -17%;
}

/* overflow */
.bee3D--parent {
	overflow: hidden;
}