English version at the end of this doc.
Carrossel estilo "roleta", como um carrossel de parquinho mesmo. Os elementos se movem em um círculo em perspectiva tentando obedecer a física :) mas como a imperfeição é bela, tem muita coisa diferente da realidade aí 😅
O HTML deve seguir essa estrutura:
<div id="alx_roulette"><!-- isso deve mudar no futuro, hoje esse id deve ser mantido -->
<div class="roullete-wrapper"><!-- onde os elementos do carrossel devem ficar contidos -->
<div class="roullete-item"><!-- um elemento do carrossel. todos devem ter essa classe e não precisam ser div, podem ser links (<a>). diagrame o conteúdo aí dentro -->
<div class="roullete-item-inner"><!-- elemento interno necessario para posicionar corretamente -->
A
</div>
</div>
<div class="roullete-item"><div class="roullete-item-inner">B</div></div>
<div class="roullete-item"><div class="roullete-item-inner">C</div></div>
<div class="roullete-item"><div class="roullete-item-inner">D</div></div>
<div class="roullete-item"><div class="roullete-item-inner">E</div></div>
</div>
<div class="roullete-bullets-wrapper"><!-- os elementos clicáveis para selecionar o item do carrossel devem ficar aqui dentro -->
<div class="roullete-bullets"></div><!-- um dos elementos clicáveis para atualizar aposição do carrossel. precisa ter o mesmo número de elementos aqui q há no conteiner anterior -->
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
</div>
</div>
O limite de elementos deve ser bem grande, não foi testado ou avaliado sobre isso, mas devem caber 100 elementos no carrossel tranquilamente.
Para funcionar, insira o seu HTML seguindo a estrutura acima, adicione o arquivo CSS entre as tags <head> e </head> e o JavaScript imediatamente antes da tag </body>. Carregue ambos usando as tags:
<link rel='stylesheet' href='rotacao.css' type='text/css' media='all' />
<script type="text/javascript" src="rotacao.js"></script>
<script type="text/javascript">
alx_roulette(); // comando para iniciar o carrossel
</script>
O "diametro" do círculo é a largura do elemento roullete-wrapper. A altura da elipse é a altura do roullete-wrapper. Você pode controlar isso usando CSS.
É possível usar apenas 1 link trocando o <div> pelo <a href=""> nos .roullete-item.
É possível usar o atributo transform do CSS em um elemento pai, ou simplesmente alterar o tamanho do .roullete-wrapper e elementos internos. Outra ideia é manter o .roullete-wrapper maior que a tela e adicionar overlay: hidden a um elemento pai.
Em andamento...
Se você encontrar bugs ou soluções melhores (olha q não tá difícil...), abra sua issue ou mande seu pull request! Vai ser ótimo!
...........
...........
Roullet style carousel. It's like a real playground carousel. The items move in a circle in perspective and try to obey physics :) but I think that imperfection is beautiful, so there are several things that differ from reality 😅
The HTML code need to be like this:
<div id="alx_roulette"><!-- it will be change, but today you want to use this ID -->
<div class="roullete-wrapper"><!-- it's the wrapper where all carousel elements have to be contained -->
<div class="roullete-item">A</div><!-- it's one carousel element. all the items have to receive this class. you can use other tags like <a> instead <div>. your design can be placed inside it. -->
<div class="roullete-item">B</div>
<div class="roullete-item">C</div>
<div class="roullete-item">D</div>
<div class="roullete-item">E</div>
</div>
<div class="roullete-bullets-wrapper"><!-- the clickable elements to select the carousel items must remain here -->
<div class="roullete-bullets"></div><!-- this is one of the clickable elements that update the carousel position. must have the same number of elements here and there, on previous wrapper -->
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
<div class="roullete-bullets"></div>
</div>
</div>
The elements limit must be very large, I haven't tested it yet, but 100 elements must fit in the carousel.
In order to carousel work, place your HTML following the above structure, add the CSS file between the tags <head> and </head> and the JavaScript imediatelly before the tag </body>. Load both using this tags:
<link rel='stylesheet' href='rotacao.css' type='text/css' media='all' />
<script type="text/javascript" src="rotacao.js"></script>
<script type="text/javascript">
alx_roulette(); // this is to start the carousel
</script>
The "diameter" of the circle is the width of roullete-wrapper. The height of the ellipse is the height of roullete-wrapper. You can control it through CSS.
You can add only one link. Just change the <div> for <a href=""> in the .roullete-item items.
Try to use the transform CSS attribute in a parent element, or simply change the size of .roullete-wrapper and inner elements. Other idea is to keep .roullete-wrapper bigger than viewport and add overlay: hidden to a parent element.
Soon...
If you find bugs or better solutions, please open an issue or send your pull request! It will be great!