Change Slide Size

[erfanpj]

Hi
First , Thank you for this great library
I just wondering if there is option to change image size
because when i change image size in css there is big space between images

Regardless

[lukeed]

Hi there,
Yes there is! As you saw, you have to change it with CSS. You will also have to change the transformation values for each slide of the effect you like.

For example, the default slide width is 512px. If you were to use the "classic" effect, the translateX values are 1920px, 1280px, and 640px. This is because they are 3.75, 2.5, and 1.25 times the width of the slide.

1920 / 512 = 3.75
1280 / 512 = 2.5
640 / 512 = 1.25

If you wanted to change the width to 300px & still use the "classic" effect, you should keep the multipliers the same & update them with the new value:

300px * 3.75 = 1125px
300px * 2.5 = 750px
300px * 1.25 = 375px

You'd update these values in your CSS as well.

Does that make sense?

[erfanpj]

Hi
Thank you for your quick answer
(Sorry if my english is awful)
Acctually i'm not completly understand
For example if i want have slide image that every slide has 200*200 and if we have 5 image
Where can i should change

Thank you in advance

[lukeed]

No problem! What effect are you using?

[erfanpj]

Thank you ,
This is the code that i wrote

var main_el = document.getElementById('demo'),
        thumb_el = document.getElementById('thumb');

var thumbs = new Bee3D(thumb_el, {
    effect: 'classic',
    focus: 2,
    listeners: {
        clicks: true
    },
    sync: {
        enabled: true,
        targets: ['main'] // var main = ...
    }
});

var main  = new Bee3D(main_el, {
    effect: 'concave',
    focus: 2,
    listeners: { // <-- added here
        keys: true,
        touches: true
    },
    navigation: {
        enabled: true
    },
    autoplay: {
        enabled: false,
        speed: 2000
    },
    navigation: {
        enabled: true
    },
    loop: {
        enabled: true

    }

});

[erfanpj]

Actually i need something like this link image
slider

[lukeed]

@erfanpj You don't have to do anything special with the JS.

To simulate the image you sent, I'd use the classic effect.

And since you only want 5 images, then you only have to worry about these classes:

• bee3D--after-1
• bee3D--after-2
• bee3D--before-1
• bee3D--before-2

Because it goes B2, B1, active, A1, A2

If you want your slides touching, then it's really easy. With each slide being 200px wide, you have simple math.

bee3D--before-2 === -400px
bee3D--before-1 === -200px
bee3D__active   === 0
bee3D--after-1  === 200px
bee3D--after-2  === 400px

For your CSS, that means:

.bee3D--slide {
  width: 200px;
  margin-left: -100px;
}

.bee3D--effect__classic .bee3D--before-2 {
    transform: translate3d(-400px, 0, 0);
}

.bee3D--effect__classic .bee3D--before-1 {
    transform: translate3d(-200px, 0, 0);
}

.bee3D--effect__classic .bee3D--after-1 {
    transform: translate3d(200px, 0, 0);
}

.bee3D--effect__classic .bee3D--after-2 {
    transform: translate3d(400px, 0, 0);
}