Load bootstrap slider after the text fade in
2
I have a full-width background image which appears first when the page loads. And after 5 seconds I have a text that fades in.
setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>After 5 seconds of the fadeIn text, I want to load the bootstrap slider. How is this possible?
I tried using setTimeout function using 10 sec
setTimeout(function(){
$('.carousel').carousel({
interval: 5000
});
}, 10000)
This doesn't seem to be working.
javascript jquery twitter-bootstrap carousel
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
add a comment |
2
I have a full-width background image which appears first when the page loads. And after 5 seconds I have a text that fades in.
setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>After 5 seconds of the fadeIn text, I want to load the bootstrap slider. How is this possible?
I tried using setTimeout function using 10 sec
setTimeout(function(){
$('.carousel').carousel({
interval: 5000
});
}, 10000)
This doesn't seem to be working.
javascript jquery twitter-bootstrap carousel
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26
add a comment |
2
2
2
I have a full-width background image which appears first when the page loads. And after 5 seconds I have a text that fades in.
setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>After 5 seconds of the fadeIn text, I want to load the bootstrap slider. How is this possible?
I tried using setTimeout function using 10 sec
setTimeout(function(){
$('.carousel').carousel({
interval: 5000
});
}, 10000)
This doesn't seem to be working.
javascript jquery twitter-bootstrap carousel
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
I have a full-width background image which appears first when the page loads. And after 5 seconds I have a text that fades in.
setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>After 5 seconds of the fadeIn text, I want to load the bootstrap slider. How is this possible?
I tried using setTimeout function using 10 sec
setTimeout(function(){
$('.carousel').carousel({
interval: 5000
});
}, 10000)
This doesn't seem to be working.
setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>setTimeout(function() {
$('.fadetext').fadeIn("slow");
}, 5000)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bigbackgroundimage">
<div class="fadetext" style="display: none;">
<img src="images/home/home-text.png" alt="">
</div>
</div>javascript jquery twitter-bootstrap carousel
javascript jquery twitter-bootstrap carousel
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
edited Nov 21 '18 at 15:54
Pete
41.7k1877120
41.7k1877120
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
asked Nov 21 '18 at 15:12
SantoshSantosh
94621234
94621234
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26
add a comment |
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26
add a comment |
2 Answers
2
active
oldest
votes
3
Edit per your comments - start off the carousel hidden with display:none in your css, then in the callback function, show the carousel before you initialise it
setTimeout(function() {
$('.fadetext').fadeIn("slow", function() {
// this is run after the fadeIn has finished
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000) // can set this to 5 seconds
});
}, 5000)
.carousel {
display:none;
}
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
add a comment |
1
You could try using .done()
$('.fadetext').fadeIn("slow").done(function() {
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000);
});
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
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%2f53415062%2fload-bootstrap-slider-after-the-text-fade-in%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
3
Edit per your comments - start off the carousel hidden with display:none in your css, then in the callback function, show the carousel before you initialise it
setTimeout(function() {
$('.fadetext').fadeIn("slow", function() {
// this is run after the fadeIn has finished
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000) // can set this to 5 seconds
});
}, 5000)
.carousel {
display:none;
}
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
add a comment |
3
Edit per your comments - start off the carousel hidden with display:none in your css, then in the callback function, show the carousel before you initialise it
setTimeout(function() {
$('.fadetext').fadeIn("slow", function() {
// this is run after the fadeIn has finished
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000) // can set this to 5 seconds
});
}, 5000)
.carousel {
display:none;
}
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
add a comment |
3
3
3
Edit per your comments - start off the carousel hidden with display:none in your css, then in the callback function, show the carousel before you initialise it
setTimeout(function() {
$('.fadetext').fadeIn("slow", function() {
// this is run after the fadeIn has finished
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000) // can set this to 5 seconds
});
}, 5000)
.carousel {
display:none;
}
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
Edit per your comments - start off the carousel hidden with display:none in your css, then in the callback function, show the carousel before you initialise it
setTimeout(function() {
$('.fadetext').fadeIn("slow", function() {
// this is run after the fadeIn has finished
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000) // can set this to 5 seconds
});
}, 5000)
.carousel {
display:none;
}
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
edited Nov 21 '18 at 15:39
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
answered Nov 21 '18 at 15:29
PetePete
41.7k1877120
41.7k1877120
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
add a comment |
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
But I can see the carousel already loaded in the browser. Isn't it possible to hide it first only show the carousel only after 5 sec of text fade?
– Santosh
Nov 21 '18 at 15:36
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
@Santosh See edit above
– Pete
Nov 21 '18 at 15:40
1
1
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
Thanks It worked..
– Santosh
Nov 21 '18 at 16:24
add a comment |
1
You could try using .done()
$('.fadetext').fadeIn("slow").done(function() {
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000);
});
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
add a comment |
1
You could try using .done()
$('.fadetext').fadeIn("slow").done(function() {
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000);
});
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
add a comment |
1
1
1
You could try using .done()
$('.fadetext').fadeIn("slow").done(function() {
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000);
});
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
You could try using .done()
$('.fadetext').fadeIn("slow").done(function() {
setTimeout(function() {
$('.carousel').show().carousel({
interval: 5000
});
}, 5000);
});
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
answered Nov 21 '18 at 15:50
PeterPeter
4,51043773
4,51043773
add a comment |
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%2f53415062%2fload-bootstrap-slider-after-the-text-fade-in%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
What have you tried so far with the slider and what happened? Do you have it loading immediately and just need to delay it?
– jacob.mccrumb
Nov 21 '18 at 15:17
I tried using another setTimeout function with 10 sec delay. Also I want those image to be slide with 5 sec interval.
– Santosh
Nov 21 '18 at 15:26