Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery

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

by
Difficulty:IntermediateLength:MediumLanguages:

Tagalog (Wikang Tagalog) translation by Anna Nelson (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.

CSS Settings on Codepen
JavaScript settings on CodePen

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:

Napakahalagang banggitin ang dalawang bagay sa puntong ito:

  1. 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.
  2. 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:

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

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

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:

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:

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:

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:

At ang JavaScript code:

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:

  1. Ito ay dapat nakahilera ng pahalang sa .owl-slide-text element sa target slide.
  2. 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:

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

Narito ang sub-function:

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:

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:

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.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.