joe223 / tiny-swiper Goto Github PK

Ingenious JavaScript Carousel powered by wonderful plugins. Lightweight yet extensible. Import plugins as needed, No more, no less.

Home Page: https://tiny-swiper.js.org

JavaScript 28.58% Shell 0.27% TypeScript 48.44% HTML 17.60% CSS 1.81% SCSS 3.29%

javascript slider swiper 2kb swiper-js swiper-slider carousel

tiny-swiper's Introduction

Tiny-Swiper

Ingenious JavaScript Carousel powered by wonderful plugins with native-like experience. Lightweight yet extensible. Import plugins as needed, No more, no less. Zero dependency, written in TypeScript, used for free and without any attribution.

Looking for more details about APIs and Demos, visit tiny-swiper.js.org

Usage

Installation

# via npm
$ npm install tiny-swiper --save

# via yarn
$ yarn add tiny-swiper

If you prefer CDN

<script src="https://unpkg.com/tiny-swiper@latest"></script>

Initialization

Html code:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
</div>

JavaScript/TypeScript code:

import Swiper, {
    SwiperPluginLazyload,
    SwiperPluginPagination
} from 'tiny-swiper'

Swiper.use([ SwiperPluginLazyload, SwiperPluginPagination ])

const swiper = new Swiper(swiperContainer: HTMLElement | string, parameters?: TinySwiperParameters)

new Swiper() - initialize swiper with options.
Swiper.use() - Register plugin.
swiperContainer - HTMLElement or string (with CSS Selector) of swiper container HTML element. Required.
parameters - object with Swiper parameters. Optional.

You also can load full-featured Tiny-Swiper:

import Swiper from 'tiny-swiper/lib/index.full.js'

<script src="https://unpkg.com/tiny-swiper@latest/lib/index.full.js"></script>

Browsers support

All modern browsers are supported, include IE10+.

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Contribution

Please make sure to read the Contributing Guide before making a pull request.

Thanks goes to these wonderful people

License

Tiny-Swiper is licensed under a MIT License.

tiny-swiper's People

Contributors

Stargazers

Watchers

tiny-swiper's Issues

Regarding the lazy load

In your project, i did not find the lazy load part, do you have one with lazyload?.
The lazyload is a very important and useful part, you might have it. [...]

Issues with nextTick.ts & SSR

Describe the bug
Since the last version (2.2.0), our implementation (with server side rendering) returns the following error:

2022-02-11T15:17:14.232Z - error: uncaughtException: requestAnimationFrame is not defined
ReferenceError: requestAnimationFrame is not defined
    at /Users/josemrodrigu/Projects/andes-library-test/node_modules/tiny-swiper/lib/index.min.js:1:2592
    at /Users/josemrodrigu/Projects/andes-library-test/node_modules/tiny-swiper/lib/index.min.js:1:84
    at Object.<anonymous> (/Users/josemrodrigu/Projects/andes-library-test/node_modules/tiny-swiper/lib/index.min.js:1:201)

Checking nextTick.ts, I noticed that nextFrame and cancelNextFrame constants are defined outside Tick(). Of course, Tick is never executed on the server. Now that those connstants are defined at file scope, this bug can see the light.

I'll make a PR in order to support both client and server side implementations

Expected behavior
The error doesn't happen

Information

Tiny-Swiper Version: v2.2.0
OS: Every
Browser: Every
Reproduce example：I haven't any, only screen shots

Navigation does not honor loop mode when using only two slides

Describe the bug
Navigation does not honor loop mode when using only two slides, it keeps going back and forth.

Expected behavior
Navigation should honor loop mode when using only two slides, and change the slides according to the navigation element clicked [prev, next]

Information

Tiny-Swiper Version: lastest
OS: linux
Browser: chrome 89
Reproduce example：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Tiny-Swiper demo - Plugin - Mousewheel</title>
</head>

<body>
  <!-- Tiny-Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://user-images.githubusercontent.com/10026019/102327273-74284900-3fc0-11eb-913a-69661b73ab5d.png" />
      </div>
      <div class="swiper-slide">
        <img src="https://user-images.githubusercontent.com/10026019/102327264-712d5880-3fc0-11eb-8f07-7d58264938c1.png" />
      </div>
    </div>

    <button class="swiper-plugin-navigation-prevEl">
      PREV
    </button>
    <button class="swiper-plugin-navigation-nextEl">
      NEXT
    </button>
  </div>

  <!-- Tiny-Swiper JS -->
  <script src="https://unpkg.com/tiny-swiper@latest/lib/index.min.js"></script>
  <script src="https://unpkg.com/tiny-swiper@latest/lib/modules/navigation.min.js"></script>

  <!-- Initialize Tiny-Swiper -->
  <script>
    var swiper = new Swiper(".swiper-container", {
        loop: true,
      mousewheel: {
        interval: 400
      },
        navigation: {
                nextEl: '.swiper-plugin-navigation-prevEl',
                prevEl: '.swiper-plugin-navigation-nextEl'
         },
      plugins: [SwiperPluginNavigation]
    });
  </script>
</body>

</html>

Is it possible that you can intergrate all features into one file

Is it possible that you can intergrate all features into one file
Hi Joe,
I can load specific plugin in my project, but can we just load one file?
I tried to put the plugins into one file, but it did not work.
Thanks!

Accessing translate and progress values.

First of all, I am so happy that I found this repo! Finally a real alternative to Swiper, where even just the core module is huge. Great work!

What I would need to replace Swiper with tiny-swiper in all of my projects is a way to work with the current translate values. Especially during dragging / mousemove. This would make it possible, to build custom parallax effects, progress indicators and more.

Do you have any tips to achieve this with tiny-swiper?

See:
Swiper parallax example
Swiper progress pagination Example
Swiper methods
Swiper watchSlidesProgress events

image width responsive

Closed

Website docs link not available

Describe the bug
https://tiny-swiper.joe223.com/docs is unaccessible.

not https://tiny-swiper.joe223.com/docs/

Implementation of the `slidesPerGroup` option

Is your feature request related to a problem? Please describe.
Hello, joe.
I found this library because I was tired of Swiper's complex and large number of dependencies.
It is exactly the best library I could have asked for.
However, I noticed that there is one option missing.
It is slidesPerGroup.
I will be very happy to stop using Swiper, which I hate to do.
Have you considered implementing this? If not, can you consider it as a pull request?

Describe the solution you'd like
Implementation of the slidesPerGroup option

Describe alternatives you've considered
We know that if we implement this, we will get closer and closer to Swiper.
I would like to see this implemented, even as a plugin.

thanks!

Element is generating max index having into account shallow slides

Describe the bug
Having a "infinite" swiper (loop mode on) and resize enabled, there is an issue on the instance update.
Suddenly, the max index of the instance changes, because Element is taking into account slides with the data-shallow-slider attribute.

Expected behavior
The max index of the instance should not be affecteddue to a resize.

Information

Tiny-Swiper Version: v2.1.2
OS: MACos 10.15.7, windows 8, windows 10.
Browser: Chrome 96
Reproduce example：[e.g. https://codier.io/creation/BJzZFIJ6t]

pagination module not working for multible swipers

Describe the bug
when having multiple swipers with pagination, all of the bullets get applied to the first element

Expected behavior
the bullets should be appended to the correlating bullet container of the current swiper

Information

Tiny-Swiper Version: v2.2
OS: any
Browser: any
Reproduce example: https://codier.io/creation/rko3oIRg9

RFCs: Tiny-Swiper@2 is coming 🎉

Checkout branch dev_2.0 to catch a glimpse of new Tiny-Swiper.

The most important changes：

Code refactoring of core render
Add loop freeMode option
Custom render is supported, that give us the ability to implement special swipe effect.

Most frustrating:
Tiny-Swiper is no longer 2kb anymore (about 4kb right now) due to the complex render function and miscellaneous options.

implement pause auto play on hover

Ideally on web , when autoplay is set to true, there should be an attribute that we can pass to the Swiper class to pause the autoplay when the mouseenter event occurs and restart the autoplay when mouseleave event occurs, similar to the touch events but for web.

RTL support

Hi, I would like to discuss the possibility of adding RTL support, such as https://swiperjs.com/demos#rtl
It should either detect document.body.getAttribute('dir') === 'rtl' or we can supply a setting in options such as isRTL: true

The library is very useful on both smart and desktop devices, except on an OS where the UI is RTL.

Does tiny-swiper have equivalent to noSwipingClass from swiper.js API?

https://swiperjs.com/api/
Swiper has this option called noSwipingClass that defines a class, that disables touch event listeners on elements of the slide with that class. Does tiny-swiper have anything resembling this functionality?

Unable to subscribe to `before-init` and `after-init` hooks

Describe the bug

One can only subscribe to events when the object is already initialized, and at that point the constructor is done and the events were emitted already. This means they are pretty useless.

Expected behavior
Maybe it makes sense to pass the event as kind of callbacks in the config

Information

Tiny-Swiper Version: 1.3.0
OS: all of them
Browser: all of them

Regarding some common features

Such as slidesPerView, nextButton, prevButton.
In your project, you only have the Pagination plugin, in Mobile we might use the slidesPerView, nextButton, prevButton.
I think those are the common features you might have.

Try to prevent default behavior while mouse dragging

Describe the bug
See the gif below (recored on https://tiny-swiper.joe223.com/docs/demo/)

https://ibb.co/zZgFxzB

Expected behavior
Same as in Chrome (just works)

Information

Tiny-Swiper Version: as on https://tiny-swiper.joe223.com/docs/demo/
OS: Windows 10
Browser: Firefox 84.0 64bit
Reproduce example：see the above

typescript?

import Swiper from 'tiny-swiper';
import { useMount, useUnmount } from 'react-use';


export const Carousel: React.FC<CarouselProps> = (props) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const swiperInstanceRef = useRef<typeof Swiper | null>(null);

  useMount(() => {
    if (!containerRef.current) return;

    swiperInstanceRef.current = new Swiper(containerRef.current, {
      pagination: {
        clickable: true
      }
    });
  });
}

Incorrect detect of touch enabled devices

Hello! Unfortunately tiny-swiper makes false-positive detection of false enabled device.

Tested in Windows (laptop), using latest Chrome, FireFox, Opera and Edge (honestly tested in all these browsers and all returns "2" for navigator.maxTouchPoints). Only IE11 returned "undefined".

Here is, on my opinion, the most reliable way to detect touch enabled device. You may consider of something similar for tiny-swiper. (It's in jQuery but you can write self-destructing event handler in vanillaJS).

    isTouchDevice = false;
    $(window).one("touchstart", function() {
      isTouchDevice = true;
    });

Or just remove navigator.maxTouchPoints from detectTouch().

Should slide with shortcut while using loop mode

What is expected?

when loop options is true, slide index = 0, click prev slide swiper should be 0-4.

What is actually happening?

now the slide swiper is 0-1-2-3-4, click next should same as.

Manipulation plugin

Is your feature request related to a problem? Please describe.
I want to switch from Swiper to Tiny-Swiper, but I need Manipulation plugin. Do you have any plans for an official plugin or is there an unofficial plugin?

Additional context
Manipulation API (https://swiperjs.com/swiper-api#manipulation)

Auto option in slidesPerView and navigation

Hello! I would like to have "auto" option in slidesPerView and navigation feature if it is possible. Thanks!

Is it possible that you can intergrate all features into one file

Is it possible that you can intergrate all features into one file

Hi Joe,
I can load specific plugin in my project, but can we just load one file?
I tried to put the plugins into one file, but it did not work.
Thanks!

Can not integrate loop with freeMode well

Is your feature request related to a problem? Please describe.
loop conflict with freeMode when using CSS translate properties.

Describe the solution you'd like
Rebuild tiny-swiper with custom render engine, that decide how tiny-swiper react to user touch/mouse wheel actions.

But this implementation will break tiny-swiper@1 APIs

swiping triggers link

Describe the bug
If slide contains a link, swiping triggers following that link.

Expected behavior
swiping without triggering inner link

Information

Tiny-Swiper Version: v2.1.0
OS: linux
Browser: chrome

Fade effect

Is there any way to get similar crossfade effect as normal Swiper?

Mousewheel Swipe Too Fast

Hey there!
I was checking the new demos page of the alpha version and I found some strange behavior of the mousewheel navigation on my MacBook Pro 16' using the trackpad. I know that Macs have a very sensible trackpad and sometimes sliders react strangely with them, but the original Swiper somehow can make it work in the right way. I attach a video just to let you see what happens: basically, it scrolls multiple images, while it should scroll just one. Guess is something related to sensitivity or to iOS-like scroll momentum.

Registrazione.schermo.2020-12-17.alle.22.45.40.mp4

Disable buttons not working correctly when slider has only 2 slides

Describe the bug
When setting the loop option to false and the slider has no more than 2 slides the previous and next buttons will disable incorrectly. When user navigates to the last slide both navigation buttons are disabled.

The issue occurs in the navigation plugin at the checkNavBtnDisabledClass. By updating the condition in
index > minIndex to index >= minIndex and index < minIndex to index <= maxIndex I'm able to see the disable classes working correctly. Is this a known bug that will be fixed in the next release of tiny-swiper ?

Expected behaviour
If the slider has 2 or less slides and loop is set to false the nextEl should be disabled when user is at the last slide and the prevEl should not be disabled. When user is at the first slide the prevEl should be disabled and the nextEl should not be disabled

Information

Tiny-Swiper Version: v2.0.2

your official website can not be open

as the title

Loop option

Hello! I would like to have "loop" feature, for infinite sliding. I have checked out the sources and saw "loop" option, which not used anywhere.

Do you plan to implement infinite loop, or would consider to remove odd "loop" option?

TypeScript listed as direct dependency

Describe the bug
TypeScript is specified as a direct dependency even though it is only used for building the package (development).

Expected behavior
TypeScript is only specified as a dev dependency.

Add "destroy" method

Is your feature request related to a problem? Please describe.
Using the swiper in a SPA, the Swiper instances are never destroyed as there are no real page-reloads.

Describe the solution you'd like
Implement the destroy method from SwiperJS.

Additional context
See https://swiperjs.com/api/ for more details on the destroy API.

Autoplay Plugin

Is your feature request related to a problem? Please describe.
I want to switch from Swiper to Tiny-Swiper, but I need Autoplay.
Do you have any plans for an official plugin or is there an unofficial plugin?

Describe the solution you'd like
Official Plugin

Additional context
https://swiperjs.com/swiper-api#autoplay

initialSlide and nextEl navigation

Describe the bug
When passing an index to 'initialSlide' and the index is the last item in the array the 'nextEl' button is not automatically disabled, but it gets disabled after clicking on it.

Expected behavior
When initializing Swiper with initialSlide as last index in the array automatically disable the 'nextEl' button.

Information

Tiny-Swiper Version: [e.g. v2.0.1]
OS: [e.g. Windows]
Browser: [e.g. FireFox Developer 85.0b9]

Possible to create 3D Coverflow like in SwiperJS?

Hi, thank you very much for this tiny, fast swiperjs alternative. I am using swiperjs at moment, but i want to switch to tiny-swiper to reduce my app size and improve performance. I am looking to create a 3D Coverflow Effect like this using full swiperjs: https://codepen.io/corvus-007/full/gQEzYW

It is possible to recreate this cool 3D Effect in tiny-swiper? If yes, what do i need to do to get a similiar result?

Regarding about the lazy load

In your project, i did not find the lazy load part, do you have one with lazyload?.
The lazyload is a very important and useful part, you might have it. [...]

Navigation plugin not in index.full.js

Hi I noticed that this is missing, is it intentional?

Great swiper btw, thanks a lot.

Pagination bullet issue with slidesPerView

Describe the bug
Having 4 slides, setting slidersPerView=2 and using the pagination plugin leads to 4 bullet points (pagination dots) instead of 2. Moreover, with 2 slides per view displayed, there is no content to scroll to on the right but it still shows two dots indicating that there is.

Expected behavior
Dots should represent screens I can swipe to, instead of the individual elements (or slides). Having only 2 slides but displaying all two on the same screen (for example, in a landscape view, vs. switching back toslidersPerView=1 on portrait) means that there's two bullet indicators (first selected, second lighter gray), but I can't scroll right (of course, because there's no more content).

Information

Tiny-Swiper Version: latest version
OS: iOS/Chrome
Browser: Chrome

I took a quick look at the code to see if I can submit a PR, but it's not that straight forward since you're basing the dots off the page list, which is the list of slides. I feel like that entire part would need to be rewritten somewhat to calculate the dots based along something like total_dots = Math.ceil(total_slides / slidesPerView) (but smarter). Not sure how the partial values in slidesPerView would interfere here.

Breakpoints implementation

Hi there, I was looking through the Documentation and couldn't find a breakpoint parameter that Swiper offers. The library is literally unusable on mobile without this parameter.

breakpoints: { 320: { slidesPerView: 1, spaceBetween: 20 }, 480: { slidesPerView: 1, spaceBetween: 30 }, 1112: { slidesPerView: 3, spaceBetween: 30 }, 1536: { slidesPerView: 3, spaceBetween: 0 } }

Scroll container

I am trying to reproduce similar behavior as in swiper.js scroll container as I like Tinny swiper behavior way better. Is it possible to configure bounce on scroll when the page reaches the end of it like this: https://stackblitz.com/edit/local-scroller?file=index.html

I tried to do this in Tinny swiper but I quickly noticed that the canvas just keeps on going when Loop mode is disabled. It doesn't animate a bounce at the at with snap to page end.

https://stackblitz.com/edit/tiny-swiper2-demo-freemode-zhzyqt?file=index.html

Scrolling on .swiper-slide fires "before-slide" and "after-slide" hooks.

Describe the bug
In a horizontal swiper (.swiper-slide) scrolling on a slide vertically fires before-slide and after-slide hooks.

Expected behavior
Vertical scrolling should not fire slide events in a horizontal swiper.

Information

Tiny-Swiper Version: 2.0.0-alpha.6

Make Swiper resizable

Describe the bug
The swiper is not very responsive. I'm making use of this library in my project where the windows can be resized.
Here's' the bug in video format:
https://streamable.com/40xqoa

Expected behavior
It should be responsive.

Achieve a parallax effect with scroll event

Hey @joe223 Great to hear that alpha of V2 has been released. So "scroll" is the distance a slide has been moved right? Any ideas how to achieve a parallax effect with that?

Originally posted by @kilianso in #17 (comment)

Configure bounce on scroll when the page reaches the end

#61

some android phone, element.$el.offsetWidth return 0

Describe the bug

swiper init in react useLayoutEffect

Expected behavior

Information

Tiny-Swiper Version: [e.g. v2.0.0]
OS: [e.g. android]
Browser: -
Reproduce example：-

SwiperPluginKeyboardControl exported incorrectly

Describe the bug
esm version is exporting the incorrect module for SwiperPluginKeyboardControl, you can check index.esm.js
I've attached a demo for the issue but i think is self-explanatory, i can create a PR if you want, also i'd like yo ask you about v2, have you released any alpha/beta package with v2 so we can give it a try ?

Thanks!!!

Expected behavior
Export SwiperPluginKeyboardControl with the expected module

Information

Tiny-Swiper Version: v1.3.2
OS: All
Browser: All
Reproduce example：https://codesandbox.io/s/suspicious-cloud-scfzs

Accessibility Support

Unexpected slide width

Describe the bug
Slide width is less than container‘s.

Expected behavior

Information

Tiny-Swiper Version v1.2.0
OS: Windows
Browser Chrome/79.0.3945.79

https://codier.io/creation/BymYF8VYr

integration with angular

Describe the bug
This is not a bug report . However I am wondering if it is possible to use this library with an angular application

“[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false”

Describe the bug
When swiping in android webview this error is thrown.
“[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false”

Information

Tiny-Swiper Version: v2.0.0
OS: Android
Browser: Android System WebView (Chrome 87)

joe223 / tiny-swiper Goto Github PK

tiny-swiper's Introduction

Tiny-Swiper

Usage

Installation

Initialization

Browsers support

Contribution

License

tiny-swiper's People

Contributors

Stargazers

Watchers

Forkers

tiny-swiper's Issues

What is expected?

What is actually happening?

Recommend Projects

Recommend Topics

Recommend Org