title: Custom effect that simulates a 3d wheel with Swiper 5
body: <p>I need to build a carousel with 12 items that simulate a 3d wheel rotating infinitely. To be clear, I need to create precisely this effect:</p>
  
  <p><a href="https://codepen.io/SitePoint/pen/yXWXaw" rel="noreferrer">https://codepen.io/SitePoint/pen/yXWXaw</a> (found <a href="https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/" rel="noreferrer">here</a>)</p>
  
  <p>but with these adding features (on desktop and mobile especially): </p>
  
  <ol>
  <li>slides have to follow step-by-step the swipe, that is slides
  should move while swiping (as Swiper does).</li>
  <li>With a fast swipe it
  should scroll many slides with momentum (as Swiper does with
  <code>freeScroll</code>).</li>
  <li>Then when wheel stops rotating it snaps to the
  front slide (as Swiper does with <code>freeModeSticky</code> and
  <code>centeredSlides</code>) that it's the chosen one from the user.  </li>
  <li>I need
  a callback each time a slide change (event like <code>slideChanged</code>) (as
  Swiper does).</li>
  </ol>
  
  <p>For all these reasons I thought <a href="https://swiperjs.com/" rel="noreferrer">Swiper 5.3.0</a> would be a good starting point.</p>
  
  <p>I tried various workaround, the better one is with this setup, but the <code>loop: true</code> is an awful workaround and causes issues (check the comments):</p>
  
  <pre><code>  var swiper = new Swiper(el_class, {
      slidesPerView: 1.5,
      spaceBetween: 25,
      centeredSlides: true,
      grabCursor: true,
      speed: 550,
      loop: true, // &lt;== repeat infinitely the 12 items. with fast scroll at the end of a cycle it waits a while before render the next cycle. Awful
      loopAdditionalSlides: 10, 
  
      // Free mode
      freeMode: true, // &lt;== free scrolling. Good
      freeModeMomentumRatio: 1,
      freeModeMomentumVelocityRatio: 1.5,
      freeModeMomentumBounceRatio: 1,
      freeModeMinimumVelocity: 0.02,
      freeModeSticky: true, // &lt;== snap to the slides. Good
  
      // Touch Resistance
      resistanceRatio: 0.85,
  
      // Prevent blurry texts
      roundLengths: true,
  
    });
  </code></pre>
  
  <p>Definitely not the right way.</p>
  
  <p>I think the right way is to develop a custom Swiper <code>effect</code> (like the built-in <code>cubeEffect</code>, <code>coverflowEffect</code>, ...) that simulates the wheel, without using <code>loop:true</code> that causes issues. For example, here a guy creates his own custom effect that then he sets in the <code>effect</code> attribute of Swiper:
  <a href="https://codepen.io/paralleluniv3rse/pen/yGQjMv" rel="noreferrer">https://codepen.io/paralleluniv3rse/pen/yGQjMv</a></p>
  
  <pre><code>...
  effect: "myCustomTransition",
  ...
  </code></pre>
  
  <p>How to develop a custom effect like the 3d wheel I need?</p>