輪播 owl-carousel + 動畫 animate.css

2020-10-29

觸發輪播第一張之外的animate效果

owl-carousel + animate.css

觸發輪播第一張之外的animate效果

javascript - owl-carousel

$(document).ready(function() {
  var owl = $('.owl-carousel');

  owl.owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    autoplayTimeout: 3500,
    nav: true,
    margin: 10,
  });

  owl.on('changed.owl.carousel', function(event) {
      var item = event.item.index - 2;     // Position of the current item
      $('h1').removeClass('animated bounce');
 $('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated bounce');
  });

});

HTML - owl-carousel

<div id='monitor'>

</div>
<div class="owl-carousel owl-theme">

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="animated bounce">First Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Second Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Third Caption</h1></div>
  </div>

  <div class="item"><img src="http://placehold.it/200x200">
    <div class="caption">
      <h1 class="">Fourth Caption</h1></div>
  </div>

</div>
<!-- End Carousel -->

實際的例子

javascript - owl-carousel

$(document).ready(function () {
    /* slider */
    var owl = $('.owl-carousel');
    owl.owlCarousel({
        autoplay: true,
        /* 自動輪播 */
        loop: true,
        /* 循環輪播 */
        // autoplayTimeout:3000,  /* 輪播速度 */
        items: 1,
        /* 顯示張數 */
    });

    owl.on('changed.owl.carousel', function (event) {
        var item = event.item.index - 2; // Position of the current item
        $('.animate__animated').removeClass('animate__fadeInRight');
        $('.owl-item').not('.cloned').eq(item).find('.animate__animated').addClass('animate__animated animate__fadeInRight');
    });
    /* /slider */
});

HTML - owl-carousel

item1要先加上需要的animate.css動畫 class，不然會被js語法判斷被刪掉

<div id="owl-slider" class="owl-carousel owl-theme">
	<!-- slider item1 -->
	<div class="item1 item">
		<div class="row row-rwd-padding align-items-center align-items1-center">
			<div class="col-md-12">

				<div class="row">
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 large_text">
						<p class="animate__animated animate__fadeInRight animate__faster" style="margin-bottom:0px">Make Every Web Page<span style="color: #FF9800">&nbsp;SHOPPABLE</span></p>
					</div>
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 test" style="z-index: 7; font-weight:bold !important;">
						<p class="animate__animated animate__fadeInRight animate__fast" style="margin-bottom: 0px;"><span class="modern_big_redbg">讓小生意也容易上網做</span></p>
					</div>
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 item1-font-size animate__animated animate__fadeInRight" style="color: #ffcd58;  white-space: normal; text-shadow:none;">
						<strong>無縫接軌 - 舊站直接擴充電商功能</strong><br>
						<strong>門檻最低 - 免簽約 註冊開通即可使用</strong><br>
						<strong>自主彈性 - 沒有數量租期限制</strong><br>
						<strong>多元商模 - 支援各種前端應用情境</strong>
					</div>
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 item1-font-size animate__animated animate__fadeInRight" style="color: #fff;">
						<i class="ico-xs et-megaphone"></i>在大型購物平台做行銷並不適合小、微企業<br>
						<i class="ico-xs et-megaphone"></i>活動、事件、檔期式的銷售，才有機會異軍突起
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /slider item1 -->

	<!-- slider item2 -->
	<div class="item2 item">
		<div class="row row-rwd-padding align-items-center">
			<div class="col-md-12">
				<div class="row">
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 large_text item2-animate1">
						<p class="animate__animated animate__faster" style="margin-bottom:0px">What is CaaS ?</p>
					</div>
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 black_thin_blackbg_30 animate__animated animate__fast item2-animate-2" style="color: #ffcd58;  white-space: normal; text-shadow:none;">
						<strong>● 網站前端、電商後台採用分離式設計，大幅提昇整合和擴充的彈性</strong><br>
						<strong>● 自行打造電商網站不再高不可攀，降低數位轉型的技術門檻</strong><br>
					</div>
					<div class="col-md-10 col-md-offset-2 col-sm-11 col-sm-offset-1 not-get-star animate__animated item2-animate-3">
						<p><span>v</span> 社群平台無法滿足進階電商需求</p>
						<p><span>v</span> 功能完整的購物車系統運營難度高</p>
						<p><span>v</span> 活用經營工具促成生意成交才是王道</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- /slider item2 -->
</div>

回首頁