2 | 
3 |
6 | This component renders a carousel with support for lazy loading, autoplay, infinite scrolling, touch events and more. 7 |
8 | 9 | --- 10 | 11 | Usage: 12 | ---------------- 13 | 14 | Render a carousel instance passing the necessary props (Note: In order to load the required CSS file with the below syntax, 15 | you will need to use some kind of module loader/bundler like Webpack or Browserify): 16 | 17 | ```js 18 | import React from 'react'; 19 | import { render } from 'react-dom'; 20 | import Carousel from 'react-img-carousel'; 21 | 22 | require('react-img-carousel/lib/carousel.css'); 23 | 24 | render( 25 |
53 |
58 | );
59 | };
60 |
61 | CustomDots.propTypes = {
62 | numSlides: PropTypes.number.isRequired,
63 | selectedIndex: PropTypes.number,
64 | goToSlide: PropTypes.func.isRequired,
65 | title: PropTypes.node
66 | };
67 |
68 | const testButtons = ['test1', 'test2', 'test3', 'test4'].map((item) => );
69 |
70 | export const verticalInfiniteWithCellPaddingWithDotsAndDefaultArrows = () =>
71 | { title }
54 |-
55 | { dots }
56 |
282 |
283 | { imgElements }
284 |
285 |
;
286 |
--------------------------------------------------------------------------------
/test/unit/carousel.tests.js:
--------------------------------------------------------------------------------
1 | /* eslint max-statements: 0, jsx-a11y/alt-text: 0 */
2 | import React from 'react';
3 | import { mount } from 'enzyme';
4 | import chai, { expect } from 'chai';
5 | import sinon from 'sinon';
6 | import sinonChai from 'sinon-chai';
7 | import Carousel from '../../src/index';
8 | import CustomArrows from '../../src/stories/CustomArrows';
9 | import UpArrow from '../images/test-up-arrow.svg';
10 | import DownArrow from '../images/test-down-arrow.svg';
11 |
12 | chai.use(sinonChai);
13 | let imagesFetched;
14 |
15 | global.Image = class MyImage {
16 | set src(val) {
17 | imagesFetched.push(val);
18 | this.onload && this.onload();
19 | }
20 | };
21 |
22 | describe('Carousel', () => {
23 | let tree;
24 | function renderToJsdom(component) {
25 | tree = mount(component);
26 | return tree.instance();
27 | }
28 |
29 | beforeEach(() => {
30 | imagesFetched = [];
31 | });
32 |
33 | afterEach(() => {
34 | tree && tree.unmount();
35 | tree = null;
36 | });
37 |
38 | it('should render a carousel with the specified index selected', done => {
39 | renderToJsdom(
40 |
502 | { slidingCarousel = el; } }>
504 |
505 |
506 |
507 |
508 |
510 |
511 |
512 |
513 |
514 |
515 | );
516 |
517 | setImmediate(() => {
518 | slidingCarousel.goToSlide(1);
519 | tree.update();
520 | const track = tree.find('.sliding-carousel .carousel-track');
521 | expect(track.prop('style').transition).to.equal('transform 300ms ease-out');
522 |
523 | const slide = tree.find('.fading-carousel .carousel-slide').at(0);
524 | expect(slide.prop('style').transition).to.equal('opacity 700ms linear');
525 | done();
526 | });
527 | });
528 |
529 | it('should support passing none for the transition type', done => {
530 | let noneCarousel;
531 |
532 | tree = mount(
533 | { this._containerRef = c; } }>
468 |
517 | );
518 | }
519 |
520 | /**
521 | * Renders the slides within the carousel viewport.
522 | *
523 | * @returns {Array} Array of slide components to be rendered.
524 | */
525 | renderSlides() {
526 | const { children, infinite, cellPadding, slideWidth, slideHeight, transition, transitionDuration,
527 | style, easing, lazyLoad, isVertical } = this.props;
528 | const { slideDimensions, currentSlide, loadedImages } = this.state;
529 | this._allImagesLoaded = true;
530 | let childrenToRender = Children.map(children, (child, index) => {
531 | const key = `slide-${index}`;
532 | const imgSrc = child.props.src;
533 | const slideClasses = classnames(
534 | 'carousel-slide',
535 | {
536 | [SELECTED_CLASS]: index === currentSlide,
537 | 'carousel-slide-fade': transition === 'fade' || transition === 'none' // Absolute positioning for fade/none transition
538 | }
539 | );
540 | let slideStyle = {
541 | ...!isVertical && { marginLeft: `${cellPadding}px` },
542 | ...isVertical && { marginTop: `${cellPadding}px` },
543 | height: slideHeight,
544 | width: slideWidth
545 | };
546 |
547 | if (transition === 'fade') {
548 | slideStyle.transition = `opacity ${ms('' + transitionDuration)}ms ${easing}`;
549 | } else if (transition === 'none') {
550 | slideStyle.transition = 'none';
551 | }
552 |
553 | if (slideHeight) {
554 | slideStyle.overflowY = 'hidden';
555 | slideStyle.minHeight = slideHeight; // Safari 9 bug
556 | }
557 |
558 | if (slideWidth) {
559 | slideStyle.overflowX = 'hidden';
560 | slideStyle.minWidth = slideWidth; // Safari 9 bug
561 | }
562 |
563 | slideStyle = { ...slideStyle, ...(style.slide || {}), ...(index === currentSlide ? style.selectedSlide || {} : {}) };
564 |
565 | const loadingSlideStyle = { ...(slideStyle || {}),
566 | marginLeft: slideStyle.marginLeft,
567 | width: slideWidth || slideDimensions.width,
568 | height: slideHeight || slideDimensions.height
569 | };
570 | const slidesToRender = this.getIndicesToRender();
571 |
572 | // Only render the actual slide content if lazy loading is disabled, the image is already loaded, or we
573 | // are within the configured proximity to the selected slide index.
574 | if (!lazyLoad || (imgSrc ? !!loadedImages[imgSrc] : slidesToRender.indexOf(index) > -1)) {
575 | // If the slide contains an image, set explicit width/height
576 | if (imgSrc && loadedImages[imgSrc]) {
577 | const { width, height } = loadedImages[imgSrc];
578 | slideStyle.height = slideStyle.height || height;
579 | slideStyle.width = slideStyle.width || width;
580 | }
581 |
582 | return (
583 |
469 | {
470 | controls.filter(Control => {
471 | return Control.position === 'top';
472 | }).map((Control, index) => (
473 |
516 | { this._viewport = v; } } style={ viewportStyle }>
485 |
499 | {
500 | controls.filter(Control => {
501 | return Control.position !== 'top';
502 | }).map((Control, index) => (
503 | - { this._track = t; } }
489 | onTransitionEnd={ this.slideTransitionEnd }
490 | onMouseDown={ this.onMouseDown }
491 | onMouseLeave={ this.onMouseLeave }
492 | onMouseOver={ this.onMouseOver }
493 | onMouseEnter={ this.onMouseEnter }
494 | onTouchStart={ this.onTouchStart }
495 | >
496 | { this.renderSlides() }
497 |