lukeed
commented
6 years ago Hi there!
You can just recreate the slider instance repeatedly. Most of the logic you need will happen within your filtering function --- Bee3D does not do any of this for you, and ONLY manages classnames on each slide element.
Also, since you're hiding elements, it sounds like you might want/need to track the active slide index, so that when someone is on Slide#9, then filters down to 5, they aren't forced back to Slide#0... right? Again, Bee3D can't do that for you, but you can easily calculate this within your own logic (since it's custom anyway) and then supply the new Bee3D instance a new options.focus value.
var elem = document.getElementById('slider');
var config = {
// ... all your initial options
};
// first init
var slider = new Bee3D(elem, config);
// do filtering...
// grab the currently-active slide
let idx = slider.el.slide();
// set new focus for new slider
config.focus = 8; // <~ made up value
// re-init
slider = new Bee3D(elem, config);Your other option, which is probably more feasible, is to apply a new classname on the items you've marked as hidden. For example, you add a "hidden" class to all slides that have been filtered away.
Then, the important part: You have to (greatly) modify the CSS classnames.
Instead of relying on .bee3D--{EFFECT} .bee3D--after-{INDEX}, you'd use .bee3D--{EFFECT} .bee3D--after:nth-child({INDEX}). Basically, use :nth-child() operator on all --before + --after classes instead of relying on Bee3D's --before-X + --after-Y counting.
Finally, you'd have to also use the :not() CSS operator to ignore the "hidden" classname you decide to use.
For example:
.bee3D--effect__arc
.bee3D--after
transform: translateX(750px) translateY(240px) rotateZ(17deg) scale(0.5)
opacity: 0
// previously 'after-1'
&:not(.hidden):nth-child(0)
transform: translateX(350px) translateY(75px) rotateZ(8deg) scale(0.8)
opacity: 0.5
// previously 'after-2'
&:not(.hidden):nth-child(1)
transform: translateX(560px) translateY(160px) rotateZ(14deg) scale(0.6)
opacity: 0.3
// etcThis approach is likely your best option because Bee3D still counts (aka, adds -1, -2, ..etc) all slides within the parent slider. Because of this, the first option would need to create & destroy slide elements during your filter, while also keeping track of original indexing.
Hope that helps!
alfarqi
Hi, i need to call a function that can re-initiate the slider again, because i am using the slider code with div filtration to show and hide some results of bee3d item....so after hiding some elements... i will need to call a bee3d function again to re-arrange the slider numbers.....for example in the beginning 10 items will be loaded ...by using div filter to show or hide elements based on some user selections...the slider items will shrink to 5 items....so i will need again to readjust the 5 items....so how i can do that?