Tiny Slider 2 – Nowa era elastycznego przewijania

Witaj! Dzisiaj chciał­bym Ci przed­sta­wić projekt, który całko­wi­cie odmie­nił sposób, w jaki tworzę i używam przewi­jal­nych karuzel na moich stronach inter­ne­to­wych. Chodzi o Tiny Slider 2 – nową odsło­nę popular­ne­go narzę­dzia do tworze­nia elastycz­nych i interak­tyw­nych przewi­ja­nych galerii i karuzeli.

Wprowadzenie

Tiny Slider 2 to rozwi­nię­cie i udosko­na­le­nie pierwot­ne­go Tiny Slide­ra, który stał się popular­nym wyborem dla wielu dewelo­pe­rów, w tym także dla mnie. Projekt ten został stworzo­ny przez Nicola Galli­zia i jego zespół. Od momen­tu jego wprowa­dze­nia, Tiny Slider 2 zrewo­lu­cjo­ni­zo­wał sposób, w jaki tworzę przewi­jal­ne karuze­le na moich stronach.

1. Zachwycające funkcje i elastyczność

Jedną z najwięk­szych zalet Tiny Slider 2 jest jego elastycz­ność. Pozwa­la on na łatwe dosto­so­wy­wa­nie wyglą­du i funkcjo­nal­no­ści karuze­li do indywi­du­al­nych potrzeb. Oto kilka zachwy­ca­ją­cych funkcji, które oferu­je Tiny Slider 2:

• Respon­syw­ność: Tiny Slider 2 automa­tycz­nie dosto­so­wu­je się do różnych rozmia­rów ekranów, zapew­nia­jąc dosko­na­łe działa­nie na urządze­niach mobil­nych i desktopowych.
• Niestan­dar­do­we konfi­gu­ra­cje: Narzę­dzie umożli­wia pełną kontro­lę nad konfi­gu­ra­cją karuze­li, taką jak liczba wyświe­tla­nych elemen­tów, prędkość przewi­ja­nia, anima­cje i wiele innych.
• Nawiga­cja i punkty kontro­l­ne: Tiny Slider 2 dostar­cza intuicyj­ną nawiga­cję w posta­ci strza­łek do przewi­ja­nia karuze­li oraz punktów kontro­l­nych, które umożli­wia­ją użytkow­ni­ko­wi łatwe porusza­nie się po slajdach.

2. Przykłady użycia

Tiny Slider 2 znajdu­je zasto­so­wa­nie w różnych typach stron inter­ne­to­wych, zapew­nia­jąc atrak­cyj­ne wyświe­tla­nie treści i zwięk­sza­jąc zaanga­żo­wa­nie użytkow­ni­ków. Oto kilka przykła­dów użycia:

• Galerie zdjęć: Możesz użyć Tiny Slider 2 do tworze­nia respon­syw­nych galerii zdjęć, które umożli­wia­ją użytkow­ni­kom przewi­ja­nie i ogląda­nie zdjęć w atrak­cyj­ny i interak­tyw­ny sposób.
• Karuze­le produk­tów: Na stronach sklepów inter­ne­to­wych, Tiny Slider 2 pozwa­la na wyświe­tla­nie produk­tów w przewi­jal­nej karuze­li, umożli­wia­jąc użytkow­ni­kom łatwe przeglą­da­nie i wybie­ra­nie intere­su­ją­cych ich ofert.
• Referen­cje klien­tów: Jeśli prowa­dzisz firmo­wą stronę inter­ne­to­wą, Tiny Slider 2 może być wykorzy­sta­ny do prezen­ta­cji referen­cji i opinii klien­tów, dodając element zaufa­nia i wiarygodności.

Opcje Tiny Slider 2:

1. Opcje konfiguracyjne:

   • container: Selek­tor elemen­tu HTML, w którym ma być zaini­cjo­wa­ny Tiny Slider 2. (Domyśl­na wartość: null)
   • items: Liczba wyświe­tla­nych elemen­tów w karuze­li. (Domyśl­na wartość: 1)
   • slideBy: Liczba elemen­tów, które mają być przewi­ja­ne za jednym razem. (Domyśl­na wartość: 1)
   • autoplay: Określa, czy karuze­la ma być automa­tycz­nie przewi­ja­na. (Domyśl­na wartość: false)
   • autoplayTimeout: Czas oczeki­wa­nia między automa­tycz­nym przewi­ja­niem slajdów w milise­kun­dach. (Domyśl­na wartość: 5000)
   • autoplayHoverPause: Określa, czy automa­tycz­ne przewi­ja­nie ma być zatrzy­my­wa­ne przy najecha­niu kurso­rem na karuze­lę. (Domyśl­na wartość: false)
   • autoplayButton: Określa, czy mają być wyświe­tla­ne przyci­ski start/​stop dla automa­tycz­ne­go przewi­ja­nia. (Domyśl­na wartość: false)
   • speed: Prędkość przewi­ja­nia slajdów w milise­kun­dach. (Domyśl­na wartość: 300)
   • edgePadding: Dodat­ko­wa przestrzeń na krawę­dziach karuze­li w pikse­lach. (Domyśl­na wartość: 0)
   • gutter: Odstęp między elemen­ta­mi karuze­li w pikse­lach. (Domyśl­na wartość: 0)
   • fixedWidth: Określa, czy szero­kość elemen­tów karuze­li ma być stała. (Domyśl­na wartość: null)
   • autoHeight: Określa, czy wysokość karuze­li ma być automa­tycz­nie dosto­so­wa­na do zawar­to­ści slajdów. (Domyśl­na wartość: false)
   • controls: Określa, czy mają być wyświe­tla­ne strzał­ki nawiga­cyj­ne. (Domyśl­na wartość: true)
   • controlsText: Tekst dla strza­łek nawiga­cyj­nych. (Domyśl­na wartość: ['prev', 'next'])
   • controlsContainer: Konte­ner dla strza­łek nawiga­cyj­nych. (Domyśl­na wartość: null)
   • nav: Określa, czy mają być wyświe­tla­ne punkty kontro­l­ne nawiga­cyj­ne. (Domyśl­na wartość: false)
   • navContainer: Konte­ner dla punktów kontro­l­nych nawiga­cyj­nych. (Domyśl­na wartość: null)
   • navAsThumbnails: Określa, czy punkty kontro­l­ne nawiga­cyj­ne mają być wyświe­tla­ne jako minia­tu­ry slajdów. (Domyśl­na wartość: false)
   • arrowKeys: Określa, czy przewi­ja­nie karuze­li ma być możli­we za pomocą strza­łek na klawia­tu­rze. (Domyśl­na wartość: false)
   • autoplayButtonOutput: Określa, czy przycisk start/​stop ma być wyświe­tla­ny jako HTML lub tekst. (Domyśl­na wartość: 'button')
   • lazyload: Określa, czy obrazy mają być ładowa­ne dynamicz­nie przy przewi­ja­niu. (Domyśl­na wartość: false)
   • touch: Określa, czy przewi­ja­nie karuze­li ma być obsłu­gi­wa­ne za pomocą gestów na urządze­niach dotyko­wych. (Domyśl­na wartość: true)
   • mouseDrag: Określa, czy przewi­ja­nie karuze­li ma być obsłu­gi­wa­ne za pomocą przecią­ga­nia myszą. (Domyśl­na wartość: true)
   • preventScrollOnTouch: Określa, czy przewi­ja­nie strony ma być wyłączo­ne podczas przewi­ja­nia karuze­li na urządze­niach dotyko­wych. (Domyśl­na wartość: false)
   • loop: Określa, czy karuze­la ma być zapętlo­na. (Domyśl­na wartość: true)
   • rewind: Określa, czy karuze­la ma przewi­jać się w przód i wstecz, gdy osiągnie ostat­ni lub pierw­szy slajd. (Domyśl­na wartość: false)
   • autoWidth: Określa, czy szero­kość karuze­li ma być automa­tycz­nie dosto­so­wa­na do zawar­to­ści slajdów. (Domyśl­na wartość: false)
   • center: Określa, czy aktual­ny slajd ma być wyśrod­ko­wa­ny w karuze­li. (Domyśl­na wartość: false)
   • visible: Liczba widocz­nych slajdów w karuze­li. (Domyśl­na wartość: null)
   • startIndex: Indeks począt­ko­we­go slajdu, który ma być wyświe­tla­ny. (Domyśl­na wartość: 0)
   • responsive: Pozwa­la na dosto­so­wa­nie konfi­gu­ra­cji karuze­li dla różnych rozmia­rów ekranu. (Domyśl­na wartość: null)
   • breakpoints: Definiu­je różne ustawie­nia dla różnych rozmia­rów ekranu. (Domyśl­na wartość: null)
   • media: Mapowa­nie odpowie­dzi mediów do ustawień karuze­li. (Domyśl­na wartość: null)
   • lazyloadSelector: Dodat­ko­wy selek­tor dla elemen­tów, które mają być leniwie ładowa­ne. (Domyśl­na wartość: '.tns-lazy-img')

2. Opcje nawigacyjne:

   • controls: Określa, czy mają być wyświe­tla­ne strzał­ki nawiga­cyj­ne. (Domyśl­na wartość: true)
   • controlsText: Tekst dla strza­łek nawiga­cyj­nych. (Domyśl­na wartość: ['prev', 'next'])
   • nav: Określa, czy mają być wyświe­tla­ne punkty kontro­l­ne nawiga­cyj­ne. (Domyśl­na wartość: false)
   • navPosition: Pozycja punktów kontro­l­nych nawiga­cyj­nych. (Domyśl­na wartość: 'top')
   • navAsThumbnails: Określa, czy punkty kontro­l­ne nawiga­cyj­ne mają być wyświe­tla­ne jako minia­tu­ry slajdów. (Domyśl­na wartość: false)

3. Opcje wyglądu i animacji:

   • slideTransition: Rodzaj anima­cji przej­ścia między slajda­mi. (Domyśl­na wartość: 'carousel')
   • animateIn: Anima­cja dla pojawia­nia się nowego slajdu. (Domyśl­na wartość: 'tns-fadeIn')
   • animateOut: Anima­cja dla znika­nia poprzed­nie­go slajdu. (Domyśl­na wartość: 'tns-fadeOut')
   • animateNormal: Anima­cja dla pozosta­łych slajdów. (Domyśl­na wartość: 'tns-normal')
   • loop: Określa, czy karuze­la ma być zapętlo­na. (Domyśl­na wartość: true)
   • rewind: Określa, czy karuze­la ma przewi­jać się w przód i wstecz, gdy osiągnie ostat­ni lub pierw­szy slajd. (Domyśl­na wartość: false)
   • autoHeight: Określa, czy wysokość karuze­li ma być automa­tycz­nie dosto­so­wa­na do aktual­ne­go slajdu. (Domyśl­na wartość: false)
   • rtl: Określa, czy karuze­la ma być wyświe­tla­na w trybie od prawej do lewej. (Domyśl­na wartość: false)
   • lazyload: Określa, czy obrazy mają być ładowa­ne dynamicz­nie przy przewi­ja­niu. (Domyśl­na wartość: false)

4. Opcje responsywności:

   • responsive: Pozwa­la na dosto­so­wa­nie konfi­gu­ra­cji karuze­li dla różnych rozmia­rów ekranów. (Domyśl­na wartość: null)

Dostępne metody:

• goTo(index: number): Przecho­dzi do określo­ne­go slajdu na podsta­wie indeksu.
• goToNext(): Przecho­dzi do następ­ne­go slajdu.
• goToPrev(): Przecho­dzi do poprzed­nie­go slajdu.
• play(): Urucha­mia automa­tycz­ne przewi­ja­nie slajdów.
• pause(): Zatrzy­mu­je automa­tycz­ne przewi­ja­nie slajdów.
• isOn(index: number): Spraw­dza, czy karuze­la znajdu­je się na określo­nym slajdzie na podsta­wie indeksu.
• updateSliderHeight(): Aktuali­zu­je wysokość karuze­li na podsta­wie zawar­to­ści slajdów.
• refresh(): Odświe­ża karuze­lę i przeli­cza pozycje slajdów.
• destroy(): Usuwa karuze­lę i przywra­ca orygi­nal­ny układ elementów.
• events.on(event: string, callback: Function): Dodaje nasłu­chi­wa­nie zdarzeń karuzeli.
• events.off(event: string, callback: Function): Usuwa nasłu­chi­wa­nie zdarzeń karuzeli.
• goToFirst(): Przecho­dzi do pierw­sze­go slajdu.
• goToLast(): Przecho­dzi do ostat­nie­go slajdu.
• getInfo(): Zwraca infor­ma­cje na temat stanu karuze­li, takie jak aktual­ny slajd, całko­wi­ta liczba slajdów itp.
• getNextIndex(): Zwraca indeks następ­ne­go slajdu.
• getPrevIndex(): Zwraca indeks poprzed­nie­go slajdu.
• getSlideItems(): Zwraca tabli­cę elemen­tów slajdów.
• getContainer(): Zwraca konte­ner karuzeli.

Zdarzenia slidera:

• indexChanged: To zdarze­nie jest wywoły­wa­ne po zmianie aktual­ne­go indek­su slajdu.

  slider.events.on('indexChanged', function(info, eventName) {
    console.log('Zmiana indeksu slajdu:', info.slideItems[info.index]);
  });

• transitionStart: Zdarze­nie to jest wywoły­wa­ne, gdy rozpo­czy­na się przej­ście między slajda­mi.

  slider.events.on('transitionStart', function(info, eventName) {
    console.log('Rozpoczęcie przejścia między slajdami');
  });

• transitionEnd: To zdarze­nie jest wywoły­wa­ne po zakoń­cze­niu przej­ścia między slajda­mi.

  slider.events.on('transitionEnd', function(info, eventName) {
    console.log('Zakończenie przejścia między slajdami');
  });

• newBreakpointStart: Zdarze­nie jest wywoły­wa­ne, gdy nowy punkt granicz­ny (break­po­int) zosta­je aktywo­wa­ny.

  slider.events.on('newBreakpointStart', function(info, eventName) {
    console.log('Rozpoczęcie nowego punktu granicznego');
  });

• newBreakpointEnd: To zdarze­nie jest wywoły­wa­ne, gdy nowy punkt granicz­ny (break­po­int) zosta­je zakoń­czo­ny.

  slider.events.on('newBreakpointEnd', function(info, eventName) {
    console.log('Zakończenie nowego punktu granicznego');
  });

• touchStart: To zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik rozpo­czy­na dotyk na ekranie.

  slider.events.on('touchStart', function(info, eventName) {
    console.log('Rozpoczęcie dotyku');
  });

• touchMove: Zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik porusza palcem po ekranie.

  slider.events.on('touchMove', function(info, eventName) {
    console.log('Ruch palcem po ekranie');
  });

• touchEnd: To zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik kończy dotyk na ekranie.

  slider.events.on('touchEnd', function(info, eventName) {
    console.log('Zakończenie dotyku');
  });

• dragStart: To zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik rozpo­czy­na przecią­ga­nie (drag) slajdów.

  slider.events.on('dragStart', function(info, eventName) {
    console.log('Rozpoczęcie przeciągania');
  });

• dragMove: Zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik przecią­ga (drag) slajdy.

  slider.events.on('dragMove', function(info, eventName) {
    console.log('Przeciąganie slajdów');
  });

• dragEnd: To zdarze­nie jest wywoły­wa­ne, gdy użytkow­nik kończy przecią­ga­nie (drag) slajdów.

  slider.events.on('dragEnd', function(info, eventName) {
    console.log('Zakończenie przeciągania');
  });

Podsumowanie

Tiny Slider 2 to narzę­dzie, które znaczą­co wpływa na sposób tworze­nia i używa­nia przewi­jal­nych karuze­li na stronach inter­ne­to­wych. Stworzo­ny przez Nicola Galli­zia i jego zespół, Tiny Slider 2 oferu­je niezrów­na­ną elastycz­ność, liczne funkcje i możli­wość dosto­so­wa­nia karuze­li do własnych prefe­ren­cji. Jego respon­syw­ność i intuicyj­na nawiga­cja sprawia­ją, że jest to ideal­ne narzę­dzie dla każde­go, kto pragnie tworzyć atrak­cyj­ne i interak­tyw­ne przewi­ja­ne galerie.

Źródła

Infor­ma­cje na temat Tiny Slider 2 zosta­ły oparte na oficjal­nej stronie projek­tu oraz jego dokumen­ta­cji. Zachę­cam do odwie­dze­nia tych źródeł, aby uzyskać więcej szcze­gó­łów i infor­ma­cji na temat Tiny Slider 2.

• Dokumen­ta­cja Tiny Slider: https://​github​.com/​g​a​n​l​a​n​y​u​a​n​/​t​i​n​y​-​s​l​i​der
• Strona demon­stra­cyj­na: http://​ganla​ny​uan​.github​.io/​t​i​n​y​-​s​l​i​d​e​r​/​d​e​mo/