Como posso adicionar rolagem infinita a este carrossel Angular?
Eu segui este artigo fantástico, que demonstra como criar um carrossel simples com o uso de duas diretivas e um componente no Angula
O conjunto de recursos é muito limitado e não inclui um 'rolagem infinit ', que eu gostaria de adicionar.
De 'inifinite scroll '- Quero dizer algo parecido com este equivalente jQuery:
var carousel = $('#carousel'),
threshold = 150,
slideWidth = 500,
dragStart,
dragEnd;
$('#next').click(function() {
shiftSlide(-1)
})
$('#prev').click(function() {
shiftSlide(1)
})
carousel.on('mousedown', function() {
if (carousel.hasClass('transition')) return;
dragStart = event.pageX;
$(this).on('mousemove', function() {
dragEnd = event.pageX;
$(this).css('transform', 'translateX(' + dragPos() + 'px)')
})
$(document).on('mouseup', function() {
if (dragPos() > threshold) {
return shiftSlide(1)
}
if (dragPos() < -threshold) {
return shiftSlide(-1)
}
shiftSlide(0);
})
});
function dragPos() {
return dragEnd - dragStart;
}
function shiftSlide(direction) {
if (carousel.hasClass('transition')) return;
dragEnd = dragStart;
$(document).off('mouseup')
carousel.off('mousemove')
.addClass('transition')
.css('transform', 'translateX(' + (direction * slideWidth) + 'px)');
setTimeout(function() {
if (direction === 1) {
$('.slide:first').before($('.slide:last'));
} else if (direction === -1) {
$('.slide:last').after($('.slide:first'));
}
carousel.removeClass('transition')
carousel.css('transform', 'translateX(0px)');
}, 700)
}
$carousel-width: 600px;
$carousel-height: 300px;
body {
background: #333;
color: #fff;
font-size: 22pt;
text-align: center;
font-family: 'Teko';
letter-spacing: 0.15em;
}
body * {
-webkit-user-select: none
}
.wrap {
position: relative;
width: $carousel-width;
height: 300px;
margin: 0 auto;
box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.25);
}
.window {
overflow: hidden;
position: relative;
background: #222;
}
#carousel {
width: 10000px;
position: relative;
top: 0;
left: -450px;
}
.slide {
height: 300px;
width: 500px;
cursor: pointer;
float: left;
display: flex;
flex-direction: column;
justify-content: center;
}
.slide#b1 {
background: #556270
}
.slide#b2 {
background: #4ECDC4
}
.slide#b3 {
background: #9CE462
}
.slide#b4 {
background: #FF6B6B
}
.slide#b5 {
background: #C44D33
}
#prev,
#next {
cursor: pointer;
position: absolute;
bottom: -40px;
font-size: 14pt;
}
#prev {
left: 0
}
#next {
right: 0
}
.transition {
transition: .7s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>INFINITE CAROUSEL</h1>
<div class="wrap">
<div class="window">
<div id="carousel">
<span class="slide" id="b1">SLIDE-1</span>
<span class="slide" id="b2">SLIDE-2</span>
<span class="slide" id="b3">SLIDE-3</span>
<span class="slide" id="b4">SLIDE-4</span>
<span class="slide" id="b5">SLIDE-5</span>
</div>
</div>
<span id="prev">PREV</span>
<span id="next">NEXT</span>
</div>
(o carrossel pode ser rolado infinitamente em cada direção, mantendo a ordem correta dos slides)
Tentei várias abordagens para adicionar esse recurso e nenhuma foi bem-sucedida. O que tentei (e subseqüentemente excluí):
Adicionar e remover dinamicamente blocos de slides de ambos os lados do subconjunto atualmente visualizado - por exemplo, se o carrossel contiver 3 slides, eu os duplicaria em ambos os lados do `1-2-3 1-2-3 original e adicione / remova blocos enquanto o usuário rola. Isso quase funcionou, o único problema foi que o Angular ficou confuso ao remover pedaços e girou o carrossel como louco, porque ainda tinha uma referência a um número de slide que não existia mai
Adicionar e remover dinamicamente slides únicos, semelhante à abordagem acima. O mesmo problema
Diretamente duplicando os slides centenas de vezes. Isso funciona, mas obviamente é terrivelmente mal-desempenho e parece idiot
Aqui está umstackblitz mostrando o que tenho até agora.