Angular 6 with Swiper dynamic content issue
Angular 6 with Swiper dynamic content issue.
I wanted to rearrarange the swiper slides dynamically based on user preference
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<NG6componet1 ></NG6componet1>
</div>
<div class="swiper-slide">
<NG6componet2 ></NG6componet2>
</div>
<div class="swiper-slide">
<NG6componet3 ></NG6componet3>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
if users prefres NG6componet2, NG6componet1, NG6componet3, i wanted to create the slides accordingly,
I did this using AngularJS as below,
<div class="swiper-container">
<div class='swiper-wrapper'>
<div ng-repeat="selectedview in Ctrlr.View">
<div ui-view='{{selectedview}}' ></div>
</div>
</div>
<div class='swiper-button-prev'></div>
<div class='swiper-button-next'></div>
I also tried to create slide using below
this.swiper.appendSlide('<div class="swiper-slide"><NG6componet1></NG6componet1></div>');
this.swiper.update(true);
but its adding the div only not loading the component
<div class="swiper-slide" style="width: 431.25px; margin-right: 20px;">
<NG6componet1></NG6componet1>
</div>
looking help for a working solution.
angular swiper asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
add a comment |
Angular 6 with Swiper dynamic content issue.
I wanted to rearrarange the swiper slides dynamically based on user preference
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<NG6componet1 ></NG6componet1>
</div>
<div class="swiper-slide">
<NG6componet2 ></NG6componet2>
</div>
<div class="swiper-slide">
<NG6componet3 ></NG6componet3>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
if users prefres NG6componet2, NG6componet1, NG6componet3, i wanted to create the slides accordingly,
I did this using AngularJS as below,
<div class="swiper-container">
<div class='swiper-wrapper'>
<div ng-repeat="selectedview in Ctrlr.View">
<div ui-view='{{selectedview}}' ></div>
</div>
</div>
<div class='swiper-button-prev'></div>
<div class='swiper-button-next'></div>
I also tried to create slide using below
this.swiper.appendSlide('<div class="swiper-slide"><NG6componet1></NG6componet1></div>');
this.swiper.update(true);
but its adding the div only not loading the component
<div class="swiper-slide" style="width: 431.25px; margin-right: 20px;">
<NG6componet1></NG6componet1>
</div>
looking help for a working solution.
angular swiper asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
add a comment |
Angular 6 with Swiper dynamic content issue.
I wanted to rearrarange the swiper slides dynamically based on user preference
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<NG6componet1 ></NG6componet1>
</div>
<div class="swiper-slide">
<NG6componet2 ></NG6componet2>
</div>
<div class="swiper-slide">
<NG6componet3 ></NG6componet3>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
if users prefres NG6componet2, NG6componet1, NG6componet3, i wanted to create the slides accordingly,
I did this using AngularJS as below,
<div class="swiper-container">
<div class='swiper-wrapper'>
<div ng-repeat="selectedview in Ctrlr.View">
<div ui-view='{{selectedview}}' ></div>
</div>
</div>
<div class='swiper-button-prev'></div>
<div class='swiper-button-next'></div>
I also tried to create slide using below
this.swiper.appendSlide('<div class="swiper-slide"><NG6componet1></NG6componet1></div>');
this.swiper.update(true);
but its adding the div only not loading the component
<div class="swiper-slide" style="width: 431.25px; margin-right: 20px;">
<NG6componet1></NG6componet1>
</div>
looking help for a working solution.
angular swiper asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
Angular 6 with Swiper dynamic content issue.
I wanted to rearrarange the swiper slides dynamically based on user preference
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<NG6componet1 ></NG6componet1>
</div>
<div class="swiper-slide">
<NG6componet2 ></NG6componet2>
</div>
<div class="swiper-slide">
<NG6componet3 ></NG6componet3>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
if users prefres NG6componet2, NG6componet1, NG6componet3, i wanted to create the slides accordingly,
I did this using AngularJS as below,
<div class="swiper-container">
<div class='swiper-wrapper'>
<div ng-repeat="selectedview in Ctrlr.View">
<div ui-view='{{selectedview}}' ></div>
</div>
</div>
<div class='swiper-button-prev'></div>
<div class='swiper-button-next'></div>
I also tried to create slide using below
this.swiper.appendSlide('<div class="swiper-slide"><NG6componet1></NG6componet1></div>');
this.swiper.update(true);
but its adding the div only not loading the component
<div class="swiper-slide" style="width: 431.25px; margin-right: 20px;">
<NG6componet1></NG6componet1>
</div>
looking help for a working solution.
angular swiper angular swiper asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
asked Nov 21 '18 at 7:54
AbhishekAbhishek
12
12
add a comment |
add a comment |
0
active
oldest
votes
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%2f53407445%2fangular-6-with-swiper-dynamic-content-issue%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53407445%2fangular-6-with-swiper-dynamic-content-issue%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
