Mixing
Image carousel in Angular 6
I need an image carousel for my application (Angular v6), while surfing I found this solution i,e using ngx-drag-scroll. Is there any other way to do the image carousel like this ?
Without using
jquery/javascript,using only Typescript - can I achieve this?
Any help full resources. I want a carousel to display the card component inside it.
angular typescript angular6 carousel asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
add a comment |
I need an image carousel for my application (Angular v6), while surfing I found this solution i,e using ngx-drag-scroll. Is there any other way to do the image carousel like this ?
Without using
jquery/javascript,using only Typescript - can I achieve this?
Any help full resources. I want a carousel to display the card component inside it.
angular typescript angular6 carousel asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03
add a comment |
I need an image carousel for my application (Angular v6), while surfing I found this solution i,e using ngx-drag-scroll. Is there any other way to do the image carousel like this ?
Without using
jquery/javascript,using only Typescript - can I achieve this?
Any help full resources. I want a carousel to display the card component inside it.
angular typescript angular6 carousel asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
I need an image carousel for my application (Angular v6), while surfing I found this solution i,e using ngx-drag-scroll. Is there any other way to do the image carousel like this ?
Without using
jquery/javascript,using only Typescript - can I achieve this?
Any help full resources. I want a carousel to display the card component inside it.
angular typescript angular6 carousel angular typescript angular6 carousel asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
edited Jan 2 at 3:42
Prashanth
asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
asked Dec 27 '18 at 9:06
PrashanthPrashanth
427317
427317
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03
add a comment |
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03
add a comment |
2 Answers
2
active
oldest
votes
Is there any other way to do the image carousel like this ?
Yes
Without using jquery/javascript,using only Typescript - can I achieve this?
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
Here is a StackBlitz demo of a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Card components).
It basically works like this: you give the SliderComponent DOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildren and ViewChild to get to the widths and scrollLeft property. The animation is achieved with the css scroll-behavior: smooth;.
Here is the main Component:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
answered Jan 2 at 5:16
TomTom
1,3271125
add a comment |
There are many solutions that would do what you need, here is the most simple one:
Structure your component something like this:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
You can use @ViewChild to get a hold of the wrapper in your component class so you can manipulate its' CSS values
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
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
});
}
});
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%2f53942415%2fimage-carousel-in-angular-6%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Is there any other way to do the image carousel like this ?
Yes
Without using jquery/javascript,using only Typescript - can I achieve this?
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
Here is a StackBlitz demo of a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Card components).
It basically works like this: you give the SliderComponent DOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildren and ViewChild to get to the widths and scrollLeft property. The animation is achieved with the css scroll-behavior: smooth;.
Here is the main Component:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
answered Jan 2 at 5:16
TomTom
1,3271125
add a comment |
Is there any other way to do the image carousel like this ?
Yes
Without using jquery/javascript,using only Typescript - can I achieve this?
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
Here is a StackBlitz demo of a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Card components).
It basically works like this: you give the SliderComponent DOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildren and ViewChild to get to the widths and scrollLeft property. The animation is achieved with the css scroll-behavior: smooth;.
Here is the main Component:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
answered Jan 2 at 5:16
TomTom
1,3271125
add a comment |
Is there any other way to do the image carousel like this ?
Yes
Without using jquery/javascript,using only Typescript - can I achieve this?
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
Here is a StackBlitz demo of a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Card components).
It basically works like this: you give the SliderComponent DOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildren and ViewChild to get to the widths and scrollLeft property. The animation is achieved with the css scroll-behavior: smooth;.
Here is the main Component:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
answered Jan 2 at 5:16
TomTom
1,3271125
Is there any other way to do the image carousel like this ?
Yes
Without using jquery/javascript,using only Typescript - can I achieve this?
Yes (well TypeScript is a super set of JavaScript and you still need to interact with the DOM but yeah)
Here is a StackBlitz demo of a simple implementation that seems to behave, look and feel like your requirements. (For example you can pass it Material Card components).
It basically works like this: you give the SliderComponent DOM Elements (SliderItemDirectives) and it will add the current most left Element's width to the scroll position of the slider container when you click right. Clicking left subtracts width. I have made use of ContentChildren and ViewChild to get to the widths and scrollLeft property. The animation is achieved with the css scroll-behavior: smooth;.
Here is the main Component:
import { Component, AfterContentInit, ContentChildren, ViewChild, QueryList, ElementRef } from '@angular/core';
import { SliderItemDirective } from './slider-item.directive';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements AfterContentInit {
@ContentChildren(SliderItemDirective, { read: ElementRef }) items
: QueryList<ElementRef<HTMLDivElement>>;
@ViewChild('slides') slidesContainer: ElementRef<HTMLDivElement>;
private slidesIndex = 0;
get currentItem(): ElementRef<HTMLDivElement> {
return this.items.find((item, index) => index === this.slidesIndex);
}
ngAfterContentInit() {
console.log('items', this.items);
}
ngAfterViewInit() {
console.log('slides', this.slidesContainer);
}
onClickLeft() {
this.slidesContainer.nativeElement.scrollLeft -= this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex > 0) {
this.slidesIndex--;
}
}
onClickRight() {
this.slidesContainer.nativeElement.scrollLeft += this.currentItem.nativeElement.offsetWidth;
if (this.slidesIndex < this.items.length - 1) {
this.slidesIndex++
}
}
}
answered Jan 2 at 5:16
TomTom
1,3271125
edited Jan 2 at 5:37
answered Jan 2 at 5:16
TomTom
1,3271125
answered Jan 2 at 5:16
TomTom
1,3271125
answered Jan 2 at 5:16
TomTom
1,3271125
1,3271125
add a comment |
add a comment |
There are many solutions that would do what you need, here is the most simple one:
Structure your component something like this:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
You can use @ViewChild to get a hold of the wrapper in your component class so you can manipulate its' CSS values
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
add a comment |
There are many solutions that would do what you need, here is the most simple one:
Structure your component something like this:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
You can use @ViewChild to get a hold of the wrapper in your component class so you can manipulate its' CSS values
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
add a comment |
There are many solutions that would do what you need, here is the most simple one:
Structure your component something like this:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
You can use @ViewChild to get a hold of the wrapper in your component class so you can manipulate its' CSS values
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
There are many solutions that would do what you need, here is the most simple one:
Structure your component something like this:
<component>
<div class="wrapper">
<card>
<card>
<card>
...
<card>
</div class="wrapper">
</component>
Use CSS to hide overflow on the x axis of the component, then programmatically add and subtract left margin on the wrapper when buttons are clicked.
You can use @ViewChild to get a hold of the wrapper in your component class so you can manipulate its' CSS values
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
answered Dec 27 '18 at 9:32
Marko KacanskiMarko Kacanski
171515
171515
add a comment |
add a comment |
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.
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%2f53942415%2fimage-carousel-in-angular-6%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
try UI-carousel npmjs.com/package/ui-carousel
– Manohar Gavit
Dec 27 '18 at 11:03