iT邦幫忙

0

19.Bootstrap(中文教程)元件:幻燈片(Carousel)jquery監聽

ㄧ.幻燈片jquery監聽

$(document).ready(()=>{
  //控制幻燈片的秒數
  // $('.carousel').carousel({
  //   interval: 100
  // });
  $('.carousel').on('slid.bs.carousel', (event)=>{
    console.log(`slid:
      方向:${event.direction}
      從:${event.from}
      到${event.to}
    `);
  });
  
  $('.carousel').on('slide.bs.carousel', (event)=>{
    console.log(`slide:
      方向:${event.direction}
      從:${event.from}
      到${event.to}
    `);
  });
   
  // 
});

重點:
1.使用jquery可以控制bootstrap4幻燈片讀秒,其餘的功能可參考官網
2.讀秒控制部分也可在html的carousel的data-ride="carousel"改成data-interval="1000"
3.從這裡可以看出監聽是從slide開始之後才執行slid

codepen
參考:bootstrap4


尚未有邦友留言

立即登入留言