extra blank slide when using array about react-owl-carousel

[GaneshMitra]

I am having the same issue, I was resolved it by checking array length code as follows:
```

let ImageList = $.map(this.state.data, function (data, index) {
            if (parseInt(this.state.selectedcaseitem) === parseInt(index)) {
                return (
                    $.map(data.screenshots, function (d, i) {
                        return (
                            <span className="item" key={i}>
                                <img src={d.screenshot} alt="" />
                            </span>
                        );
                    }.bind(this))

                );
            }
        }.bind(this));

And the length checking should be 
                                  <span className="large-12 columns">
                                    {ImageList.length>0?
                                    <OwlCarousel {...options} className="owl-theme" >
                                        {ImageList}
                                    </OwlCarousel>:""}
                                </span>

[floyd0987]

Checking the array length works.

{this.state.posts.length>0?
        <OwlCarousel ref="car" options={options} events={events}>

          {this.state.posts.map( (post) => 

               <div>
               <a href={ post.link }>
               <img src={ post.image } alt={ post.name } className="post-image" />
               <p>{ post.name }</p>
               </a>
               </div>

         )
       }

          </OwlCarousel>
          :""}

[MenashayAu]

Here is how I solved this issue (for Meteor + React Project) -
OwlCarousel.js adds the empty slide not the React part of it.

1. Remove react-owl-carousel from your project

2. Download the react-owl-carousel zip package from git and extract it to temporary location

3. From the 'components' folder of the extracted content, copy the OwlCarousel.jsx to your project

4. Download the latest OwlCarousel.js (https://owlcarousel2.github.io/OwlCarousel2/docs/started-welcome.html)

5. Extract the zip file to temporary location then copy the OwlCarousel.js to your project

6. While you are there you can also copy the css files to your project

7. Open the OwlCarousel.js from your project and go to 'Owl.prototype.replace = function(content) {'
   (should be around line 1289)

8. In that function find '}).each($.proxy(function(index, item) {'

9. Add the following code just under this.$stage.append(item);
   ``

    	let i = item[0].children[0];
    	let clsNm;
    	if(i){
    		clsNm = $(i).attr('class');
    	}
    	if(clsNm !== 'owl-stage') {
                       this._items.push(item);
                    }
   

10. Don't forget to change 'import' statements to the OwlCarousel.jsx that is in your project

In all fairness I did not do a lot of testing with this change but it seems to work perfectly good.

[Ma2iio]

It's work.

[hawkbt]

i solve this in react-owl-carousel just using this css property
.owl-item.active:first-child {
display: none;
}
this is my setup

                        return(
                            <div className='item' key={art.id}>
                                <div className="center-crop">
                                    <a href="" className="category-link">
                                        <span className="label-warning">{art.categories.peek().name}</span>
                                    </a>
                                    <Link to={`/articulo/${art.permalink}`}>
                                    <img src={methods.checkmedia(art)} alt={art.title} className='img-carousel'/>
                                    </Link>
                                    <div className="carousel-link">
                                        <Link to={`/articulo/${art.permalink}`}>
                                            {art.title}
                                        </Link>
                                    </div>
                                </div>
                                {methods.checkVideoArticle(art)}
                                <div className="newSummary">
                                    {art.highlight}
                                </div>
                            </div>)

[Lucas-guida]

I am having the same issue when loading the slides from an array, where an additional blank element is added. My implementation is similar to the above.

[jiosorio2210]

@dhill1 Did you fix it or find a work around ?

[dhill1]

@ijosorio1022 no I was not able to solve this one

[RehanRiaz5383]

i solve this in react-owl-carousel just using this css property .owl-item.active:first-child { display: none; } this is my setup

                        return(
                            <div className='item' key={art.id}>
                                <div className="center-crop">
                                    <a href="" className="category-link">
                                        <span className="label-warning">{art.categories.peek().name}</span>
                                    </a>
                                    <Link to={`/articulo/${art.permalink}`}>
                                    <img src={methods.checkmedia(art)} alt={art.title} className='img-carousel'/>
                                    </Link>
                                    <div className="carousel-link">
                                        <Link to={`/articulo/${art.permalink}`}>
                                            {art.title}
                                        </Link>
                                    </div>
                                </div>
                                {methods.checkVideoArticle(art)}
                                <div className="newSummary">
                                    {art.highlight}
                                </div>
                            </div>)

this solution fix my problem.