how to disable ngx slick slider when few items
I'm working with ngx-slick-slider (https://www.npmjs.com/package/ngx-slick-carousel) and it doesn't seem to have a config to disable the slider when there are few items. When there are less items than the needed to display the carousel they displayed centered in the screen. How can i achieve this?
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
(breakpoint)="breakpoint($event)"
(afterChange)="afterChange($event)"
(beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let card of data" class="slide">
<div class="card-container">
<card-component
[thecard]="card"
></card-component>
</div>
</div>
</ngx-slick-carousel>
</div>
component.ts:
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false
};
slickInit(e:any) {
console.log('slick initialized');
}
breakpoint(e:any) {
console.log('breakpoint');
}
afterChange(e:any) {
console.log('afterChange');
}
beforeChange(e:any) {
console.log('beforeChange');
}
css angular slick-slider
asked Jan 18 at 17:39
GuilleGuille
891213
add a comment |
I'm working with ngx-slick-slider (https://www.npmjs.com/package/ngx-slick-carousel) and it doesn't seem to have a config to disable the slider when there are few items. When there are less items than the needed to display the carousel they displayed centered in the screen. How can i achieve this?
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
(breakpoint)="breakpoint($event)"
(afterChange)="afterChange($event)"
(beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let card of data" class="slide">
<div class="card-container">
<card-component
[thecard]="card"
></card-component>
</div>
</div>
</ngx-slick-carousel>
</div>
component.ts:
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false
};
slickInit(e:any) {
console.log('slick initialized');
}
breakpoint(e:any) {
console.log('breakpoint');
}
afterChange(e:any) {
console.log('afterChange');
}
beforeChange(e:any) {
console.log('beforeChange');
}
css angular slick-slider
asked Jan 18 at 17:39
GuilleGuille
891213
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53
add a comment |
I'm working with ngx-slick-slider (https://www.npmjs.com/package/ngx-slick-carousel) and it doesn't seem to have a config to disable the slider when there are few items. When there are less items than the needed to display the carousel they displayed centered in the screen. How can i achieve this?
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
(breakpoint)="breakpoint($event)"
(afterChange)="afterChange($event)"
(beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let card of data" class="slide">
<div class="card-container">
<card-component
[thecard]="card"
></card-component>
</div>
</div>
</ngx-slick-carousel>
</div>
component.ts:
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false
};
slickInit(e:any) {
console.log('slick initialized');
}
breakpoint(e:any) {
console.log('breakpoint');
}
afterChange(e:any) {
console.log('afterChange');
}
beforeChange(e:any) {
console.log('beforeChange');
}
css angular slick-slider
asked Jan 18 at 17:39
GuilleGuille
891213
I'm working with ngx-slick-slider (https://www.npmjs.com/package/ngx-slick-carousel) and it doesn't seem to have a config to disable the slider when there are few items. When there are less items than the needed to display the carousel they displayed centered in the screen. How can i achieve this?
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel"
#slickModal="slick-carousel"
[config]="slideConfig"
(init)="slickInit($event)"
(breakpoint)="breakpoint($event)"
(afterChange)="afterChange($event)"
(beforeChange)="beforeChange($event)">
<div ngxSlickItem *ngFor="let card of data" class="slide">
<div class="card-container">
<card-component
[thecard]="card"
></card-component>
</div>
</div>
</ngx-slick-carousel>
</div>
component.ts:
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false
};
slickInit(e:any) {
console.log('slick initialized');
}
breakpoint(e:any) {
console.log('breakpoint');
}
afterChange(e:any) {
console.log('afterChange');
}
beforeChange(e:any) {
console.log('beforeChange');
}
css angular slick-slider
css angular slick-slider
asked Jan 18 at 17:39
GuilleGuille
891213
asked Jan 18 at 17:39
GuilleGuille
891213
edited Jan 18 at 17:52
Guille
asked Jan 18 at 17:39
GuilleGuille
891213
asked Jan 18 at 17:39
GuilleGuille
891213
asked Jan 18 at 17:39
GuilleGuille
891213
891213
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53
add a comment |
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53
add a comment |
1 Answer
1
active
oldest
votes
I see two ways to go about this:
Disable the buttons in the slick config
{ 'arrows': false }
and then create custom elements in your template that hook up toslickNext()andslickPrev(). You can now disable those buttons using something like*ngIf="slides.length <= mySlideLimitYou could also create custom templates for your forward/previous buttons in the config using the
nextArrowandprevArrowconfig options.
I persionallly prefer option 1.
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel" ...>
</ngx-slick-carousel>
<button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
<button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>
Component.ts
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false,
"arrows": false,
};
...
You can find more info on all that suff here: http://kenwheeler.github.io/slick/
answered Jan 18 at 18:19
ThePenguinThePenguin
737
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
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%2f54258949%2fhow-to-disable-ngx-slick-slider-when-few-items%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
I see two ways to go about this:
Disable the buttons in the slick config
{ 'arrows': false }
and then create custom elements in your template that hook up toslickNext()andslickPrev(). You can now disable those buttons using something like*ngIf="slides.length <= mySlideLimitYou could also create custom templates for your forward/previous buttons in the config using the
nextArrowandprevArrowconfig options.
I persionallly prefer option 1.
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel" ...>
</ngx-slick-carousel>
<button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
<button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>
Component.ts
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false,
"arrows": false,
};
...
You can find more info on all that suff here: http://kenwheeler.github.io/slick/
answered Jan 18 at 18:19
ThePenguinThePenguin
737
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
add a comment |
I see two ways to go about this:
Disable the buttons in the slick config
{ 'arrows': false }
and then create custom elements in your template that hook up toslickNext()andslickPrev(). You can now disable those buttons using something like*ngIf="slides.length <= mySlideLimitYou could also create custom templates for your forward/previous buttons in the config using the
nextArrowandprevArrowconfig options.
I persionallly prefer option 1.
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel" ...>
</ngx-slick-carousel>
<button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
<button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>
Component.ts
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false,
"arrows": false,
};
...
You can find more info on all that suff here: http://kenwheeler.github.io/slick/
answered Jan 18 at 18:19
ThePenguinThePenguin
737
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
add a comment |
I see two ways to go about this:
Disable the buttons in the slick config
{ 'arrows': false }
and then create custom elements in your template that hook up toslickNext()andslickPrev(). You can now disable those buttons using something like*ngIf="slides.length <= mySlideLimitYou could also create custom templates for your forward/previous buttons in the config using the
nextArrowandprevArrowconfig options.
I persionallly prefer option 1.
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel" ...>
</ngx-slick-carousel>
<button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
<button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>
Component.ts
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false,
"arrows": false,
};
...
You can find more info on all that suff here: http://kenwheeler.github.io/slick/
answered Jan 18 at 18:19
ThePenguinThePenguin
737
I see two ways to go about this:
Disable the buttons in the slick config
{ 'arrows': false }
and then create custom elements in your template that hook up toslickNext()andslickPrev(). You can now disable those buttons using something like*ngIf="slides.length <= mySlideLimitYou could also create custom templates for your forward/previous buttons in the config using the
nextArrowandprevArrowconfig options.
I persionallly prefer option 1.
template:
<div class="scrolling-wrapper" *ngIf="hasUsage">
<ngx-slick-carousel class="carousel" ...>
</ngx-slick-carousel>
<button *ngIf="data.length >= 3" (click)="slickModal.slickNext">Next</button>
<button *ngIf="data.length >= 3" (click)="slickModal.slickPrev">Prev</button>
</div>
Component.ts
slideConfig = {
"slidesToShow": 7,
"slidesToScroll": 4,
"infinite": false,
"arrows": false,
};
...
You can find more info on all that suff here: http://kenwheeler.github.io/slick/
answered Jan 18 at 18:19
ThePenguinThePenguin
737
answered Jan 18 at 18:19
ThePenguinThePenguin
737
answered Jan 18 at 18:19
ThePenguinThePenguin
737
answered Jan 18 at 18:19
ThePenguinThePenguin
737
737
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
add a comment |
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
I appreciate your answer, but the problem is not the arrows since they hide when the items are less than 7, which is what's configured in slideConfig object. The issue is when less than 7 items are displayed they are centered in the screen. I know i can use ngClass with a condition and overwrite the slider classes to achieve this, but i was looking for a way to avoid doing it.
– Guille
Jan 18 at 18:45
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%2f54258949%2fhow-to-disable-ngx-slick-slider-when-few-items%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
Can you show your code? I`d suggest just using a for loop to count your items, then en IF/ELSE statement on what is being rendered in your view
– Tobias Barsnes
Jan 18 at 17:42
yeah, i was thinking about that, but may be there was a config to do it. I've added the code. thanks.
– Guille
Jan 18 at 17:53