question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

showThumbs={true}

See original GitHub issue

When true I get this

1 2

When set to false I get no errors and renders fine.

Tumbnails are required so can someone point me into the right direction ? The code is quite simple:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Carousel } from 'react-responsive-carousel';

const ImgSlider = ({ url }) =>{
  return(
  <div className="img-ctn" >
    <img src={url} className="img-responsive"/>
  </div>
);
}


class ProductSlider extends Component {

  render() {

    const {data} = this.props;

    return (
      <div>
           <Carousel showArrows={true} showThumbs={false}>
           {
             data.map((datum,idx) => <ImgSlider key={datum.id} url={datum.url}/>)
           }
            </Carousel>
      </div>
    )
  }
}
export default ProductSlider;

Gracias !

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:12 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
leandrowdcommented, Apr 29, 2017

Hi @polmoneys, I finally found the problem. You were using a custom component to render the slides. The carousel can’t find the image inside a custom component because it can’t access component.props.children. I just published a version with better error handling to avoid the exception you got but you will need to change your code a little bit.

Please, have a look at https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md and update your carousel to the version 3.1.3.

1reaction
leandrowdcommented, Apr 28, 2017

Hey @polmoneys, sorry, I can’t reproduce this problem. If you want, feel free to fix the problem and send a PR. If you need any help let me know.

Cheers.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Showboxlink Seven F Showthumbs True Media Image V C Gavi ...
Showing 'Showboxlink Seven F Showthumbs True Media Image V C Gavi Heights 297' search results. Find who stocks this wine, and at what...
Read more >
jq get object key and change its name in one filter
Revised Answer. Your original filter was pretty close. Here is one that does what you requested. (keys_unsorted|first) as $i ...
Read more >
Formal/Publicity Shots/Album Art - tg4jg | Josh groban albums ...
... showLogo: 'false', clickUrl: 'http://www.smugmug.com', showThumbs: 'true', showButtons: 'true', crossFadeSpeed: '350', setSpeed: 'fast' }; SM.flash.
Read more >
NATA
... clickToImage: 'true', showThumbs: 'true', showButtons: 'true', crossFadeSpeed: '350' }; SM.flash.insertSlideshow(600, 600, ssConfig, 'transparent');
Read more >
Photo Gallery - Village West Resort Okoboji
[slideshow gallery_id=”2″ width=600 height=450 showthumbs=true thumbsposition=bottom]. 20130831_9561 Digital Camera. Vacation Okoboji guide.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found