Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to display organicArrows on mobile view ? #201

Open
007AMAN007 opened this issue Oct 27, 2021 · 2 comments
Open

How to display organicArrows on mobile view ? #201

007AMAN007 opened this issue Oct 27, 2021 · 2 comments

Comments

@007AMAN007
Copy link

I just started using this package today, I want to know how to display organicArrows on mobile view. I am using organicArrows={true}

I know on mobile view by default arrows visibility is hidden, how I can change it's visibility ?

@trolit
Copy link

trolit commented Oct 28, 2021

One way I can think of is adjusting slider styles within scss file.

First, follow steps to configure your own scss file for that slider:
#147 (comment)

Second, find that part:

    @media all and (max-width: 520px) {
      visibility: hidden;
    }

and remove visibility: hidden

voilà:

preview1

bonus:

You will probably want to adjust them to your needs. Just get back to part mentioned above and play with styles like how animation behaves, arrow size. Here's example on how to reduce their size.

@media all and (max-width: 520px) {
      &__arrow-left,  {
        height: 20px !important;
        margin-left: 20px;
      }

      &__arrow-right {
        height: 20px !important;
        margin-right: 20px;
      }
    }

result:
preview2

@007AMAN007
Copy link
Author

Thank You @trolit ; Awesome it's working very fine.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants