Mixing
How can I add infinite scrolling to this Angular carousel?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
0
I followed this fantastic article, that demonstrates how to make a simple carousel with the use of two directives and one component in Angular.
The feature set is very limited, and does not include an 'infinite scrolling' mode, which I would like to add.
By 'inifinite scroll' - I mean something like this jQuery equivalent:
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>(the carousel can be infinitely scrolled in each direction whilst keeping the correct order of the slides)
I have tried a number of approaches to add this feature and none have succeeded, what I've tried (and subsequently deleted):
Dynamically adding and removing chunks of slides either side of the currently viewed subset - i.e. if the carousel contained 3 slides I would duplicate them either side of the original `1-2-3 1-2-3, and then add/remove chunks as the user scrolls. This almost worked, the only problem was that Angular got confused when removing chunks and spun the carousel like mad, because it still had a reference to a slide number that no longer existed.
Dynamically adding and removing single slides, similar to the above approach. Same issue.
Straight up duplicating the slides hundreds of times. This works but is obviously horribly un-performant and seems dumb.
Here is a stackblitz showing what I've got so far.
angular asked Jan 2 at 15:10
hevans900hevans900
18618
|
show 3 more comments
0
I followed this fantastic article, that demonstrates how to make a simple carousel with the use of two directives and one component in Angular.
The feature set is very limited, and does not include an 'infinite scrolling' mode, which I would like to add.
By 'inifinite scroll' - I mean something like this jQuery equivalent:
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>(the carousel can be infinitely scrolled in each direction whilst keeping the correct order of the slides)
I have tried a number of approaches to add this feature and none have succeeded, what I've tried (and subsequently deleted):
Dynamically adding and removing chunks of slides either side of the currently viewed subset - i.e. if the carousel contained 3 slides I would duplicate them either side of the original `1-2-3 1-2-3, and then add/remove chunks as the user scrolls. This almost worked, the only problem was that Angular got confused when removing chunks and spun the carousel like mad, because it still had a reference to a slide number that no longer existed.
Dynamically adding and removing single slides, similar to the above approach. Same issue.
Straight up duplicating the slides hundreds of times. This works but is obviously horribly un-performant and seems dumb.
Here is a stackblitz showing what I've got so far.
angular asked Jan 2 at 15:10
hevans900hevans900
18618
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15
|
show 3 more comments
0
0
0
I followed this fantastic article, that demonstrates how to make a simple carousel with the use of two directives and one component in Angular.
The feature set is very limited, and does not include an 'infinite scrolling' mode, which I would like to add.
By 'inifinite scroll' - I mean something like this jQuery equivalent:
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>(the carousel can be infinitely scrolled in each direction whilst keeping the correct order of the slides)
I have tried a number of approaches to add this feature and none have succeeded, what I've tried (and subsequently deleted):
Dynamically adding and removing chunks of slides either side of the currently viewed subset - i.e. if the carousel contained 3 slides I would duplicate them either side of the original `1-2-3 1-2-3, and then add/remove chunks as the user scrolls. This almost worked, the only problem was that Angular got confused when removing chunks and spun the carousel like mad, because it still had a reference to a slide number that no longer existed.
Dynamically adding and removing single slides, similar to the above approach. Same issue.
Straight up duplicating the slides hundreds of times. This works but is obviously horribly un-performant and seems dumb.
Here is a stackblitz showing what I've got so far.
angular asked Jan 2 at 15:10
hevans900hevans900
18618
I followed this fantastic article, that demonstrates how to make a simple carousel with the use of two directives and one component in Angular.
The feature set is very limited, and does not include an 'infinite scrolling' mode, which I would like to add.
By 'inifinite scroll' - I mean something like this jQuery equivalent:
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>(the carousel can be infinitely scrolled in each direction whilst keeping the correct order of the slides)
I have tried a number of approaches to add this feature and none have succeeded, what I've tried (and subsequently deleted):
Dynamically adding and removing chunks of slides either side of the currently viewed subset - i.e. if the carousel contained 3 slides I would duplicate them either side of the original `1-2-3 1-2-3, and then add/remove chunks as the user scrolls. This almost worked, the only problem was that Angular got confused when removing chunks and spun the carousel like mad, because it still had a reference to a slide number that no longer existed.
Dynamically adding and removing single slides, similar to the above approach. Same issue.
Straight up duplicating the slides hundreds of times. This works but is obviously horribly un-performant and seems dumb.
Here is a stackblitz showing what I've got so far.
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>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>asked Jan 2 at 15:10
hevans900hevans900
18618
asked Jan 2 at 15:10
hevans900hevans900
18618
asked Jan 2 at 15:10
hevans900hevans900
18618
asked Jan 2 at 15:10
hevans900hevans900
18618
asked Jan 2 at 15:10
hevans900hevans900
18618
18618
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15
|
show 3 more comments
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15
|
show 3 more comments
1 Answer
1
active
oldest
votes
1
Updated
(before I reorder the queryList when we are in the last but one and in the second slider)
there're a work-around. The key is reorder the QueryList and change the currentSlide when you're in the last (before make a next) or the first one (before make a prev)
First change the function transitionCarrousel to allow an "animate" in 0 seconds
private buildAnimation(offset, time: any) {
return this.builder.build([
animate(time == null ? this.timing : 0,
style({ transform: `translateX(-${offset}px)` }))
]);
}
The functions next and prev becomes like
next() {
//if we are in the last
if (this.currentSlide + 1 == this.items.length) {
//reorder the QueryList,
let arr = this.items.toArray();
let first = arr.shift(); //remove the first element
arr = arr.concat([first]); //Concat at last of the array
this.items.reset(arr);
this.currentSlide--; //less currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide = (this.currentSlide + 1) % this.items.length;
this.transitionCarousel(null);
}
prev() {
//If we are in the first one
if (this.currentSlide == 0) {
let arr = this.items.toArray();
let last = arr.pop(); //remove the last element
arr = [last].concat(arr); //create an array with the last element+arr
this.items.reset(arr);
this.currentSlide++; //change the currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide =
(this.currentSlide - 1 + this.items.length) % this.items.length;
this.transitionCarousel(null);
}
You can see work in the stackblitz
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54008709%2fhow-can-i-add-infinite-scrolling-to-this-angular-carousel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Updated
(before I reorder the queryList when we are in the last but one and in the second slider)
there're a work-around. The key is reorder the QueryList and change the currentSlide when you're in the last (before make a next) or the first one (before make a prev)
First change the function transitionCarrousel to allow an "animate" in 0 seconds
private buildAnimation(offset, time: any) {
return this.builder.build([
animate(time == null ? this.timing : 0,
style({ transform: `translateX(-${offset}px)` }))
]);
}
The functions next and prev becomes like
next() {
//if we are in the last
if (this.currentSlide + 1 == this.items.length) {
//reorder the QueryList,
let arr = this.items.toArray();
let first = arr.shift(); //remove the first element
arr = arr.concat([first]); //Concat at last of the array
this.items.reset(arr);
this.currentSlide--; //less currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide = (this.currentSlide + 1) % this.items.length;
this.transitionCarousel(null);
}
prev() {
//If we are in the first one
if (this.currentSlide == 0) {
let arr = this.items.toArray();
let last = arr.pop(); //remove the last element
arr = [last].concat(arr); //create an array with the last element+arr
this.items.reset(arr);
this.currentSlide++; //change the currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide =
(this.currentSlide - 1 + this.items.length) % this.items.length;
this.transitionCarousel(null);
}
You can see work in the stackblitz
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
add a comment |
1
Updated
(before I reorder the queryList when we are in the last but one and in the second slider)
there're a work-around. The key is reorder the QueryList and change the currentSlide when you're in the last (before make a next) or the first one (before make a prev)
First change the function transitionCarrousel to allow an "animate" in 0 seconds
private buildAnimation(offset, time: any) {
return this.builder.build([
animate(time == null ? this.timing : 0,
style({ transform: `translateX(-${offset}px)` }))
]);
}
The functions next and prev becomes like
next() {
//if we are in the last
if (this.currentSlide + 1 == this.items.length) {
//reorder the QueryList,
let arr = this.items.toArray();
let first = arr.shift(); //remove the first element
arr = arr.concat([first]); //Concat at last of the array
this.items.reset(arr);
this.currentSlide--; //less currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide = (this.currentSlide + 1) % this.items.length;
this.transitionCarousel(null);
}
prev() {
//If we are in the first one
if (this.currentSlide == 0) {
let arr = this.items.toArray();
let last = arr.pop(); //remove the last element
arr = [last].concat(arr); //create an array with the last element+arr
this.items.reset(arr);
this.currentSlide++; //change the currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide =
(this.currentSlide - 1 + this.items.length) % this.items.length;
this.transitionCarousel(null);
}
You can see work in the stackblitz
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
add a comment |
1
1
1
Updated
(before I reorder the queryList when we are in the last but one and in the second slider)
there're a work-around. The key is reorder the QueryList and change the currentSlide when you're in the last (before make a next) or the first one (before make a prev)
First change the function transitionCarrousel to allow an "animate" in 0 seconds
private buildAnimation(offset, time: any) {
return this.builder.build([
animate(time == null ? this.timing : 0,
style({ transform: `translateX(-${offset}px)` }))
]);
}
The functions next and prev becomes like
next() {
//if we are in the last
if (this.currentSlide + 1 == this.items.length) {
//reorder the QueryList,
let arr = this.items.toArray();
let first = arr.shift(); //remove the first element
arr = arr.concat([first]); //Concat at last of the array
this.items.reset(arr);
this.currentSlide--; //less currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide = (this.currentSlide + 1) % this.items.length;
this.transitionCarousel(null);
}
prev() {
//If we are in the first one
if (this.currentSlide == 0) {
let arr = this.items.toArray();
let last = arr.pop(); //remove the last element
arr = [last].concat(arr); //create an array with the last element+arr
this.items.reset(arr);
this.currentSlide++; //change the currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide =
(this.currentSlide - 1 + this.items.length) % this.items.length;
this.transitionCarousel(null);
}
You can see work in the stackblitz
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
Updated
(before I reorder the queryList when we are in the last but one and in the second slider)
there're a work-around. The key is reorder the QueryList and change the currentSlide when you're in the last (before make a next) or the first one (before make a prev)
First change the function transitionCarrousel to allow an "animate" in 0 seconds
private buildAnimation(offset, time: any) {
return this.builder.build([
animate(time == null ? this.timing : 0,
style({ transform: `translateX(-${offset}px)` }))
]);
}
The functions next and prev becomes like
next() {
//if we are in the last
if (this.currentSlide + 1 == this.items.length) {
//reorder the QueryList,
let arr = this.items.toArray();
let first = arr.shift(); //remove the first element
arr = arr.concat([first]); //Concat at last of the array
this.items.reset(arr);
this.currentSlide--; //less currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide = (this.currentSlide + 1) % this.items.length;
this.transitionCarousel(null);
}
prev() {
//If we are in the first one
if (this.currentSlide == 0) {
let arr = this.items.toArray();
let last = arr.pop(); //remove the last element
arr = [last].concat(arr); //create an array with the last element+arr
this.items.reset(arr);
this.currentSlide++; //change the currentSlide
this.transitionCarousel(0); //execute the animation in 0 seconds
}
this.currentSlide =
(this.currentSlide - 1 + this.items.length) % this.items.length;
this.transitionCarousel(null);
}
You can see work in the stackblitz
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
edited Jan 3 at 7:23
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
answered Jan 2 at 21:48
EliseoEliseo
6,9691314
6,9691314
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
add a comment |
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
Well that is just clever. Thank you for your help, accepted your answer!
– hevans900
Jan 3 at 13:08
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54008709%2fhow-can-i-add-infinite-scrolling-to-this-angular-carousel%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Seems to work for me ... Do you have any issue to report ?
– trichetriche
Jan 2 at 15:11
The carousel works, that wasn't my question - I am asking for ideas on how to add infinite scrolling to it
– hevans900
Jan 2 at 15:13
But you do have infinite scrolling on it ! That's why I'm asking if you have an issue, because SOF is for issues. If you want to find the best code to make an infinite scroll, I'm not sure this is the place to ask this. Try Code Review maybe ?
– trichetriche
Jan 2 at 15:14
Oh I see the issue. You don't like your carousel going back to the first slide, you would like it to consider it as a fourth slide ?
– trichetriche
Jan 2 at 15:15
No I don't have infinite scrolling - I have something that scrolls horizontally backwards and resets when you go past the maximum or before the minimum number of slides. This is basically a bug that I am asking for help to fix.
– hevans900
Jan 2 at 15:15