If you keep the mouse over the arrow, when you interact with the slider to roll, the slider don't scroll

[thlindustries]

Hello, I got an unexpected behavior when I was testing my page, I've noticed that if you keep the mouse over the arrow when you click to roll the slider the slider don't scroll. I've read the documentation and I couldn't find any topics about it, i'm glad if you guys could check this up!

My code and styling: Component

import React from 'react';
import { FiChevronRight } from 'react-icons/fi';
import { Link } from 'react-router-dom';
import AwesomeSlider from 'react-awesome-slider';

import CategoryInterface from 'models/Category';

import MovieContainer from 'components/Mols/MovieContainer';
import ShimmerCategoryContainer from 'components/Mols/Shimmer/CategoryContainer';

import { Container, CategoryTitle, CarouselWrapper } from './styles';

interface CategoryContainerProps {
  categories: Array<CategoryInterface>;
  isLoading: boolean;
}

const CategoryContainer: React.FC<CategoryContainerProps> = (
  { categories, isLoading },
) => {
  if (!isLoading) {
    return (
      <>
        {categories.map((category, index) => (
          <Container key={category.id} position={index}>
            <CategoryTitle>
              <h3>{category.title}</h3>
              <p>{`(${category.movies.length})`}</p>
              <Link to={`/movies/${category.id}/${category.title}`}>
                <h4>VER TODOS</h4>
                <FiChevronRight size={20} />
              </Link>
            </CategoryTitle>
            <CarouselWrapper className={category.title}>
              <AwesomeSlider
                animation="foldOutAnimation"
                className="slider-container"
                // organicArrows={false}
                bullets={false}
                transitionDelay={10}
              >
                <div>
                  <MovieContainer
                    movieViewType={category.type}
                    movies={category.movies}
                    isLoading={isLoading}
                  />
                </div>
              </AwesomeSlider>
            </CarouselWrapper>
          </Container>
        ))}
      </>
    );
  }
  return (
    <>
      <ShimmerCategoryContainer />
      <ShimmerCategoryContainer />
      <ShimmerCategoryContainer />
    </>
  );
};

export default CategoryContainer;

Styling

import styled, { css } from 'styled-components';

interface ContainerStyle {
  position?: number;
}

export const Container = styled.div<ContainerStyle>`
  display: flex;
  flex-direction: column;
  width: 100%;

  ${(props) => (props.position === 0 ? css`margin-top: 60px;` : css`margin-top: 20px;`)}

`;

export const CategoryTitle = styled.div`
  display: flex;
  align-items: center;

  color: #E9EAED;
  width: 100%;
  padding: 0 4%;

  font-family: 'Roboto Regular', sans-serif;

  margin-bottom: -60px;
  p{
    font-size: 20px;
    margin-right: 12px;
  }

  h3{
    margin-right: 12px;
  }

  a{
    text-decoration: none;

    display: flex;
    justify-content: center;
    margin-left: auto;
    margin-right: 12px;

    color: rgb(254,212,74,1);
  }

  h4{
    z-index: 3;
    align-items: center;
    font-weight: lighter;
    font-size: 14px;

    &:hover{
      text-shadow: 0 0 10px rgb(254,212,74,0.4);
      cursor: pointer;
    }
  }

  button{
    margin-left: 12px;
    z-index: 3;
  }

  .category-title{
    width: 100px;
    height: 12px;
  }
`;

export const CarouselWrapper = styled.div`
  display: flex;
  border-radius: 12px;

  width: 100vw;
  height: 340px ;

  .awssld__content{
    background: transparent;

    border-radius: 12px;
  }
  .awssld__content:first-child > div{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 92%;

  }

  .awssld__controls__arrow-right::before,
  .awssld__controls__arrow-right::after,
  .awssld__controls__arrow-left::before,
  .awssld__controls__arrow-left::after{
    background: #fff;
    opacity: 0;

    transition: opacity 0.4s;
  }
`;

Here is a gif to show the problem: Gif to long, here is the link :D!

[NishantJawla]

Hey! @thlindustries can I work on this issue

[thlindustries]

Hey! @thlindustries can I work on this issue

No worries, I solved this problem by changing the carousel lib haha. Btw thank you for willing to help!