Display Additional Slides to Left and Right of Primary Slide

[arevenon]

Hi lukeed, thank you for answering my previous question quickly! The question was closed before I had a chance to clarify so I just wanted to try to get this answered.

I have purchased the Bee3D Slider and want to have the carousel effect display additional slides beyond the initial two when the user enters the page, so that I might have all the way up to bee3D--before-7, and bee3D--after-7 showing.

See this example: http://i.imgur.com/68XsGuU.jpg

Is this possible to achieve through CSS or as an option built into the script? I need this effect for a project I am working on so it simulates surrounding a globe like object.

If this isn't the correct place to ask this question let me know, please.

[lukeed]

Hi there, no problem! I like to close questions, so that only issues are left open. I wasn't trying to imply that we were done with that thread, sorry.

Yes, the effect you want is easily achievable by modifying the carousel's style values. No JavaScript changes are necessary.

Unfortunately, I can't just do it for you. While I am sure you would appreciate that, 😀 it would be best if you started it on your own, and then reach out for help once stuck.

In order to do so, you will need to decrease the steps between each transformation phase. This will create the "flattened" look you want.

I hope that helps!

Again, I'm going to close this because it's a question, but please reply here if/when you need more help with this.

Thanks!

[arevenon]

Can you give me an example of what I would be modifying in the CSS?

[lukeed]

Sure. Here's a rough implementation of your image:

.bee3D--effect__carousel .bee3D--after-1 {
  transform: translateX(55%) rotateY(10deg) translateX(55%);
  opacity: 0.5;
}

.bee3D--effect__carousel .bee3D--after-2 {
  transform: translateX(110%) rotateY(20deg) translateX(110%);
  opacity: 0.3;
}

.bee3D--effect__carousel .bee3D--after-3 {
  transform: translateX(170%) rotateY(30deg) translateX(170%);
  opacity: 0.3;
}

/* "--before" is just the inverse */

.bee3D--effect__carousel .bee3D--before-1 {
  transform: translateX(-55%) rotateY(-10deg) translateX(-55%);
  opacity: 0.5;
}

.bee3D--effect__carousel .bee3D--before-2 {
  transform: translateX(-110%) rotateY(-20deg) translateX(-110%);
  opacity: 0.3;
}

.bee3D--effect__carousel .bee3D--before-3 {
  transform: translateX(-170%) rotateY(-30deg) translateX(-170%);
  opacity: 0.3;
}

/* temporary */
.bee3D--parent {
  zoom: 0.4;
}

You can compare these against the previous values found within the downloadable.

As you can see, I've added extra style rules for .bee3D--after-3 and .bee3D--before-3 because these slide-offsets default to a hidden position.

I also added the zoom to .bee3D--parent just so that everything would fit on screen for this quick-demo. You'll want to use a scale() transform instead, or something else.

[arevenon]

Absolutely perfect for what I need, thank you!

[lukeed]

Great! Glad to help!