npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2020 – Ryan Hefner

react-id-swiper

v2.4.0

Published

ReactJs component for iDangerous Swiper

Downloads

166,977

Readme

npm Version Coverage Status Weekly download Total Downloads Build Status Greenkeeper badge

Package Quality

react-id-swiper ( Newest version 2.4.0 )

A library to use Swiper as a ReactJs component

Demo

What is Swiper?

Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.

It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers.

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity. Swiper does work well with Gatsby.

Props

NameTypeDefault valueDescription
ContainerElString'div'Element type for container
containerClassStringswiper-containerSwiper container class name
WrapperElString'div'Element type for wrapper
wrapperClassStringswiper-wrapperSwiper wrapper class name
slideClassStringswiper-slideSwiper slide class name
shouldSwiperUpdateBooleanfalseUpdate swiper when component is updated
rebuildOnUpdateBooleanfalseRebuild swiper when component is updated
noSwipingBooleanfalseDisable swiping by condition
activeSlideKeyStringnullInitial slide index
renderPrevButtonfunctionRender props function for prev button
renderNextButtonfunctionRender props function for next button
renderScrollbarfunctionRender props function for scrollbar
renderPaginationfunctionRender props function for pagination
renderParallaxfunctionRender props function for parallax
getSwiperfunctionCallback function that returns Swiper instance

If you want to use Swiper custom build to reduce bundle size, you need to use extra props below.

Custom build extra props

NameTypeDefault valueDescription
SwiperClassSwiper class
modulesarrayArray of Swiper necessary modules

NOTE:

  • You can also use Swiper's original params too. Swiper API documentation HERE
  • Find more info about Swiper custom build HERE

Documentation

Installation and setup

  • From version 2.0.0, it requires React & ReactDOM ver >=16.8.0 to use Hooks
  • From version 2.4.0, it requires Swiper ver >= 5.0.0

Npm package

By npm

npm install --save [email protected] [email protected]

By Yarn

yarn add [email protected] [email protected]

CDN

<script src="https://unpkg.com/[email protected]/lib/react-id-swiper.js"></script>
<script src="https://unpkg.com/[email protected]/lib/react-id-swiper.min.js"></script>

Styling

Swiper stylesheet file is required

Use Swiper stylesheet file from CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.2.0/css/swiper.min.css">

For version <=2.3.2

You can import direct from react-id-swiper/lib/styles/ (supporting css, scss)

css

import 'react-id-swiper/lib/styles/css/swiper.css'

scss

import 'react-id-swiper/lib/styles/scss/swiper.scss'

For version >=2.4.0

You should import directly from Swiper packages which supports css, scss and less

css

import 'swiper/css/swiper.css'

scss

import 'swiper/swiper.scss'

less

import 'swiper/swiper.less'

Examples

Numerous live examples:

Navigation, Pagination, Pagination / Dynamic Bullets, Progress Pagination, Fraction Pagination, Custom Pagination, Scrollbar, Vertical slider, Space Between Slides, Mutiple Slides Per View, Auto Slides Per View / Carousel Mode, Centered Slides, Centered Slides + Auto Slides Per View, Free Mode / No Fixed Positions, Scroll Container, Multiple Row Slides Layout, Nested Swipers, Grab Cursor, Loop Mode / Infinite Loop, Loop Mode With Multiple Slides Per Group, Fade Effect, 3D Cube Effect, 3D Coverflow Effect, 3D Flip Effect, Mousewheel-control, Auto Play, Thumbs Gallery With Two-way Control, RTL Layout, Parallax, Lazyload Image, Responsive Breakpoints, Manipulating component outside Swiper, Customized Component

Default

import React from 'react';
import Swiper from 'react-id-swiper';
// Version <= 2.3.2
import 'react-id-swiper/lib/styles/css/swiper.css';
// Version >= 2.4.0
import 'swiper/css/swiper.css';

const SimpleSwiper = () => (
  <Swiper>
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
    <div>Slide 4</div>
    <div>Slide 5</div>
  </Swiper>
)

export default SimpleSwiper;

Using params

import React from 'react';
import Swiper from 'react-id-swiper';

const SimpleSwiperWithParams = () => {
  const params = {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  }

  return(
    <Swiper {...params}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
      <div>Slide 5</div>
    </Swiper>
  )
}

export default SimpleSwiperWithParams;

Manipulating swiper from outside swiper component

import React, { useState } from 'react';
import Swiper from 'react-id-swiper';

const ManipulatingSwiper = () => {
  const [swiper, updateSwiper] = useState(null);

  const goNext = () => {
    if (swiper !== null) {
      swiper.slideNext();
    }
  };

  const goPrev = () => {
    if (swiper !== null) {
      swiper.slidePrev();
    }
  };

  return (
    <div>
      <Swiper getSwiper={updateSwiper}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Swiper>
      <button onClick={goPrev}>Prev</button>
      <button onClick={goNext}>Next</button>
    </div>
  );
};

export default ManipulatingSwiper;

Custom build Swiper

You can find the WORKING DEMO REPO HERE

import React from 'react';
import ReactIdSwiperCustom from 'react-id-swiper/lib/ReactIdSwiper.custom';
// For swiper version 4.x
import { Swiper, Navigation, Pagination } from 'swiper/dist/js/swiper.esm';
// For swiper version 5.x
import { Swiper, Navigation, Pagination } from 'swiper/js/swiper.esm';

const CustomBuildSwiper = () => {
  const params = {
    // Provide Swiper class as props
    Swiper,
    // Add modules you need
    modules: [Navigation, Pagination],
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    spaceBetween: 30
  }

  return(
    <ReactIdSwiperCustom {...params}>
      <div>Slide 1</div>
      <div>Slide 2</div>
      <div>Slide 3</div>
      <div>Slide 4</div>
      <div>Slide 5</div>
    </ReactIdSwiperCustom>
  )
}

export default CustomBuildSwiper;

NOTE:

  • If you use Webpack & Babel you need to setup Babel loader config in webpack.config.js like below:
module: {
  rules: [
    {
      exclude: [/node_modules\/(?!(swiper|dom7)\/).*/, /\.test\.js(x)?$/],
      test: /\.js(x)?$/,
      use: [{ loader: 'babel-loader' }],
    }
  ],
}

Adding customized css classes

const params = {
  pagination: {
    el: '.swiper-pagination.customized-swiper-pagination',
  }, // Add your class name for pagination container
  navigation: {
    nextEl: '.swiper-button-next.customized-swiper-button-next', // Add your class name for next button
    prevEl: '.swiper-button-prev.customized-swiper-button-prev' // Add your class name for prev button
  },
  containerClass: 'customized-swiper-container' // Replace swiper-container with customized-swiper-container
}

Adding customized components

For customized rendering to work, you have to use same classname with params el.

const params = {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev'
  },
  renderPrevButton: () => <button className="swiper-button-prev">Prev</button>,
  renderNextButton: () => <button className="swiper-button-next">Next</button>,
}

Workable slides

Each slide should be wrapped by HTML element

BAD CODE :thumbsdown:

<Swiper {...params}>
  Slide content // notice no HTML element
</Swiper>

GOOD CODE :thumbsup:

<Swiper {...params}>
  <span>Slide content</span>
</Swiper>

Bug report

Please use the prepared Codesanbox below to reproduce your issue. Thank you!!

Edit ReactIdSwiper - DEMO

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details