teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

1

補足の追加。

2016/04/12 01:51

投稿

kei344
kei344

スコア69625

answer CHANGED
@@ -1,11 +1,11 @@
1
1
  イベント `slid.bs.carousel` で切り替わりを捉えられそうです。
2
2
 
3
3
  ```JavaScript
4
- $('#carousel').on('slid.bs.carousel', function () {
4
+ $( '#carousel' ).on( 'slid.bs.carousel', function() {
5
- if ($("#pic1").hasClass("active")) {
5
+ if ( $( '#pic1' ).hasClass( 'active' ) ) {
6
- $('#carousel').carousel( { interval: 6000 } );
6
+ $( '#carousel' ).carousel( { interval: 6000 } );
7
7
  }else{
8
- $('#carousel').carousel( { interval: 3000 } );
8
+ $( '#carousel' ).carousel( { interval: 3000 } );
9
9
  }
10
10
  });
11
11
  ```
@@ -14,4 +14,21 @@
14
14
  [http://designup.jp/bootstrap3-carousel-193/](http://designup.jp/bootstrap3-carousel-193/)
15
15
 
16
16
  【Bootstrap JS Carousel Reference】
17
- [http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp](http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp)
17
+ [http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp](http://www.w3schools.com/bootstrap/bootstrap_ref_js_carousel.asp)
18
+
19
+ ---
20
+
21
+ **追記:**
22
+
23
+ pause/cycle が 一時停止/再開 ならこう書けるかも。
24
+
25
+ ```JavaScript
26
+ $( '#carousel' ).on( 'slid.bs.carousel', function() {
27
+ if ( $( '#pic1' ).hasClass( 'active' ) ) {
28
+ setTimeout( function() {
29
+ $('#carousel').carousel( 'cycle' );
30
+ }, 6000 );
31
+ $('#carousel').carousel( 'pause' );
32
+ }
33
+ });
34
+ ```