Execute JQuery code every time image carousel lands on certain image in Bootstrap
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I've got an image carousel with three rotating background images made with the help of Bootstrap's carousel class. In one of the carousel's pages I have a box that displays a quote. I would like that quote to change every time the image carousel lands on that page again. What would be a good way to do this using JQuery? In particular, I'm not quite sure which attribute I could use to tell which page is active right now, since my understanding of the inner workings of the carousel class is limited.
Edit: Just to be clear, I don't need an implementation for random quotes or anything. I just need to know how I can do something (like changing text), anytime the carousel lands on a certain page.
jquery twitter-bootstrap carousel
asked Nov 16 '18 at 19:25
neondropneondrop
12
add a comment |
I've got an image carousel with three rotating background images made with the help of Bootstrap's carousel class. In one of the carousel's pages I have a box that displays a quote. I would like that quote to change every time the image carousel lands on that page again. What would be a good way to do this using JQuery? In particular, I'm not quite sure which attribute I could use to tell which page is active right now, since my understanding of the inner workings of the carousel class is limited.
Edit: Just to be clear, I don't need an implementation for random quotes or anything. I just need to know how I can do something (like changing text), anytime the carousel lands on a certain page.
jquery twitter-bootstrap carousel
asked Nov 16 '18 at 19:25
neondropneondrop
12
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12
add a comment |
I've got an image carousel with three rotating background images made with the help of Bootstrap's carousel class. In one of the carousel's pages I have a box that displays a quote. I would like that quote to change every time the image carousel lands on that page again. What would be a good way to do this using JQuery? In particular, I'm not quite sure which attribute I could use to tell which page is active right now, since my understanding of the inner workings of the carousel class is limited.
Edit: Just to be clear, I don't need an implementation for random quotes or anything. I just need to know how I can do something (like changing text), anytime the carousel lands on a certain page.
jquery twitter-bootstrap carousel
asked Nov 16 '18 at 19:25
neondropneondrop
12
I've got an image carousel with three rotating background images made with the help of Bootstrap's carousel class. In one of the carousel's pages I have a box that displays a quote. I would like that quote to change every time the image carousel lands on that page again. What would be a good way to do this using JQuery? In particular, I'm not quite sure which attribute I could use to tell which page is active right now, since my understanding of the inner workings of the carousel class is limited.
Edit: Just to be clear, I don't need an implementation for random quotes or anything. I just need to know how I can do something (like changing text), anytime the carousel lands on a certain page.
jquery twitter-bootstrap carousel
jquery twitter-bootstrap carousel
asked Nov 16 '18 at 19:25
neondropneondrop
12
asked Nov 16 '18 at 19:25
neondropneondrop
12
edited Nov 16 '18 at 19:32
neondrop
asked Nov 16 '18 at 19:25
neondropneondrop
12
asked Nov 16 '18 at 19:25
neondropneondrop
12
asked Nov 16 '18 at 19:25
neondropneondrop
12
12
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12
add a comment |
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12
add a comment |
1 Answer
1
active
oldest
votes
Okay, I've got the answer myself. Not sure if it's the best way to do it, though. Carousel fires an event every time it has slid. Listen to it and increment a counter. Take the counter modulo the amount of carousel pages.
If it's zero, do stuff. This way, you do something every time the carousel has slid enough times to land on the first page again. I don't think that the event fires two times if the user uses the carousel indicators to skip a page. Anyway, for my purposes this solution is good enough.
If you want to do something on the second or third page, you simply have to change the 0 in counter % 3 == 0 to 1 or 2.
$(function () {
$("#carouselIndicators").on("slid.bs.carousel", function () {
counter++;
if (counter % 3 == 0) {
//do stuff
}
});
});
answered Nov 16 '18 at 20:07
neondropneondrop
12
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%2f53344180%2fexecute-jquery-code-every-time-image-carousel-lands-on-certain-image-in-bootstra%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
Okay, I've got the answer myself. Not sure if it's the best way to do it, though. Carousel fires an event every time it has slid. Listen to it and increment a counter. Take the counter modulo the amount of carousel pages.
If it's zero, do stuff. This way, you do something every time the carousel has slid enough times to land on the first page again. I don't think that the event fires two times if the user uses the carousel indicators to skip a page. Anyway, for my purposes this solution is good enough.
If you want to do something on the second or third page, you simply have to change the 0 in counter % 3 == 0 to 1 or 2.
$(function () {
$("#carouselIndicators").on("slid.bs.carousel", function () {
counter++;
if (counter % 3 == 0) {
//do stuff
}
});
});
answered Nov 16 '18 at 20:07
neondropneondrop
12
add a comment |
Okay, I've got the answer myself. Not sure if it's the best way to do it, though. Carousel fires an event every time it has slid. Listen to it and increment a counter. Take the counter modulo the amount of carousel pages.
If it's zero, do stuff. This way, you do something every time the carousel has slid enough times to land on the first page again. I don't think that the event fires two times if the user uses the carousel indicators to skip a page. Anyway, for my purposes this solution is good enough.
If you want to do something on the second or third page, you simply have to change the 0 in counter % 3 == 0 to 1 or 2.
$(function () {
$("#carouselIndicators").on("slid.bs.carousel", function () {
counter++;
if (counter % 3 == 0) {
//do stuff
}
});
});
answered Nov 16 '18 at 20:07
neondropneondrop
12
add a comment |
Okay, I've got the answer myself. Not sure if it's the best way to do it, though. Carousel fires an event every time it has slid. Listen to it and increment a counter. Take the counter modulo the amount of carousel pages.
If it's zero, do stuff. This way, you do something every time the carousel has slid enough times to land on the first page again. I don't think that the event fires two times if the user uses the carousel indicators to skip a page. Anyway, for my purposes this solution is good enough.
If you want to do something on the second or third page, you simply have to change the 0 in counter % 3 == 0 to 1 or 2.
$(function () {
$("#carouselIndicators").on("slid.bs.carousel", function () {
counter++;
if (counter % 3 == 0) {
//do stuff
}
});
});
answered Nov 16 '18 at 20:07
neondropneondrop
12
Okay, I've got the answer myself. Not sure if it's the best way to do it, though. Carousel fires an event every time it has slid. Listen to it and increment a counter. Take the counter modulo the amount of carousel pages.
If it's zero, do stuff. This way, you do something every time the carousel has slid enough times to land on the first page again. I don't think that the event fires two times if the user uses the carousel indicators to skip a page. Anyway, for my purposes this solution is good enough.
If you want to do something on the second or third page, you simply have to change the 0 in counter % 3 == 0 to 1 or 2.
$(function () {
$("#carouselIndicators").on("slid.bs.carousel", function () {
counter++;
if (counter % 3 == 0) {
//do stuff
}
});
});
answered Nov 16 '18 at 20:07
neondropneondrop
12
edited Nov 16 '18 at 22:03
answered Nov 16 '18 at 20:07
neondropneondrop
12
answered Nov 16 '18 at 20:07
neondropneondrop
12
answered Nov 16 '18 at 20:07
neondropneondrop
12
12
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%2f53344180%2fexecute-jquery-code-every-time-image-carousel-lands-on-certain-image-in-bootstra%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
I believe your carousal image is changing every certain period of time, let’s say every 1 second for example, so you know exactly that it will come again every 3 seconds, therefore, you can simply call a javascript setInterval function at the beginning of the script, and let it change the quote text. This interva will run every 3000ms as well.
– Ahmed Hammad
Nov 16 '18 at 19:30
Good idea actually. I think I will implement it like this for the time being, but just for the sake of it I'd like to know how to do it the other way.
– neondrop
Nov 16 '18 at 19:34
@AhmedHammad that is very poor advice. There are events that get triggered and can be listened to. See carousel docs
– charlietfl
Nov 16 '18 at 19:43
@charlietfl Thanks, events was a pointer in the right direction. I guess I was looking too hard for some kind of attribute where I simply check which page I'm on.
– neondrop
Nov 16 '18 at 20:12