CODEWITHSUNDEEP
javascriptcssreactjsionic-frameworkreact-responsive-carousel
vishnu vinod
vishnu vinod

Reputation: 45

How to move Carousel both vertically and horizontally(nested) with react-responsive-carousel

I am working in Ionic react . I have added react-responsive-carousel for swiping the content, I need to scroll the carousel both vertically and horizontally according to the condition .How can I solve the issue? please help

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

Upvotes: 1

Views: 1668

Answers (2)

Hamidreza Soltani
Hamidreza Soltani

Reputation: 624

It's fixable by setting these two props:

preventMovementUntilSwipeScrollTolerance={true}
swipeScrollTolerance={20}

preventMovementUntilSwipeScrollTolerance: Don't let the carousel scroll until the user swipe to the value specified on swipeScrollTolerance.

swipeScrollTolerance: How many pixels it's needed to change the slide when swiping, defaults to 5.

Upvotes: 0

Ankit Sanghvi
Ankit Sanghvi

Reputation: 527

According to the docs, you can pass scroll direction as a parameter to the Carousel as 'horizontal' or 'vertical'

Store the 2 options for scroll direction as a variable and depending on a condition, set the scroll direction.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

const SCROLL_DIRECTION = {
   H = "horizontal",
   V = "vertical"
}

class DemoCarousel extends Component {  
    constructor() {
    super()
    this.state = {
      scrollDirection: SCROLL_DIRECTION.H // or SCROLL_DIRECTION.V
    }
   }
    render() {
        return (
            <Carousel
              direction = {this.state.scrollDirection} 
            >
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

Upvotes: 1

Related Questions