0

I am using @fluentui/react-northstar carousal component link. it seems solution for my problem, but while loading it in spfx its not taking any default css or such. My webpart is simply showing images in vertical manner instead of showing proper carousel. Please find my code here

I also tried react-material carousel but for this also I am facing same issue.

Prerak Choksi
  • 3
  • 1
  • 3

1 Answers1

0

I created 'hello word' webpart based on spfx/react and insert the mentioned component, it works well here:

enter image description here

Here is my test demo:

BR

////////////----update---////////////////////

Based on the sample in the doc, I add thumbnail feature like below:

enter image description here

I think it works well, just like what the sample shows. Can you have a try?

Baker_Kong
  • 1,739
  • 1
  • 4
  • 9
  • Hey, thanks for the response. But this doesn't satisfy my requirement. I need carousel along with thumbnails (example: fluentsite.z22.web.core.windows.net/components/carousel/…). I am unable to do it likewise. I am able to find solutions for Carousel without thumbnails but sadly this is not the requirement. When I turn the navigation and all on for thumbnail thing it will work weirdly. I also checked on your code, if we do that it's working likewise. – Prerak Choksi Aug 26 '20 at 18:36
  • I did it like this: ` ({ key: index, 'aria-controls': item.id, 'aria-label': item['aria-label'], content: item.thumbnail, })), }} items={carouselItems} getItemPositionText={(index: number, size: number) => `${index + 1} of ${size}`} />` – Prerak Choksi Aug 26 '20 at 18:44
  • --update-- Hey, it solved the issue, the thing is I was not aware I had to use . Thanks a lot you helped me grow. I read the documentation for Provider[here](https://fluentsite.z22.web.core.windows.net/components/provider/definition) . But didn't found teamTheme as prop. Where did you found teamsTheme and all things? Also what other types of theme solution does this provide? Once again thanks. @Baker_Kong_MSFT Also I tried other npm carousel (react material carousel) packages what should we pass there if using it? There also I faced same issue – Prerak Choksi Aug 27 '20 at 13:46