renderOnlyVisible in combination with Perspective plugin doesnt work.

[tobidemski]

Description

You can not navigate through each slide anymore if you enable renderOnlyVisible with the Perspective plugin altogether.

Steps to check or reproduce

Use the following plugins:

let plugins = [
    new Pagination({ type: 'scroll' }),
    new Perspective({ rotate: -1, scale: 2, perspective: 600 }),
    new Arrow()];

and following Flicking options:

align="center"
circular={true}
renderOnlyVisible={true}
plugins={plugins}
defaultIndex={1}
panelsPerView={3}

CSS example I used:

.flicking-container {
  max-width: 600px;
}

.flicking-viewport {
  padding-bottom: 32px;
}

.panel {
  border-radius: 5px;
  box-sizing: border-box;
  display: flex;
  height: 200px;
  justify-content: flex-start;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 30px 20px;
  position: relative;
  width: 50%;
  background-color: #f2a65e;
  color: #fff;
}

.flicking-arrow-next,
.flicking-arrow-prev {
  cursor: pointer;
  height: 64px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  z-index: 2;
}

.flicking-arrow-prev {
  left: 10px;
}

.flicking-arrow-next {
  right: 10px;
}

.flicking-arrow-next:after,
.flicking-arrow-next:before,
.flicking-arrow-prev:after,
.flicking-arrow-prev:before {
  background-color: #f2a65e;
  content: "";
  height: 6px;
  position: absolute;
  width: 24px;
}

.flicking-arrow-next:before {
  right: 22px;
  top: 50%;
  transform: rotate(45deg);
  transform-origin: 100% 50%;
}

.flicking-arrow-next:after {
  right: 22px;
  top: calc(50% - 4px);
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
}

.flicking-arrow-prev:before {
  left: 22px;
  top: 50%;
  transform: rotate(-45deg);
  transform-origin: 0 50%;
}

.flicking-arrow-prev:after {
  left: 22px;
  top: calc(50% - 4px);
  transform: rotate(45deg);
  transform-origin: 0 50%;
}

---

tsx example:

import Flicking, { ViewportSlot } from "@egjs/react-flicking";
import "@egjs/react-flicking/dist/flicking.css";
import { Arrow, Pagination, Perspective } from "@egjs/flicking-plugins";
import "@egjs/flicking-plugins/dist/pagination.css";
import "./flickering.css";

export default function FlickingPage() {
  let number = 50;
  var items = Array.apply(null, Array(number));

  let plugins = [
    new Pagination({ type: 'scroll' }),
    new Perspective({ rotate: -1, scale: 2, perspective: 600 }),
    new Arrow()];

  return (
    <div>
      <h1>Flicking Test</h1>

      <div className={"flicking-container"}>
        <Flicking
          align="center"
          circular={true}
          renderOnlyVisible={true}
          plugins={plugins}
          defaultIndex={1}
          panelsPerView={3}
        >
          {items.map((n: any, index: number) => {
            return <div key={index} className={"panel"}>{index + 1}</div>;
          })}
          <ViewportSlot>
            <span className="flicking-arrow-prev"></span>
            <div className="flicking-pagination"></div>
            <span className="flicking-arrow-next"></span>
          </ViewportSlot>
        </Flicking>
      </div>
    </div>
  );
}

[remyhunt]

@tobidemski have you tested this without the plugin, too? I just posted an issue that might be related - it could be that the option might entirely be not working at the moment. Please let me know!

[tobidemski]

Hey @remyhunt, sorry for the late response. I tested the plugin itself locally with the example above and it looked good so far as long as the perspective plugin isn't included. The component is totally "broken" if you enable both at the same time.