Paano Bumuo ng Full-Screen Responsive Carousel Slider Sa Pamamagitan ng Owl.js

() translation by (you can also view the original English article)

Sa nakaraan na paskil na aking ipinakita sa iyo kung paano bumuo ng pasdayang galerya ng imahe na may slick.js. Ngayon ay aking tatalakayin ang proseso ng paglikha ng animated, responsive, full-screen carousel slider owl.js (o “Owl Carousel”).

Gaya ng dati, upang makakuha ng paunang ideya kung ano ang ating bubuuin, tignan ang may kaugnayan CodePen demo (tignan ang mas malaking bersyon para sa mas mahusay na karanasan):

Ano ang Owl Carousel?

Ang Owl.js ay isang tanyag na jQuery plugin na nilikha ni David Deutch na hinahayaan kang bumuo ng kahali-halina, tumutugong carousels. Para mas mabuting maintindihan kung ano ang iniaalok ng plugin na ito, suriin ang mga demo.

Sapat na ang saya, ito ay mayroon kahanga-hangang browser support, nasubok na sa mga sumusunod na aparato:

Chrome
Firefox
Opera
IE7/8/10/11
iPad Safari
iPod4 Safari
Nexus 7 Chrome
Galaxy S4
Nokia 8s Windows8

Para sa mas marami pang detalye tignan ang mga dokumentasyon.

Paghahanda sa Pagsimula Ng Owl.js

Upang makapagsimula sa owl, simulan sa pamamagitan ng pag-download at pag-install ng mga sumusunod na files sa iyong proyekto:

jQuery
owl.carousel.css o ang pinaliit na bersyon
owl.carousel.js o ang pinaliit na bersyon

May opsyon, kung gusto mo maari din na i-import ang owl.theme.default.css file.

Maari kang kumuha ng kopya ng kaayon na owl files sa pagbisita sa Github repo, sa paggamit ng package manager (e.g. npm), o sa pag-load ng kinakailangan assets sa pamamagitan ng CDN (e.g. cdnjs). Para sa pagtuturong ito, Pinili ko ang huling opsyon.

Para sa pakay ng pagtuturong ito, sa kabila ng owl files, Akin rin isinama ang Babel at Bootstrap 4.

Iyon ay ang nasa isipan, kung titingin ka sa ilalim ng Settings tab ng ating demo pen, makikita mo na aking isinama ang tatlong panlabas na CSS files at dalawang panlabas na JavaScript files.

1. Ang HTML

Para simulan ating turingan ang carousel na may tatlong mga slide. Bawat isa sa mga slides at may nilalaman na pamagat, pangalawang pamagat, at isang call-to-action button.

Narito ang kailangan kaayusan para sa ating demo page:

<div class="owl-carousel owl-theme">
  <div class="owl-slide d-flex align-items-center cover" style="background-image: url(IMG_SRC);">
    <div class="container">
      <div class="row justify-content-center justify-content-md-start">
        <div class="col-10 col-md-6 static">
          <div class="owl-slide-text">
            <h2 class="owl-slide-animated owl-slide-title">
              <!-- content here -->
            </h2>
            <div class="owl-slide-animated owl-slide-subtitle mb-3">
              <!-- content here -->
            </div>
            <a class="btn btn-primary owl-slide-animated owl-slide-cta" href="" role="button">
              <!-- content here -->
            </a>
          </div><!-- /owl-slide-text -->
        </div>
      </div>
    </div>
  </div><!-- /slide1 -->
  
  <!-- two more slides here -->
</div>
<!-- other sections here -->

Napakahalagang banggitin ang dalawang bagay sa puntong ito:

Ang code na nasa itaas ay gumagamit ng Bootstrap 4 classes. Ang Bootstrap framework ay hindi mahalaga; Isinama ko lamang ito dahil gusto kong mapabilis ang CSS development.
Idinagdag ko ang background image para sa bawat slide sa pamamagitan ng inline styles. Kadalasan, kapag ikaw ay nakikitungo sa mayroon dynamic content, madalas ito ang karaniwan CSS method para sa pagdagdag ng background images.

2. Ang CSS

Nasa wastong kinalalagyan na ang HTML, atin naman tignan ang CSS styles na ilalagay sa ating pahina. Para sa kasimplihan, Tatalakayin lamang natin ang bahagi ng styles na mayroon.

Una, ating tutukuyin ang dalawang custom properties at dalawang helper classes:

:root {
  --main-white-color: white;
  --main-black-color: black;
}

.static {
  position: static; 
}

.cover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Sunod, ating tinukoy ang styles para sa carousel slides, kabilang ang transisyon:

.owl-carousel .owl-slide {
  position: relative;
  height: 100vh;
  background-color: lightgray;
}

.owl-carousel .owl-slide-animated {
  transform: translateX(20px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.05s;
}

.owl-carousel .owl-slide-animated.is-transitioned {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: all 0.5s;
}

.owl-carousel .owl-slide-title.is-transitioned {
  transition-delay: 0.2s;
}

.owl-carousel .owl-slide-subtitle.is-transitioned {
  transition-delay: 0.35s;
}

.owl-carousel .owl-slide-cta.is-transitioned {
  transition-delay: 0.5s;
}

Sa wakas, tayo ay nagtakda ng ilang mga panuntunan para sa pamamaraan ng nabigasyon:

.owl-carousel .owl-dots,
.owl-carousel .owl-nav {
  position: absolute;
}

.owl-carousel .owl-dots .owl-dot span {
  background: transparent;
  border: 1px solid var(--main-black-color);
  transition: all 0.2s ease;
}

.owl-carousel .owl-dots .owl-dot:hover span,
.owl-carousel .owl-dots .owl-dot.active span {
  background: var(--main-black-color);
}

.owl-carousel .owl-nav {
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  margin: 0;
}

Tandaan: Ang mga slide ay sakop dapat ang full window height at atin silang binigyan ng height:100vh. Gayunpaman, wari ang yunit na ito ay salungat sa ilang mga aparato (hal. mga iOS na aparato), iba pang opsyon ay ang iayos ang slides’ height sa pamamagitan ng JavaScript (tignan ang JavaScript panel ng demo para sa iba pang impormasyon).

3. Ang JavaScript

Sa puntong ito tayo’y handa na para ituon ang ating pansin sa JavaScript.

Pagsisimula ng Carousel

Bilang unang hakbang, ating sisimulan ang carousel. Bilang naka-default na plugin ay nagbibigay ng “dots navigation”, ngunit ang ating carousel ay isasama din ang navigation arrows.

owl navigation options — Mga opsyon para sa Owl navigation

Ating pinagana ang opsyon ng navigation sa pamamagitan ng nav configuration property. At saka, ating tinuringan ang ilang custom SVGs bilang arrows salamat sa navText configuration property.

Ang code na nagpasimula sa carousel ay ipinapakita sa ibaba:

1	const $owlCarousel = $(".owl-carousel").owlCarousel({
2	items: 1,
3	loop: true,
4	nav: true,
5	navText: [
6	'<svg width="50" height="50" viewBox="0 0 24 24"><path d="M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"/></svg>',
7	'<svg width="50" height="50" viewBox="0 0 24 24"><path d="M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"/></svg>'
8	]
9	});

Pagdagdag ng Animations sa Slide Elements

Bilang susunod na hakbang ating ini-animate ang nilalaman ng bawat slide. Ang gawain na ito ay pinangangasiwaan sa pamamagitan ng pagbabago ng kaganapan na itinatakda ng owl.

Narito ang nauugnay na code:

$($owlCarousel).on("changed.owl.carousel", e => {
  $(".owl-slide-animated").removeClass("is-transitioned");
  const $currentOwlItem = $(".owl-item").eq(e.item.index);
  $currentOwlItem.find(".owl-slide-animated").addClass("is-transitioned");
});

Kung kaya’t sa bawat pagbisita natin sa bagong slide, Una ang nilalaman ng lahat ng slides ay naglalaho. Pagkatapos, ang nilalaman ng kasalukuyang slide ay lumilitaw na may magandang slide-in animation.

Tandaan: sa halip na changed event maari naman na pantay nating ginamit ang translated event.

Sa ngayon, nakita natin kung paano ang mga animations ay napasimula habang ating iniikot ang mga slide. Ngunit gusto rin natin ng ganun klase ng animation kapag ang carousel ay simula pa lan ikinakarga. Para ipatupad ang pag-andar, gagamitin natin ang initialized event.

Narito ang code na konektado sa kaganapan na ito:

/*you have to bind initialized event before owl's initialization (see demo) */
$(".owl-carousel").on("initialized.owl.carousel", () => {
  setTimeout(() => {
    $(".owl-item.active .owl-slide-animated").addClass("is-transitioned");
  }, 200);
});

Sa loob ng kaganapan ating idinagdag ang is-transitioned class sa mga element ng unang slide.

Mahalaga na tandaan na ang kaganapan na ito ay kinakailangan ikabit sa pagsisimula ng carousel.

Paghadlang sa Paglukso ng Pahina sa Pagkarga

Bago magpatuloy, ating talakayin ang isang nakakalitong bagay. Kung titignan mo ang pahina ng demo, makikita mo na mayroon isang section ng elemento na tinukoy sa ibaba ng carousel. Bilang naka-default, hanggang sa magkarga ang carousel, ang bahagi ng nilalaman ay lumalabas at isang munting paglukso ang naganap sa ating pahina.

Mayroon dalawang paraan upang ayusin ang hindi kanais-nais na gawain. Una, maari tayong magdagdag ng preloader (ginawa na natin ito sa slick-related tutorial). Pangalawang opinyon na ating ipatutupad dito ay ang itago ang section at ipakita ito sa sandaling ang carousel ay nasimulan.

Sa mga tuntunin ng code, ang CSS rule ay kailangan ang isang ito:

1	section {
2	display: none;
3	}

At ang JavaScript code:

$(".owl-carousel").on("initialized.owl.carousel", () => {
  setTimeout(() => {
    // other code here
    
    $("section").show();
  }, 200);
});

Pagtatakda ng Dots Position

Ang huling bagay na atin dapat gawin ay ang ipwesto ang dots navigation. Bilang naka-default, ito ay lubos nang naka-pwesto. Ang mga sumusunod na bagay ay dapat mangyari:

Ito ay dapat nakahilera ng pahalang sa .owl-slide-text element sa target slide.
Ito ay dapat naka-pwesto sa ilalim nung elemento na may 20px top gap.

Ang function na nagpapaandar at nagtatakda ng ninanais na pwesto para sa ating dots ay ang setOwlDotsPosition.

Narito ang function:

1	function setOwlDotsPosition() {
2	const $target = $(".owl-item.active .owl-slide-text");
3	doDotsCalculations($target);
4	}

Inihihiwalay nito ang .owl-slide-text element ng aktibong slide at ipinapasa ito bilang isang argumento sa doDotsCalculations sub-function.

Narito ang sub-function:

function doDotsCalculations(el) {
  const height = el.height();
  const {top, left} = el.position();
  const res = height + top + 20;

  $(".owl-carousel .owl-dots").css({
    top: `${res}px`,
    left: `${left}px`
  });
}

Sa loob ng function na ito ay itinakda natin ang nararapat na top at left values ng .owl-dots element base sa taas at posisyon ng target element.

Pag-cater para sa Browser Resize

Sa higit pang pagpapatuloy, ang posisyon ng dots’ ay dapat na updated habang binabago natin ang sukat ng browser window. Para makamit ito, sinamantala natin ang resize owl event.

Narito ang kinakailangan na code:

$($owlCarousel).on("resize.owl.carousel", () => {
  setTimeout(() => {
    setOwlDotsPosition();
  }, 50);
});

Pag-posisyon Batay sa mga Nilalaman

Ang huli ngunit hindi ang pinaka-mababa, habang tayo ay nag-nanavigate sa mga slides ang mga dots ay dapat na muling isaayos depende sa taas at posisyon ng mga nilalaman ng aktibong slide. Salamat muli sa changed event, nagawa nating lutasin ang bagong kinakailangan.

Narito ang nauugnay na code:

$($owlCarousel).on("changed.owl.carousel", e => { 
  // other code here

  const $currentOwlItem = $(".owl-item").eq(e.item.index);
  const $target = $currentOwlItem.find(".owl-slide-text");
  doDotsCalculations($target);
});

Pro Tip

Bago magtapos, ating talakayin ang isang karaniwan owl bug. Kung ating tatanggalin ang parte kung saan ay nakaluklok sa ilalim ng carousel, ang bertikal na scrollbar ay nawawala at ang bahagi ng karatig na slide ay nakikita.

How to remove the right gap when there isnt vertical scrollbar

Para ayusin ito, ating kinalabit ang refresh event pagkatapos ng pagsisimula ng carousel, gaya nito: $($owlCarousel).trigger("refresh.owl.carousel");

4. Ang Browser Support

Dapat na gumana ng maayos ang demo sa lahat ng kamakailan lamang na browsers at ligtas itong magagamit sa iyong mga proyekto. Narito ang paalala ng kung ano ang ating nagawa:

Konklusyon

Sa masinsinang pagtuturo na ito, napamahalaan natin na bumuo ng isang animated full-screen carousel na may owl.js. Sana ay may natamo kang bagong kakayahan na maari mong magawa at ipatupad sa iyong mga paparating na proyekto. Gaya parati, kung mayroon kang kahit anong katanungan, ipaalam sa akin sa mga komento sa ilalim.