extra blank slide when using array

[dhill1]

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.

[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

[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.

[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>
                    );
                }.bind(this))

            );
        }
    }.bind(this));

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

[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>)

[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>
          :""}

[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.