Code Monkey home page Code Monkey logo

react-img-carousel's Introduction

React Image Carousal Logo

This component renders a carousel with support for lazy loading, autoplay, infinite scrolling, touch events and more.


Usage:

Render a carousel instance passing the necessary props (Note: In order to load the required CSS file with the below syntax, you will need to use some kind of module loader/bundler like Webpack or Browserify):

import React from 'react';
import { render } from 'react-dom';
import Carousel from 'react-img-carousel';

require('react-img-carousel/lib/carousel.css');

render(
  <Carousel viewportWidth="400px" cellPadding={ 5 }>
    <img src='https://placekitten.com/200/300'/>
    <img src='https://placekitten.com/300/300'/>
    <img src='https://placekitten.com/400/300'/>
  </Carousel>,
  document.body
);

Running test page:

Clone the repository, run npm i and then run npm run storybook. The Storybook should open in your browser automatically.

Available props:

initialSlide

PropTypes.number

Determines the first visible slide when the carousel loads, defaults to 0.

width

PropTypes.string

Determines the width of the outermost carousel div. Defaults to 100%.

height

PropTypes.string

Determines the height of the outermost carousel div. Defaults to auto.

viewportWidth

PropTypes.string

Determines the width of the viewport which will show the images. If you don't want the previous/next images to be visible, this width should match the slideWidth prop or the width of the child images. Defaults to 100%.

viewportHeight

PropTypes.string

Determines the height of the viewport which will show the images. Defaults to auto.

className

PropTypes.string

Optional class which will be added to the carousel class.

dots

PropTypes.bool

If false, the dots below the carousel will not be rendered.

arrows

PropTypes.bool

If false, the arrow buttons will not be rendered.

infinite

PropTypes.bool

If true, clicking next/previous when at the end/beginning of the slideshow will wrap around.

lazyLoad

PropTypes.bool

If false, the carousel will render all children at mount time and will not attempt to lazy load images. Note that lazy loading will only work if the slides are img tags or if both slideWidth and slideHeight are specified.

imagesToPrefetch

PropTypes.number

If lazyLoad is set to true, this value will be used to determine how many images to fetch at mount time. If the slides are not simple img elements, this prop will have no effect. Defaults to 5.

maxRenderedSlides

PropTypes.number

If lazyLoad is set to true, this value will be used to determine how many slides to fully render (including the currently selected slide). For example, if the currently selected slide is slide 10, and this prop is set to 5, then slides 8-12 will be rendered, and all other slides will render a lightweight placeholder. Note that this prop is ignored for slides that are simply img tags - these carousels should use the imagesToPrefetch prop instead. Defaults to 5.

cellPadding

PropTypes.number

Number of pixels to render between slides.

slideWidth

PropTypes.string

Used to specify a fixed width for all slides. Without specifying this, slides will simply be the width of their content.

slideHeight

PropTypes.string

Used to specify a fixed height for all slides. Without specifying this, slides will simply be the height of their content.

slideAlignment

PropTypes.oneOf(['left', 'center', 'right'])

Used to set the alignment of the currently selected slide in the carousel's viewport. Defaults to center.

beforeChange

PropTypes.func

Optional callback which will be invoked before a slide change occurs. Should have method signature function(newIndex, prevIndex, direction)

afterChange

PropTypes.func

Optional callback which will be invoked after a slide change occurs. Should have method signature function(newIndex)

style

PropTypes.shape({
  container: PropTypes.object,
  containerInner: PropTypes.object,
  viewport: PropTypes.object,
  track: PropTypes.object,
  slide: PropTypes.object,
  selectedSlide: PropTypes.object
})

If your app is using inline styles, you can use this property to specify inline styling for the individual carousel elements. The properties correspond to the DOM elements with class names carousel, carousel-container-inner, carousel-viewport, carousel-track, carousel-slide, and carousel-slide-selected respectively. If both slide and selectedSlide are specified, both will be applied with the latter overriding the former.

Example:

<Carousel
  ...
  style={{
    slide: {
      opacity: 0.2
    },
    selectedSlide: {
      opacity: 1
    }
  }}
>
...
</Carousel>

transition

PropTypes.oneOf(['fade', 'slide'])

The type of transition to use between slides, defaults to slide.

transitionDuration

PropTypes.oneOfType([PropTypes.number, PropTypes.string])

Time for the transition effect between slides, defaults to 500. If a number is specified, it indicates the number of milliseconds. Strings are parsed using ms.

easing

PropTypes.oneOf(['ease', 'linear', 'ease-in', 'ease-out', 'ease-in-out'])

The easing function to use for the transition. Defaults to ease-in-out.

clickToNavigate

PropTypes.bool

Controls whether or not clicking slides other than the currently selected one should navigate to the clicked slide. Defaults to true.

autoplay

PropTypes.bool

If true, the slideshow will automatically advance.

autoplaySpeed

PropTypes.oneOfType([PropTypes.number, PropTypes.string])

Time to wait before advancing to the next slide when autoplay is true. Defaults to 4000. If a number is specified, it indicates the number of milliseconds. Strings are parsed using ms.

draggable

PropTypes.bool

Controls whether mouse/touch swiping is enabled, defaults to true.

dir

PropTypes.oneOf(['rtl', 'ltr'])

Optional, used to specify the direction of the carousel. Must pass rtl to support RTL languages, and a parent DOM element must have the dir attribute set to rtl as well.

pauseOnHover

PropTypes.bool

Controls whether autoplay will pause when the user hovers the mouse cursor over the image, defaults to true.

controls

PropTypes.arrayOf(PropTypes.shape({
  component: PropTypes.func.isRequired,
  props: PropTypes.object,
  position: PropTypes.oneOf(['top', 'bottom'])
}))

Optional array of controls to be rendered in the carousel container. Each control's component property should be a React component constructor, and will be passed callback props nextSlide, prevSlide and goToSlide for controlling navigation, and numSlides, selectedIndex and infinite for rendering the state of the carousel.

isVertical

PropTypes.bool

Defaults to false. Setting isVertical to true will render vertical carousal.

Tests:

npm install && npm test

react-img-carousel's People

Contributors

chinrichs-godaddy avatar chrishinrichs avatar dependabot[bot] avatar eddiemcleanlux avatar johnsanthosh avatar jsanthosh-godaddy avatar kkstrk avatar mpaulucci avatar mpaulucci-godaddy avatar msluther avatar rivajunior avatar rxmarbles avatar shaun2d2 avatar trhinehart-godaddy avatar txu-godaddy avatar zediah avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-img-carousel's Issues

Update component for post IE11

Ideally this component should be much smaller once we get rid of ES2015 code to do this we need to update our babel to only output ES2016 and up. We can do this by adding browserslist and add our opensourced config

Lazy Loading Slides To Render Prop

There should be a way of specifying the number of slides to render when using lazy loading regardless of whether images are used or not. Currently only imagesToPrefetch is supported, but it only applies to slides that contain simple img tags and does not apply to other slide content.

Upgrade to babel@7

This package is still using an older version of babel, it should be upgraded to latest.

CI needs setup

This repo should have a CI system setup with either TravisCI / CircleCI / etc. This will help ensure that tests don't fail on new changes.

Related to #28

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on Greenkeeper branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please click the 'fix repo' button on account.greenkeeper.io.

Fix jsx-a11y eslint issues

ESLint rules were updated to latest, which includes new rules for jsx-a11y to address accessibility. Some rules were ignored to get the build passing. These rules should be un-ignored and all issues should be fixed.

The value of imagesToPrefetch doesn't seem valid

Hi, I have a lazyload implementation in my project. It is a swiper that users can swipe left or right to view an image. I found an issue when I set my parameter as follow:

const sliderParams = {
      dots: true,
      infinite: true,
      lazyLoad: true,
      imagesToPrefetch: 1,
    };

Even though the lazyload effect works perfectly, the imagesToPrefetch doesn't work while my application loads 5 images in the first place.

I was testing on MacBook Pro. Let me know what else details I can provide to tackle the issue.

Best regard.

Package name in usage is inconsistent

Installed react-img-carousel
Tried to import it into my project following the usage:

import React from 'react';
import { render } from 'react-dom';
import Carousel from 'react-carousel';

require('react-carousel/lib/carousel.css');

render(
  <Carousel viewportWidth="400px" cellPadding={ 5 }>
    <img src='https://placekitten.com/200/300'/>
    <img src='https://placekitten.com/300/300'/>
    <img src='https://placekitten.com/400/300'/>
  </Carousel>,
  document.body
);

Failed to import because the package name is react-img-carousel, not react-carousel
Changed to correct package name and worked fine.

Is there any reason for this name inconsistency? It's present both on the readme and on the npm package page.

Add React Storybook support

As a developer, having a more robust example project to dev against will help implement additional features / debug issue. I suggest we add in React storybook support to this project as it is super easy to fire up to allow devs to toy around with the component, we can also add it to the Github pages to this repository if useful.

UNSAFE_componentWillReceiveProps

index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://fb.me/react-unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state

Please update the following components: Carousel

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.