kidjp85 / react-id-swiper Goto Github PK

hi，I use react-id-swiper,it's good!
but I found my view don't update immediately，it take me for a long time to slove this problem:
set
rebuildOnUpdate : true
in params object.

I think api document show add rebuildOnUpdate

Hey, hello and thanks for this awesome work.

We have a production application using your lib, and we're having some problems.
In development, or even in production, we get this errors:

Warning: flattenChildren(...): Encountered two children with the same key, `.$58283`. Child keys must be unique; when two children share a key, only the first child will be used.

The swiper is getting this '58283' from the key that i'm giving to my components, so both swiper and my components are rendering a same key.

I was trying to fix that on my own code, no success.
I was looking the source of react-id-swiper, and i might have fixed that:

return React.cloneElement(e, { key: Date.now() + index, className: [self.props.slideClass, e.props.className, noSwipingClass].join(' ') });

If i add this line to the code, the components are rendered with different keys, so the problem solves! :)

Can we add that (or something similar) on the code?
Should I add a PR?

Thanks!

cc @renatogalvones.

Hi again

So, ive been having this issue for a while now. When i want to use a horizontal swiper (and i copy the code exactly as the demo) i get all my slide contents rendering on the FIRST slide only...and the swiper still swipes in the correct direction (only without any info on the slide, of course).

Any thoughts at all? I really need to figure this out soon.

class BedOfRoses extends React.Component {
    render() {
        const params = {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30
        };
        return (
            <Swiper>
                <div>Slide 1</div>
                <div>Slide 2</div>
                <div>Slide 3</div>
                <div>Slide 4</div>
                <div>Slide 5</div>
            </Swiper>

        );

    }
}

export default BedOfRoses;

Slides change on autoplay and with pagination click but forward and back button do not work at all.

 <div id="homePageSlider">
                          <Swiper>
                                 <img alt="sweats-cards" classname="lazyload banner_main" name="sweats-cards-9-12-16" src=xyz.jpg" />
                          </Swiper>
                        </div>
                      </div>

I have tried passing this const params = {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true
};

as well but no luck

hello there. I think you newest version is not working, slides are not being rendered correctly and slider cannot be closed.

I am trying to get some functionality where I can add custom tiles instead of pagination(Example slider is attached), I know there is an option of custom pagination but I am not able to add custom button tiles, I have to edit global scss file for that or it can not be achieve

I'm wondering how to create a nested swiper like the one on the Swiper Demos for the iDangerous Swiper: [https://github.com/nolimits4web/Swiper/blob/master/demos/11-nested.html].

Here is what my code looks like:

var Mobile = React.createClass({
    render: function () {
        var vParams = {
            direction: 'vertical',
            pagination: '.swiper-pagination-v',
            paginationClickable: true,
            keyboardControl: true,
            nextButton: '.arrow-down'
        };
        var hParams = {
            direction: 'horizontal',
            pagination: '.swiper-pagination-h',
            paginationClickable: true,
            spaceBetween: 50,
            keyboardControl: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        };
        return (
            <div className="mobile">
                 <Swiper 
                    direction={vParams.direction}
                    pagination={vParams.pagination}
                    paginationClickable={vParams.paginationClickable}
                    keyboardControl={vParams.keyboardControl}
                    nextButton={vParams.nextButton}
                    >

                    <div className="swiper-slide">
                         <div className="main-container">
                            <div className="content">
                                <h1 className="home-title">TITLE</h1>
                                <div className="arrow-container">
                                    <img src={require("../images/arrow-down-black.png")} className="arrow-down" />
                                </div>
                            </div>
                        </div>
                    </div>

                    {/*nested swiper*/}
                    <div className="swiper-slide">
                        <Swiper
                            direction={hParams.direction}
                            pagination={hParams.pagination}
                            paginationClickable={hParams.paginationClickable}
                            spaceBetween={hParams.spaceBetween}
                            keyboardControl={hParams.keyboardControl}
                            nextButton={hParams.nextButton}
                            prevButton={hParams.prevButton}
                        >
                            <div className="swiper-slide"></div>
                            <div className="swiper-slide"></div>
                            <div className="swiper-slide"></div>
                            <div className="swiper-slide"></div>
                        </Swiper>

                   <div className="swiper-slide"></div>
             </div>

any thoughts?

Does anyone use this on React TypeScript?

Thank you for all the work that was put into this package!

Is there a way to not define how many slides fit per view, but rather to fit as many slides in the container that react-id-swiper is currently in based on the defined with of each slide?

For example, lets say I have a couple of 200px wide slides.
When container is

• 1,000px --> 5 slides fit in to the swiper,
• 900px --> 4.5 slides fit into the swiper,
• 500px --> 2.5 slides fit into the swiper

... and so on without me having to define the breakpoints. The reason for this, it is hard to define a breakpoints for all screen sizes, etc. and what often ends up happening is the swiper will try to put as an example three 200px slides into a 500px container, there by cutting off some of the slides.

slidesPerView: "auto" --> did not work for me. It simply defaulted to one slide per view.

Thanks!

Hi,
i think it would be nice if you would point out breaking changes of the main Swiper if you upgrade your dependencies.

Cheers,
Toni

Hi there!

I have a problem on React at the server side... I got ReferenceError: navigator is not defined
at D:\workspace\travelcoup-web-ui\node_modules\swiper\dist\js\swiper.js:4443:42

Some Ideas for a fix?

Thx! Great Job!

Cya crazyx13th

Uncaught Error: ReactMount: Two valid but unequal nodes with the same `data-reactid`: .3.2.0.0.0.0.0.0.$2.0.$1/=1$1.0.0
    at invariant (invariant.js:39)
    at Object.getID (ReactMount.js:119)
    at findParent (ReactEventListener.js:39)
    at handleTopLevelWithoutPath (ReactEventListener.js:87)
    at handleTopLevelImpl (ReactEventListener.js:73)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:136)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
    at Object.batchedUpdates (ReactUpdates.js:94)
    at dispatchEvent (ReactEventListener.js:204)

My component looks like this:

<Swiper {...params} key="2">
                        <div id="firstSlide" key="1">
                        <a id="sliderLink1" href={`${config.root}/trends/satin.html?dir=desc&order=production_date&icn=MainBanner1_22122016&ici=Desktop_MainBanner1_Satin_20122016_V1`} >
                        <img id="sliderImage1" alt="sweats-cards"  name="sweats-cards-9-12-16" src="http://img.stalkbuylove.com/media/wysiwyg/new_banners/Desktop_MainBanner_Jackets_20122016_V1.jpg" />
                        </a>
                        </div>

                       ```
 <div id="secondSlide" key="2">
                        <a id="sliderLink2" href={`${config.root}/trends/satin.html?dir=desc&order=production_date&icn=MainBanner1_22122016&ici=Desktop_MainBanner1_Satin_20122016_V1`}>
                        <img id="sliderImage2" alt="sweats-cards"  name="sweats-cards-9-12-16" src="http://img.stalkbuylove.com/media/wysiwyg/new_banners/Desktop_MainBanner1_27122016_V1.jpg" />
                        </a>
                        </div>

                      </Swiper>

It's really annoying. Why do I keep getting this and how do I fix it?

I am having a dynamic array of component to render in swiper, however, when adding the new component to the array, it does not shown correctly in the swiper, which function should I call to force update the swiper

Hi! I tried, inside prevButton and nextButton params, to put a custom class instead of swiper-button-prev and swiper-button-next and the buttons stopped working.

How is it possible to create custom prev and next buttons using your wrapper?

Originally, Swiper provides flexible controls structure, html example
<div class="swiper-button-prev"><span class="font-icon-big-arr-left"></span></div>

It would be great feature to pass some jsx to slider params for this case.

Thank you for this plugin and your attention.

I'm using this swiper in my current project and it's so good. But when load many complex items, it became slow and not smooth. So I think we only render 3 item on init : prev item, current item display and next item, and when swiping next item done, it'll return callback function onSwipeDone to load and replace 3 new item. That'll limit 3 item to performance display

So, I meam, I hope you support some callback function as: onSwipeDone (each swipe one item), onSwiping. It could be ?

p/s : 3 items depending on swipe setting, it's should be 3* (number item display) and pagination number can set on init by manual

Hi,

React 16 has been released recently, so it's a good reason to update package.json.
I tested my app with the current react-id-swiper and React 16, works good.

When mousewheel is set to true, getting to slide 2 from slide 1 works fine. Once you get to slide 2, if you do not move your mouse, you will no longer be able to switch slides unless you move your mouse again.

support ie9？

Hi kidjp85,

I'm fairly certain I'm missing something obvious, but how would I go about using the Swiper API methods on my React element?

I need to use the slideTo method in particular:

mySwiper.slideTo(index, speed, runCallbacks);

Thanks!

How do you get the swiper instance in order to manipulate it outside of the swiper component ?

I didn't see anything in the documentation which is actually an important part.

How do you deal with react rerender, let's say you have on each slide a onClick function, when you click a slide lets say #10, react rerender the swiper component to the begining of the slider #1.

I have tried componentShouldUpdate return false which prevent the rerender of the swiper, but i don't get the slide's state update that im expecting upon onClick()

}(this, function (React, ReactDOM, Swiper, objectAssign, PropTypes) {
  'use strict';

  var defaultProps = {
    containerClass: 'swiper-container',
    wrapperClass: 'swiper-wrapper',
    slideClass: 'swiper-slide'
  }

  class ReactIdSwiper extends React.Component {

You should compile classes to ES5 before publishing the package.

The Swiper api utilizes an object on to house the event listeners in the params setup of the swiper. The api of this react utility is not compatible and can be misleading. The propTypes and examples should be updated.

in loop mode, the component events can't be worked if swipe from the first slide to the last slide.
for example:

<Swiper {...params}>
  {
      imgList.map((list, i) =>
        <img key={i} onClick={this.onDocClick.bind(this, list.url)} src={list.imgUrl} />
      )
   }
 </Swiper>

the onClick method will worked as well in no-loop, but in loop mode, if swipe from the first slide to the last slide, it couldn't worked.
I know the Swiper will clone the first and the last of the element in loop mode, how to make it right in react?

Hey there,
I was wondering if you could update the demos to provide a demo of nested swipers, similar to in the swiper demos: http://idangero.us/swiper/demos/11-nested.html source: https://github.com/nolimits4web/Swiper/blob/master/demos/11-nested.html

Is that behavior doable with this wrapper, currently? also, is it possible to combine the above nested sliders + a scrollable container slide ( https://github.com/nolimits4web/Swiper/blob/master/demos/32-scroll-container.html )?

I tried something like:

const vProps = {
  direction: 'vertical'
}
<Swiper>
  <div>horizontal slide one</div>
  <div>horizontal slide two</div>
  <div>
    <Swiper {vProps}>
      <div>vertical slide one</div>
      <div>vertical slide two</div>
    </Swiper>
  </div>
</Swiper>

which allowed me to swipe horizontally to the nested stack, and swipe vertically in the nested stack, but I could not swipe back to the horizontal slides ( ie I could go from horizontal slide two to vertical slide one, but not the reverse).

I am trying to add this in an isomorphic app. When the server-side code is being run, app throws below error as navigator obj is undefined.

node_modules\swiper\dist\js\swiper.js:3627
var ua = navigator.userAgent.toLowerCase();
^
ReferenceError: navigator is not defined.

Could you please help me on how to get rid of this issue.

react-id-swiper/libs/styles/less/swiper.less @Keyframes Lack {}

We're having some great success with this component, thank you! But we cannot add this to our bundle with Create React App due to Uglyifier not working with ES6 code. This has complicated our build process, and I'm sure others would be facing the same situation.

If the NPM module had been babeled, then everything would just work.

Steps to reproduce:

• Scaffold an app with https://github.com/facebookincubator/create-react-app
• Run yarn build

Expected output:

• App is built correctly

Actual output:

$ react-scripts build 
Creating an optimized production build...
Failed to compile.
 
static/js/main.0f8e7deb.js from UglifyJs
SyntaxError: Unexpected token: name (ReactIdSwiper) [./~/react-id-swiper/src/react-swiper.js:28,0]

Unfortunately this library does not support server side rendering. Are there any plans to make this available in the future?

I am passing these parameters:

const params = {
pagination: '.swiper-pagination',
slidesPerView: 2,
paginationClickable: true,
spaceBetween: 30
};

I have 12 slides in the slider. It only shows as many slides as I mention in slides per view and scrolling to right never gives more elements no matter I pass 3 or 6 or 1

looks like this with 2 slides per view. next set of slides never appears

Clarify a use case in the docs for how/why to use this.props.activeSlideKey as provided in the react-id-swiper's original props.

I have a swiper with 5 slides. I have an issue when passing these parameters:

...
render() {
        const params = {
            direction: 'horizontal',
            paginationClickable: true,
            autoplay: 10000,
            autoplayDisableOnInteraction: false,
            loop:true
        };

for whatever reason, it will loop through once, and then when it gets back to the first slide, it wont continue. I inspected the elements and there are 6 slide divs in place...

I tried passing these parameters, and they fixed the issue in a sort of hacked way:

...
render() {
        const params = {
            direction: 'horizontal',
            paginationClickable: true,
            autoplay: 10000,
            autoplayDisableOnInteraction: false,
            slidesPerView:'auto',
            initialSlide:3,
            loop:true,
            loopedSlides:1,
        };

In this case, my slides no longer display in the order i placed them in the html, so i need to pass 'initialSlide: 3' to get to my 'first' slide... which is weird...

And the other issue with this fix is that when the user swipes, it almost skips back at the last slide and glitches. I'm developing this for a web-view app, and i've seen this issue on every mobile device i've tested on, and can also reproduce it in my browser. So it is most definitely an issue with the swiper itself.

Can you offer any help with this?

I can't see any reason in particular to prevent someone from using v1.5.0 on react ^15.0.0.

Let's add support back.

Hi there, I tested this package in my React application which is rendered by my node server before the client takes over.

Because the window variable and multiple DOM references are used in the swiper library, I can't use it. My Node server can't access these client only references.

Example: var ua = window.navigator.userAgent.toLowerCase();

Consider this as a heads up. I bet more people are running into this issue. Fixing this would mean that you have to port the entire swiper library to React conventions, which is a lot of work.

this doesn't work anymore:

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

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

even this won't work as the swiper instance is no longer passed as an argument to the init event:

on: {
  init: (swiper) => {
    this.swiper = swiper
  }
}

but... this works:

render() {
  const params = {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    pagination: {
      el: '.swiper-pagination',
      dynamicBullets: true,
      clickable: true
    }
  };

  return(
    <div>
      <Swiper {...params} ref={node => this.swiper = node !== null ? node.swiper : null }>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Swiper>
    </div>
  );
}

Hi!

I have issue with rendering pagination bullets. As soon as i refresh my page, only one swiper pagination bullet will appear. If i resize the screen just a bit, all bullets will come back.
I'm stuck a bit. Maybe you can help?

Check the gif, please.

Hi! I can't seem to get the parallax background working without changing your index.js file.

According to this the parallax background needs to be inserted between the "swiper-container" and the "swiper-wrapper". There is no option for that right now (as far as I can see).

Perhaps you can consider supporting parallax in this plugin?

Thanks in advance!

Is it possible to achieve linking of two swipers like this vanilla swiper demo is doing?: http://idangero.us/swiper/demos/300-thumbs-gallery.html

The vanilla swiper source code is here: https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html

They are doing something like this (I believe the bottom two lines are the important linking bits):

    var galleryTop = new Swiper('.gallery-top', {
      spaceBetween: 10,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      centeredSlides: true,
      slidesPerView: 'auto',
      touchRatio: 0.2,
      slideToClickedSlide: true,
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

If this is not possible I'd like to suggest as a feature request.

hey,

How can i hide next button on reaching last slide? Similarly how to hide prev button when first slide is present in swiper container?. if i am manipulating swiper from outside.

The CSS URL in readme(https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css and https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css) return 404 not found

I think having it only in peerDependencies makes more sense. There may be a clash otherwise.

I would like to call this.setState from the onSlideChangeEnd in order to keep track of the activeIndex in the state of the container component (that has the Swiper component). However, this triggers an error: swiper.js:4147 Uncaught TypeError: Cannot read property 'emitterEventListeners' of null whenever the slide is changed.

Interestingly, the activeIndex in the<p>tag does get updated correctly when clicking between different slides using the pagination buttons, but the slides themselves keep snapping back to the initial slide.

I don't understand why you cannot call this.setState within Swiper's transition callbacks. Is there another way for the state to be updated with Swiper's activeIndex?

class Foo extends React.Component {

  constructor(props) {
    super(props)
    this.state = {activeIndex: null}
    this.swiper = null
  }

  componentDidMount(){
    this.setState({activeIndex: this.swiper.activeIndex})
  }

  render() {

    const params = {
      pagination: '.swiper-pagination',
      paginationClickable: true,
      onSlideChangeEnd:(swiper)=>{
        this.setState({activeIndex: swiper.activeIndex})
      },
      onInit: (swiper)=>{this.swiper = swiper},
      runCallbacksOnInit: true,
    }

    return (
      <div>
        <p>Current Active Index: {this.state.activeIndex}</p>
        <Swiper {...params}>
           <div><Bar /></div>
           <div><Baz /></div>
        </Swiper>
      <div>
    );
  }
}

We are trying to do our own swiper react component and it's working ok, but it will be much better to have a singular one we can all work on. Thank you!!!

Hello! Thank you for your package.

There is an example in official docs with two-way control (Gallery with thumbnails).

Do you have the same function in your package?

HI，thank you for making this useful tool，I have some problems

{list.map((item, index) => {
     return (
        <div key={index}>
            slide
        </div>
      )
    }) : null
}

but swiper doesn`t work，I can't drag it，please tell me how to solve this problem，thank you！

The swiper has a black solid line border at the bottom of the component. It looks kind of weird when I use it on white background, then an unnecessary black line runs below this component

I am upgrading my website from using idangerous swiper to using this react wrapper for the swiper.

It does not work with images as far as I can tell :

My code looks like this :

import c1 from "./ichartsImages/grid4_yfill.png"
import c2 from "./ichartsImages/grid1.png"
        
...

<Swiper>
  <div style={{backgroundImage:"url(" + c2 + ")"}}></div>
  <div style={{backgroundImage:"url(" + c3 + ")"}}></div>
</Swiper>

The images to do not fit properly, and are repeated. I would expect the component to fit the images for me.

In my old code, there were a bunch of CSS classes which are missing in this component. However this worked perfectly :

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(ichartsImages/grid4_yfill.png)"></div>
            <div class="swiper-slide" style="background-image:url(ichartsImages/grid1.png)"></div>

Not sure why the react component does not work. Perhaps you need CSS classes? Anyway, i think the examples need to be more comprehensive.

It would be great if you could add your own styles to the elements. Modifying the class name still don't make it possible to have calculated style properties.

const params = {
  containerStyle: {
    padding: 10 + 10,
  },
  spaceBetween: 30
};
return (
  <Swiper {...params}>
    <div>Slide 1</div>
    <div>Slide 2</div>
  </Swiper>
);

Hello and thanks for the good work here!

I was using version 1.3.1 and doing like the files below. I've upgraded to 1.4.0 and now it seems to be broken. Can you help me with this?

I tried several approaches, but i want to know if i am doing something wrong first.

Using last version of React with Isomorphic Rendering.

version: 1.4.0
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of CardSlider.

Container file:

...

let Swiper;

class Container extends Component {
  constructor() {
    super();

    this.swiper = null;
  }

  componentWillMount() {
    Swiper = require('react-id-swiper');
  }

  ...

  render() {
    ...

    return (
      <CardSlider
        params={params}
        slides={this.props.slides}
        Swiper={Swiper}
        updateSliderDimensions={this.updateSliderDimensions}
      />
    );
  }
}

...

Presentation file:

...

function CardSlider({ params, slides, Swiper, updateSliderDimensions }) {
  ...

  return (
    <Swiper {...params}>
      {cards}
    </Swiper>
  );
}

...