Trying to add images to carousel dynamically not working
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am using jquery, bootstrap and try to create a carousel.
The carousel is working if I give carousel items statically but if I try to add images to carousel dynamically it failing.
jQuery script:
function loadPartners(section) {
var partners = section.partners;
// partners contain list of URL where the images are located.
$.each(partners, function( i, val ) {
console.log("success partners val: " + val.url);
var markup = "<div class=carousel-item> <div class="listing-item compact" ><a class=listing-img-container><div class=listing-img-content><span class=listing-compact-title> Day-View </span></div><img src=" + val.url+ "></a></div></div>";
// Adding carousel item to carousel
$('#partners #partners1 #partners2 #partners3').append(markup);
});
}
HMTL code.
<div id = "partners" class="container" style="opacity: 1;">
<div id = "partners1" class="row" style="opacity: 1;">
<div class="col-md-12">
<h4 class="headline margin-top-70 margin-bottom-30">Partners</h4>
</div>
<!-- Carousel -->
<div id = "partners2" class="col-md-8">
<div id = "partners3" class="carousel">
<!-- items will be added here -->
</div>
</div>
<!-- Carousel / End -->
</div>
</div>
Observations:
Opacity of is getting set to zero automatically.
If the opacity is made 1 in the browser inspect element, I see partner images visible but its paginated instead of appearing with in Carousel.
3.If I set the carousel item statically everything works fine.
javascript jquery html css carousel
edited Nov 26 '18 at 21:36
Shahnewaz
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
add a comment |
I am using jquery, bootstrap and try to create a carousel.
The carousel is working if I give carousel items statically but if I try to add images to carousel dynamically it failing.
jQuery script:
function loadPartners(section) {
var partners = section.partners;
// partners contain list of URL where the images are located.
$.each(partners, function( i, val ) {
console.log("success partners val: " + val.url);
var markup = "<div class=carousel-item> <div class="listing-item compact" ><a class=listing-img-container><div class=listing-img-content><span class=listing-compact-title> Day-View </span></div><img src=" + val.url+ "></a></div></div>";
// Adding carousel item to carousel
$('#partners #partners1 #partners2 #partners3').append(markup);
});
}
HMTL code.
<div id = "partners" class="container" style="opacity: 1;">
<div id = "partners1" class="row" style="opacity: 1;">
<div class="col-md-12">
<h4 class="headline margin-top-70 margin-bottom-30">Partners</h4>
</div>
<!-- Carousel -->
<div id = "partners2" class="col-md-8">
<div id = "partners3" class="carousel">
<!-- items will be added here -->
</div>
</div>
<!-- Carousel / End -->
</div>
</div>
Observations:
Opacity of is getting set to zero automatically.
If the opacity is made 1 in the browser inspect element, I see partner images visible but its paginated instead of appearing with in Carousel.
3.If I set the carousel item statically everything works fine.
javascript jquery html css carousel
edited Nov 26 '18 at 21:36
Shahnewaz
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54
add a comment |
I am using jquery, bootstrap and try to create a carousel.
The carousel is working if I give carousel items statically but if I try to add images to carousel dynamically it failing.
jQuery script:
function loadPartners(section) {
var partners = section.partners;
// partners contain list of URL where the images are located.
$.each(partners, function( i, val ) {
console.log("success partners val: " + val.url);
var markup = "<div class=carousel-item> <div class="listing-item compact" ><a class=listing-img-container><div class=listing-img-content><span class=listing-compact-title> Day-View </span></div><img src=" + val.url+ "></a></div></div>";
// Adding carousel item to carousel
$('#partners #partners1 #partners2 #partners3').append(markup);
});
}
HMTL code.
<div id = "partners" class="container" style="opacity: 1;">
<div id = "partners1" class="row" style="opacity: 1;">
<div class="col-md-12">
<h4 class="headline margin-top-70 margin-bottom-30">Partners</h4>
</div>
<!-- Carousel -->
<div id = "partners2" class="col-md-8">
<div id = "partners3" class="carousel">
<!-- items will be added here -->
</div>
</div>
<!-- Carousel / End -->
</div>
</div>
Observations:
Opacity of is getting set to zero automatically.
If the opacity is made 1 in the browser inspect element, I see partner images visible but its paginated instead of appearing with in Carousel.
3.If I set the carousel item statically everything works fine.
javascript jquery html css carousel
edited Nov 26 '18 at 21:36
Shahnewaz
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
I am using jquery, bootstrap and try to create a carousel.
The carousel is working if I give carousel items statically but if I try to add images to carousel dynamically it failing.
jQuery script:
function loadPartners(section) {
var partners = section.partners;
// partners contain list of URL where the images are located.
$.each(partners, function( i, val ) {
console.log("success partners val: " + val.url);
var markup = "<div class=carousel-item> <div class="listing-item compact" ><a class=listing-img-container><div class=listing-img-content><span class=listing-compact-title> Day-View </span></div><img src=" + val.url+ "></a></div></div>";
// Adding carousel item to carousel
$('#partners #partners1 #partners2 #partners3').append(markup);
});
}
HMTL code.
<div id = "partners" class="container" style="opacity: 1;">
<div id = "partners1" class="row" style="opacity: 1;">
<div class="col-md-12">
<h4 class="headline margin-top-70 margin-bottom-30">Partners</h4>
</div>
<!-- Carousel -->
<div id = "partners2" class="col-md-8">
<div id = "partners3" class="carousel">
<!-- items will be added here -->
</div>
</div>
<!-- Carousel / End -->
</div>
</div>
Observations:
Opacity of is getting set to zero automatically.
If the opacity is made 1 in the browser inspect element, I see partner images visible but its paginated instead of appearing with in Carousel.
3.If I set the carousel item statically everything works fine.
javascript jquery html css carousel
javascript jquery html css carousel
edited Nov 26 '18 at 21:36
Shahnewaz
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
edited Nov 26 '18 at 21:36
Shahnewaz
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
edited Nov 26 '18 at 21:36
Shahnewaz
394312
edited Nov 26 '18 at 21:36
Shahnewaz
394312
edited Nov 26 '18 at 21:36
Shahnewaz
394312
394312
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
asked Nov 26 '18 at 16:47
RenukaradhyaRenukaradhya
376822
376822
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54
add a comment |
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54
add a comment |
1 Answer
1
active
oldest
votes
Please try to initialize carousel manually after you will add all needed items:
$('.carousel').carousel();
It can be found in bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
via javascript section.
Also to make sure your carousel will not be initialized earlier replace carousel class with something different like: 'carousel-custom'. With that bootstrap will not initialize it automatically using your html markup.
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
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%2f53485610%2ftrying-to-add-images-to-carousel-dynamically-not-working%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
Please try to initialize carousel manually after you will add all needed items:
$('.carousel').carousel();
It can be found in bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
via javascript section.
Also to make sure your carousel will not be initialized earlier replace carousel class with something different like: 'carousel-custom'. With that bootstrap will not initialize it automatically using your html markup.
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
add a comment |
Please try to initialize carousel manually after you will add all needed items:
$('.carousel').carousel();
It can be found in bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
via javascript section.
Also to make sure your carousel will not be initialized earlier replace carousel class with something different like: 'carousel-custom'. With that bootstrap will not initialize it automatically using your html markup.
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
add a comment |
Please try to initialize carousel manually after you will add all needed items:
$('.carousel').carousel();
It can be found in bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
via javascript section.
Also to make sure your carousel will not be initialized earlier replace carousel class with something different like: 'carousel-custom'. With that bootstrap will not initialize it automatically using your html markup.
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
Please try to initialize carousel manually after you will add all needed items:
$('.carousel').carousel();
It can be found in bootstrap documentation: https://getbootstrap.com/docs/4.0/components/carousel/
via javascript section.
Also to make sure your carousel will not be initialized earlier replace carousel class with something different like: 'carousel-custom'. With that bootstrap will not initialize it automatically using your html markup.
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
answered Nov 26 '18 at 17:10
Łukasz BlaszyńskiŁukasz Blaszyński
1,095128
1,095128
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%2f53485610%2ftrying-to-add-images-to-carousel-dynamically-not-working%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
Have found a similar thread, take a look at stackoverflow.com/questions/50343760/…
– FabioLux
Nov 26 '18 at 16:54