CODEWITHSUNDEEP
reactjsnext.js
vimuth
vimuth

Reputation: 5612

Unable to use 'react-animated-slider' with next js

I'm trying to use react-animated-slider. This is my code.

Page,

import React from 'react'
import customCss from '../styles/custom_slider.css'
import Slider from 'react-animated-slider';

const page = () => {

    const content = [
        {
            title: 'Vulputate Mollis Ultricies',
            description:
                'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.',
            button: 'Read More',
            image: 'https://i.imgur.com/ZXBtVw7.jpg',
            user: 'Daniel',
            userProfile: 'https://s7.postimg.cc/abavelo3v/1_3x.png',
        },
        {
            title: 'Tortor Dapibus',
            description:
                'Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.',
            button: 'Discover',
            image: 'https://i.imgur.com/DCdBXcq.jpg',
            user: 'Samantha',
            userProfile: 'https://s7.postimg.cc/ujy8zz7vv/5_3x.png',
        },
        {
            title: 'Phasellus volutpat metus',
            description:
                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
            button: 'Buy now',
            image: 'https://i.imgur.com/DvmN8Hx.jpg',
            user: 'Michael',
            userProfile: 'https://s7.postimg.cc/6exjimijv/3_3x.png',
        }
    ];

    return (
        <div>
            <h2>Custom style and animations</h2>
            <Slider classNames={customCss}>
                {content.map((item, index) => (
                    <div
                        key={index}
                        className={customCss.sliderContent}
                        style={{ background: `url('${item.image}') no-repeat center center` }}
                    >
                        <div className={customCss.inner}>
                            <h1>{item.title}</h1>
                            <p>{item.description}</p>
                            <button>{item.button}</button>
                        </div>
                        <section>
                            <img src={item.userProfile} alt={item.user} />
                            <span>
                                Posted by <strong>{item.user}</strong>
                            </span>
                        </section>
                    </div>
                ))}
            </Slider>
        </div>
    );
}

export default page;

And this is css,

.slider {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;

    & a {
        &.previousButton, &.nextButton {
            font-size: 22px;
            line-height: 0;
            display: block;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: all .3s linear;
            z-index: 1;
            padding: 10px;
            text-decoration: none;
            backface-visibility: hidden; /* prevent jump effect when scaling */

            &:not(.disabled):hover {
                transform: translateY(-50%) scale(1.25);
                cursor: pointer;
            }

            & svg {
                & polygon {
                    fill: #ffd800;
                }
            }
        }

        &.previousButton {
            left: 20px;
        }

        &.nextButton {
            right: 20px;
        }
    }
}

.sliderContent {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    text-align: center;
    background-size: cover !important;
    
    &:before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
        bottom: 0;
        left: 0;
    }

    &.hidden {
        visibility: hidden;
    }

    &.previous {
        left: -100%;
    }

    &.current {
        left: 0;
    }

    &.next {
        left: 100%;
    }

    &.animateIn,
    &.animateOut {
        transition: all 2s ease;
    }

    &.animateIn {
        &.previous,
        &.next {
            left: 0;
            visibility: visible;

            & p {
                transition-delay: 1.1s;
            }

            & button {
                transition-delay: 1.3s;
            }
            
            & section img {
                transition-delay: 1.3s;
            }

            & section span {
                transition-delay: 1.4s;
            }

            & section span strong {
                transition-delay: 1.5s;
            }
        }
    }

    &.animateOut {
        &.previous {
            left: 100%;
        }

        &.next {
            left: -100%;
        }

        & h1 {
            transition-delay: .3s;
        }

        & p {
            transition-delay: .2s;
        }

        & section span {
            transition-delay: .1s;
        }

        & section span strong {
            transition-delay: 0s;
        }
    }

    &.current,
    &.animateIn {
        & h1, 
        & button,
        & p,
        & section * {
            transform: translateX(0);
            transition-delay: .9s;
            opacity: 1;
        }
    }

    & .inner {
        padding: 0 70px;
        box-sizing: border-box;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    & h1 {
        font-weight: 900;
        margin: 0 auto;
        max-width: 840px;
        color: #FFFFFF;
        font-size: 64px;
        line-height: 1;
        transition: all .3s ease;
        transform: translateY(-20px);
        opacity: 0;
    }

    & p {
        color: #FFFFFF;
        font-size: 14px;
        line-height: 1.5;
        margin: 20px auto 30px;
        max-width: 640px;
        transition: all .3s ease;
        transform: translateY(20px);
        opacity: 0;
    }

    & button {
        transition: all .3s ease;
        transform: translateY(20px);
        opacity: 0;
    }

    & section {
        position: absolute;
        bottom: 20px;
        left: 20px;

        & * {
            transition: all .3s ease;
        }

        & span {
            color: rgba(255, 255, 255, 0.5);
            font-size: 12px;
            display: inline-block;
            text-align: left;
            line-height: 1.4;
            vertical-align: middle;
            margin-left: 10px;
            transform: translateX(-10px);
            opacity: 0;

            & strong {
                color: #FFFFFF;
                font-size: 14px;
                display: block;
                transform: translateY(10px);
                opacity: 0;
            }
        }

        & img {
            width: 40px;
            height: 40px;
            border: solid 2px rgba(255, 255, 255, 0.5);
            border-radius: 100%;
            vertical-align: middle;
            transition: all .5s ease;
            transform: translateX(-20px);
            opacity: 0;
        }
    }
}

But I'm getting error,

./styles/custom_slider.css Global CSS cannot be imported from files other than your Custom . Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules). Read more: https://nextjs.org/docs/messages/css-global Location: pages\page.js

Is there an easy way to do it?

Upvotes: 1

Views: 604

Answers (1)

vimuth
vimuth

Reputation: 5612

Finally, I found an answer. I'm keeping it in case anyone will need it in the future. First we need to create a module. Created it inside 'components/CSlider.module.css' direcory. And created a component to call CSS inside and called it inside Page.

My component (components/CSlider.js)

import React from 'react'
import customCss from './CSlider.module.css';
import Slider from 'react-animated-slider';


const CSlider = () => {
  const content = [
    {
      title: 'Vulputate Mollis Ultricies',
      description:
        'Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.',
      button: 'Read More',
      image: 'https://i.imgur.com/ZXBtVw7.jpg',
      user: 'Daniel',
      userProfile: 'https://s7.postimg.cc/abavelo3v/1_3x.png',
    },
    {
      title: 'Tortor Dapibus',
      description:
        'Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.',
      button: 'Discover',
      image: 'https://i.imgur.com/DCdBXcq.jpg',
      user: 'Samantha',
      userProfile: 'https://s7.postimg.cc/ujy8zz7vv/5_3x.png',
    },
    {
      title: 'Phasellus volutpat metus',
      description:
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam.',
      button: 'Buy now',
      image: 'https://i.imgur.com/DvmN8Hx.jpg',
      user: 'Michael',
      userProfile: 'https://s7.postimg.cc/6exjimijv/3_3x.png',
    }
  ];

  return (
    <div>
      <h2>Custom style and animations</h2>
      <Slider classNames={customCss}>
        {content.map((item, index) => (
          <div
            key={index}
            className={customCss.sliderContent}
            style={{ background: `url('${item.image}') no-repeat center center` }}
          >
            <div className={customCss.inner}>
              <h1>{item.title}</h1>
              <p>{item.description}</p>
              <button>{item.button}</button>
            </div>
            <section>
              <img src={item.userProfile} alt={item.user} />
              <span>
                Posted by <strong>{item.user}</strong>
              </span>
            </section>
          </div>
        ))}
      </Slider>
    </div>
  );
};

export default CSlider;

And called the component inside page

import CSlider from '../components/CSlider';
......
<CSlider />

Apart from that I found out documentation .css page includes SCSS. So I needed this online converter to convert it to css.

Upvotes: 1

Related Questions