Slider size

[bUxEE]

Hello again!

I have just set up the slider in my site really quickly. But I have a few questions:

you can check it out @ https://dev.berettacaldaie.tv/test/

Why doesnt the slider stay within the boundaries of its container? How do i make the slider responsive? If I set media queries to change the item sizes do I have to call a function to have the slider resize with the images on breakpoints? And although parallax is enabled and the class is added to the items it does not seem to work.

here is my js:

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

        var el = document.getElementById(id);

        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
          }
        });
    });

[lukeed]

Hey there,

You need a min-height on your .bee3D--parent item. I added min-height:310px and it looks fine. The math will be strange because your grid-system includes a lot of padding 😅

For responsive slides, please see my answer here: https://github.com/lukeed/bee3d/issues/28#issuecomment-213527886

Let me know if you have any further questions!

[bUxEE]

Thanks for the quick response, although the parallax and mouse drag are still not working even if enabled :(

As as a feature for next release, I would suggest finding a way to make the slider fit in the container's width, making it automatically responsive. The total height and size of single slides would vary depending on the type of slider which is chosen to display the animation properly.

Also, include a breakpoint parameter in which you can choose to change the type of slider displayed under specific widths (giving the ability to change from spiral to classic on mobile for example) This would tremendously simplify the whole setup of the slider.

[lukeed]

No problem.

To be honest, it's your grid that is messing it up. It's competing with itself & with Bee3D and so the positional layout is a total mess. Not your fault, it's the grid itself.

I've done exactly what you're trying to do many times -- here's one.

The key is to keep it simple & not have competing elements. Advice applies to most things 😅

As for the the feature requests, the way all these effects works is through absolute positioning, which requires known dimensions, since position:absolute loses its footing.

However, knowing the dimensions is fairly easy since you know (or can get) individual slide's dimensions. Setting a (min)-height is really the only important factor.

[bUxEE]

What do you mean by competing elements? Even if they work on absolute positioning, knowing the size of the parent couldn't you set the fixed widths of slides dynamically compared to it? Actually I solved my question alone it seems haha :) just have to apply this:

function resize_slider() {
   var contW = $('.bee3D--parent').parent().width();
   $('.bee3D--slide').width(contW/3);
}
$(window).on('resize', function() {
   resize_slider();
});

and add also in slider settings:

 onInit: function(){
    resize_slider();
  }

changing the contW/3 value depending on the type of slider

[lukeed]

I meant that if you open .zozo-vc-main-row-inner.vc-normal-section in your Elements inspector and just traverse upwards, you'll see all the overlapping padding and how it's affecting the layout while, at the same time, being completely useless 😜

I'm glad you figured it out!

[bUxEE]

Ye its all the theme and visual composer padding. Thus you are viewing a test page. In prod pages i apply a rule to remove all annoying default padding and margin from elements :)

[lukeed]

I figured 😉 Although I do think it plays a role in this. Would advise developing in a production-like setting for consistency.

[bUxEE]

totally agree :smile:

[lukeed]

Sure. You can send it if you want. However, it's likely specific to your usage.

All effects are easily responsive (and centered) as they are; only need to add a scale-transform to the parent div. I use all effects across a few different projects. No problems.