laurenchen0631 / react-owl-carousel Goto Github PK

ReferenceError: self is not defined
at eval (webpack:///.//style-loader/addStyles.js?:14:30)
at eval (webpack:///.//style-loader/addStyles.js?:9:47)
at module.exports (webpack:///./~/style-loader/addStyles.js?:31:68)
at eval (webpack:///./src/owl.carousel.css?:7:36)
at Object. (D:\Karan\Learn\React\startKit\my-project\node_modules\react-owl-carousel2\lib\OwlCarousel.js:87:2)
at webpack_require (D:\Karan\Learn\React\startKit\my-project\node_modules\react-owl-carousel2\lib\OwlCarousel.js:30:30)
at eval (webpack:///./components/OwlCarousel.jsx?:21:1)
at Object. (D:\Karan\Learn\React\startKit\my-project\node_modules\react-owl-carousel2\lib\OwlCarousel.js:57:2)
at webpack_require (D:\Karan\Learn\React\startKit\my-project\node_modules\react-owl-carousel2\lib\OwlCarousel.js:30:30)
at D:\Karan\Learn\React\startKit\my-project\node_modules\react-owl-carousel2\lib\OwlCarousel.js:50:18

Hey,

I do not understand how to use the "info" callback?

Thank you for your help

When I want to change the state in my component its re-render the slider again and again. How can I fixed this issue ?

https://github.com/seal789ie/react-owl-carousel/blob/7d82089c11af7b04d4c11e9d54e08f9a8bfb2f98/example/index.tsx#L48

You are using createRef, which is a React 16.3.0+ feature. You state that you're compatible with React>15, but you're wrong! 😉

Thanks for the v2 refresh -

The options do not talk about autoheight. is that supported in the update?

I get the error message "window not defined" when trying to start my server.

I don't know how to use next()!

Hello,

Is there a way that the carousel could remember its state? I am using redux where whenever I click on an owl carousel it sets the state and rerenders, but this is a problem when I scroll beyond the first list of items because when it rerenders it takes me back to the first half of the items.

Thanks so much
Siya

I seem to be getting a blank slide at the end when using a dynamic array to generate my slides.

import React, {PropTypes} from 'react'
import OwlCarousel from 'react-owl-carousel'

class Carousel extends React.Component {

    constructor(props) {
        super(props);

        this.options = {
            autoplay: true,
            loop: true,
            nav:true,
        }

    }


    render() {
        return (<OwlCarousel className="owl-theme" {...this.options}>
            {this.props.slideItems.map((item, idx) => {
                        let image = <img src={item.src} alt={item.alt ? item.alt : `Carousel Image #${idx}`} className={'image' + idx}/>
                        return (
                            <a key={idx} href={item.href} style={slideStyle} data-event={item.dataEvent} data-value={item.dataValue}>
                                {image}
                            </a>
                        )
                    })}
        </OwlCarousel>)
    }

}

export default Carousel

I have verified that my array only returns 4 results, but the carousel is generating 5 items with a blank one at the end.

I could not achieve this...
Like in this quesiton:
https://stackoverflow.com/questions/42337019/animation-on-multiple-slide-owl-carousel

Having this issue while using with prerender.io could be a jQuery issue

Jquery is unnecessary library and one doesn't need if React is used in the project. React can handle all events, dom manipulation ,etc..

Hello, I have the next code:

`import React from "react";
import {Link} from "react-router-dom";
import OwlCarousel from 'react-owl-carousel';

import EventListItem from "./EventListItem";

const ServerClient = require('../kernel/ServerClient');

export default class EventListTop extends React.Component {
constructor(props) {
super(props);
this.state = {
eventList: []
};
}

componentWillMount() {
    checkConnection();
    ServerClient({
        method: 'GET',
        path: '/siteApi/eventTop',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(response => {
        this.setState({
            eventList: response.entity
        });
    });


}

render() {
    let eventList = this.state.eventList.map(object => {
        return <EventListItem key={object.ouid} data={object}/>
    });

    const options = {
        autoWidth: true,
        nav: true,
        autoplay: true,
        navText: ["<i class='fa fa-angle-left' aria-hidden='true'></i>", "<i class='fa fa-angle-right ml-3' aria-hidden='true'></i>"]
    };

    return (
        <div className="all_sports_gradient main_logo_container inverted">
            <div className="container_mid pr-lg-5 pr-md-3">
                <Link to="/" className="logo d-block border-0"/>
                <div className="announse_wrapper pt-2 pt-md-4">
                    <OwlCarousel options={options} className="announse owl-carousel">
                        {eventList}
                    </OwlCarousel>
                </div>

            </div>
        </div>
    )
}

}`

And i get the next error:
`Uncaught TypeError: Cannot read property 'width' of undefined
at Owl.maximum (owl.carousel.js:1049)
at Owl.run (owl.carousel.js:412)
at Object.e [as run] (jquery-3.1.1.slim.min.js:2)
at Owl.update (owl.carousel.js:592)
at Owl.refresh (owl.carousel.js:633)
at Owl.initialize (owl.carousel.js:491)
at new Owl (owl.carousel.js:182)
at HTMLDivElement.eval (owl.carousel.js:1675)
at Function.each (jquery-3.1.1.slim.min.js:2)
at r.fn.init.each (jquery-3.1.1.slim.min.js:2)
Owl.maximum @ owl.carousel.js:1049
run @ owl.carousel.js:412

type in docs item 'class' should be 'className'

<OwlCarousel 
	className="owl-theme"
	loop margin={10} nav
>
	<div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    ...
</OwlCarousel>

Should be

<OwlCarousel 
	className="owl-theme"
	loop margin={10} nav
>
	<div className="item"><h4>1</h4></div>
    <div className="item"><h4>2</h4></div>
    ...
</OwlCarousel>

Is there a way to get the currently shown slide? I want each slide to navigate to a unique page when clicked on, which means I will need to know which slide is currently focused.

Using this with a slider that has react onclick functions when an item is clicked but when using infinite loops the onclick doesnt work on the cloned items. does anyone know a workaround for this?

If I want to create my own custom navigation, how do I got about adding the prev and next methods to the onClick for them?

Did anyone else experienced this issue, and how to bypass it if anything?

Hi,

I use server-side rendering with my React app. When webpack uses style-loader to do the server side rendering the 'window' in the javascript of the library causes my rendering to break and not make it to the client side rendering.

Do you think you can make this library compatible for server-side rendering?

Here is my error:

webpack:///.//style-loader/addStyles.js?:19
[1] return window && document && document.all && !window.atob;
[1] ^
[1]
[1] ReferenceError: window is not defined
[1] at eval (webpack:///.//style-loader/addStyles.js?:19:10)
[1] at eval (webpack:///.//style-loader/addStyles.js?:9:47)
[1] at module.exports (webpack:///.//style-loader/addStyles.js?:47:68)
[1] at eval (webpack:///./~/owl.carousel/dist/assets/owl.carousel.min.css?:12:36)
[1] at Object. (C:\dev\Moneyversity\moneyversity2\node_modules\react-owl-carousel\lib\OwlCarousel.js:147:1)
[1] at webpack_require (C:\dev\Moneyversity\moneyversity2\node_modules\react-owl-carousel\lib\OwlCarousel.js:30:30)
[1] at Object.eval (webpack:///./components/OwlCarousel.jsx?:6:104)
[1] at eval (webpack:///./components/OwlCarousel.jsx?:284:30)
[1] at Object. (C:\dev\Moneyversity\moneyversity2\node_modules\react-owl-carousel\lib\OwlCarousel.js:166:1)
[1] at webpack_require (C:\dev\Moneyversity\moneyversity2\node_modules\react-owl-carousel\lib\OwlCarousel.js:30:30)

Only one carousel works for a component, how to use multiple carousel(instances) in a component.

I am using this currently in a React 16 app without issues, however, I am getting warnings because of the peerDepencies

  "peerDependencies": {
    "react": "^0.14.0 || ^15.0.0",
    "react-dom": "^0.14.0 || ^15.0.0"
  },

Hi. Could you please remove or say how i can extend your react-owl-carousel component and change this method:

    componentDidUpdate() {
        console.log(this.options);
        this.owlCarousel = $(this.inst);
        this.owlCarousel.owlCarousel(this.options);
    }

Because console.log annoys me on each render =)

When i do something this:

export default class Test extends OwlCarousel {
        componentDidUpdate() {
            this.owlCarousel = $(this.inst);
            this.owlCarousel.owlCarousel(this.options);
    }
}

It doesn't work - jquery is not defined, if i call $ then this.owlCarousel.owlCarousel - is not a function

UPDATE, found correct syntax:

responsive={
            {
                "0":{items:1},
                "600":{items:3},
                "1000":{items:6}
            }
}

Why does this implementation not work for responsive?

      <OwlCarousel
            autoplaySpeed={450}
            lazyLoad={true}
            rewind={true}
            responsive={
                {'0':{items:1}, '500':{items:2}, '1300':{items:3}}
            }
            autoplay={true}
            autoplayHoverPause={true}>

I have used this package in many components. When I have analysed the bundle size with source map it has been taking 18% of size. How can I reduce this size and making this app faster. Thanks!!

Will you be adding support for Owl Carousel 2?

I have a problem while trying to set the current active slide index on carousel changed onChanged. I'm passing this state down the slide, but when I update the slider state it simply reaches the maximum call stack of JS.

I have the following structure:

<Carousel>
    <Slide currentSlideIndex={this.state.currentSlideIndex}/>
    <Slide currentSlideIndex={this.state.currentSlideIndex}/>
</Carousel>

The thing is that the carousel if going to be controlled by each Slide, since there is some video I want to play, therefore I am planning to use the next() method.

Hi, when i try to call .destroy() method there is an error '_this.carousel.destroy is not a function' because the method name is 'destory' I think you should fix the method name.

jquery的版本为3.3.1，react的版本为16.3，满足要求，但是还是报fn undefined,请问这种情况要怎么处理

I'm using react-owl-carousel like this:

<ReactOwlCarousel 
   className="rs-carousel owl-carousel" 
   loop
   margin={30}
   autoplay={false}
   nav
   items={1}
   smartSpeed={2000}
>
    <div className="row item">
         <div className="col-md-4 col-sm-4 col-xs-12 first">
              <img src={RMImage} alt="" />
              <h4>Real Madrid</h4>
         </div>

         <div className="col-md-4 col-sm-4 col-xs-12">
              <span className="date">JUNE 16, 17:00</span>
              <span className="vs">VS</span>
              <span>Camp Nou</span>
         </div>

         <div className="col-md-4 col-sm-4 col-xs-12 last">
             <img src={LVPImage} alt="" />
             <h4>Liverpool FC</h4>
         </div>
    </div>
</ReactOwlCarousel>

The problem is that the default width of the content inside (like the translate3d or the items width) is NOT correct till I resize the window a bit or I move the dev tools.

Fe: translate3d(-3838px...) to -1800px and items width 1889px to 870px.

What could it be?

Subj

how to use next() ?
help me

Could you update your code?

My current settings are as follows:
let owl_settings = {
items: 4,
responsive: {
"1405":{items:3},
"1045":{items:2},
"683":{items:1}
}
}

What I am trying to achieve is at widths greater than 1405px, display 4 items, between 1045px and 1405px display 3 items, between 683px and 1045px display 2 items and anything below 683px display 1 item.

My current setup doesn't work and I'm wondering if someone can give me more information on how responsive works to achieve this effect.

Version 2.3.0 breaks almost everything.

Navs are forced to be there, items display is completely bugged...

Hello
When I use Rtl Mode not work.
this.state = {
options: {
rtl:true,
loop: false,
},
};

and not work rtlClass in OwlCarousel component
because Class owl-rtl will not be added to the main tag.
<OwlCarousel
className="owl-theme"
rtlClass="owl-rtl"
{...this.state.options}
/>

hellllllllllllp meeeeeeeeeeee

In the documentation, navClass expects array of strings with default value ['owl-prev','owl-next'], but in actuality, it expects string

Warning: Failed prop type: Invalid prop `navClass` of type `array` supplied to `OwlCarousel`, expected `string`.

I have Big problem after successfully build project. when i was build project successfully after close the project and open next day they will run successfully. but suddenly there is an error.
please help me. i was found error in react-owl-carousel.

        <OwlCarousel mouseDrag={true}>
          <div className="photoBox"></div>
          {this.renderPhotos()} // this returns a component for each photo
        </OwlCarousel>

error:

Warning: Failed prop type: Invalid prop children supplied to OwlCarousel.
in OwlCarousel (created by photoSlider)

debugging:

When I removed the function call, no problems. But, when I replaced the components with divs similar to the example I got the same error.

Hi,

When I try to run OwlCarousel and then somewhere inside of its slide-component run another nested OwlCarousel, both of them don't work;

How can it be solved?
Thank you in advance!

Hi can you please tell me how can I add rtl support with this package. I am using this into my production website I have arabic language in arabic I need to enable RTL for this carousal.

Please let me know.

Thanks
Adil

Hello,

I have issue when I click on element within owl-item div, it will automatically slide back to the first slide. How to prevent this behaviour?

Thank you

Hi,

I am using this library into my react component for some reasons, which i don't know it's creating first ow-item active empty.

`constructor(props) {
super(props);

    this.state = {
        timeoutId: null,
        show: false,
        options: {
            items: 5,
            nav: true,
            rewind: true,
            autoplay: false,
            lazyLoad: true,
            mouseDrag: false,
            responsive: {
                responsiveRefreshRate: 100
            }
        }
    };
}

componentDidMount() {

    this.props.dispatch(getFlashSale());

    console.log('adil');

}

componentWillMount() {
    this.timeoutId = setTimeout(() => {
        this.setState({show: true});
    }, 1000);
}

componentWillUnmount() {
    if (this.timeoutId) {
        clearTimeout(this.timeoutId);
    }
}

createFlashListDOM() {
    return this.props.flashSaleList.map((obj, i) => (
        <FlashSaleItem row={obj} key={i} index={i}/>
    ));
}

render() {
    if (this.props.loader == true) {
        return <Loading/>
    } else {
        return (
            <div className={this.state.show ? 'flash-sale owl-after-load' : 'flash-sale'}>
                <div className="flash-sale-box">
                    <ul className="flash-sale-list">
                        <OwlCarousel options={this.state.options}>
                            {this.createFlashListDOM()}
                        </OwlCarousel>
                    </ul>
                </div>
            </div>
        );
    }
}

import React from 'react';

export default function FlashSaleItem(props) {
    return (
        <li key={props.index}>
            <div className="flash-sale-list-item">
                <a>
                    <div className="flash-sale-image">
                        <div className="flash-sale-image-inner">
                            <img src={props.row.IMAGE.SRC} alt="Loading ..."/>
                        </div>
                    </div>
                    <div className="flash-sale-title">
                        <p>{props.row.NAME}</p>
                    </div>
                    <div className="flash-sale-price">
                        <span className="old-price">{props.row.PRICES.PRICE_OLD} AED</span>
                        <span className="new-price text-bold">{props.row.PRICES.PRICE_NEW} AED</span>
                    </div>
                </a>
                <div className="pl-10 pr-10">
                    <div className="flash-sale-buy-now">
                        <a>
                            BUY NOW
                        </a>
                    </div>
                    <span className="flash-sale-timer">
                                <small className="text-bold">00  hrs. 28 min. 12 sec.</small>
                    </span>
                </div>
            </div>
        </li>
    );
}

`

Thanks
Adil

rewind={false} unrecognized on OwlCarousel component.

When I try to run a loop with my items which are other react components,it appears four extra cloned owl items.My code is here:
<OwlCarousel options={options}> {products.map((card, i) => ( <div key={i} className={classes.card}> <Card details={card} /> </div> ))} </OwlCarousel>
where,Card is that react component and products is an array.

With autoplayHoverPause set to true, I am getting the expected result of the carousel pausing when my mouse hovers over the carousel area. However, upon moving my mouse out of the carousel area, it does not resume autoplay. Autoplay is only resumed after clicking one of the nav items (either next or prev).

<OwlCarousel items={4}>
  {this.props.articles.map(
    (article, key) => (
      <div className="item" key={key}>
        ...
      </div>
    )
  )}
</OwlCarousel>

When mapping carousel items from Props, carousel renders before items. And it's rendered empty.
Is there any way to overcome this problem?

Hey thanks for the component first of all! You're the MVP.

I'm trying to add videos into the slide. So here's what I'm doing:
`<OwlCarousel
className="owl-theme"
loop
margin={10}
nav
items={1}
lazyLoad={true}
autoplay={true}
center={true}
autoplayHoverPause={true}

<div className="item-video">
    <a className="owl-video" href="https://www.youtube.com/watch?v=hmz04fCzn5k"></a>
</div>

`

The page fails to load, with an error:
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Is there anything I'm doing wrong?

2.3.1 is broken, i downloaded to 2.2.0 and everything works

Hi,

Great owl carousel wrapper ! I have some problem on components embeded in carousel. Every time I swipe, the component re-render, how can I disable this behavior?