not working correctly when the dir='rtl' for the page

[shboul1]

when I set the dir for the page to 'rtl' strange behavior starts happening

example : https://codesandbox.io/s/naughty-alex-w47x88?file=/public/index.html

[amgadawp]

@shboul1 did you manage to find a workaround !

[shboul1]

Nope :/

[ZeeshanJafar6356]

did you find a solution for this?

[shboul1]

Yes!

import Marquee from 'react-fast-marquee';
import Image from 'next/image';
export default function MarqueeComponent({ lang }: { lang: string }) {
  return (
    <Marquee
      speed={100}
      gradient
      autoFill
      gradientWidth={100}
      style={{
        direction: lang === 'ar' ? 'ltr' : null,
      }}
    >
      {['1', '2', '3', '4', '5', '6', '7'].map((image) => (
        <Image
          key={image}
          className="mx-[60px] w-24 md:w-40"
          src={`/images/partners/${image}.png`}
          alt="ABB"
          width={200}
          height={200}
        />
      ))}
    </Marquee>
  );
}

.marquee .child {
  display: flex;
  align-items: center;
  justify-content: center;
}

[ZeeshanJafar6356]

@shboul1 its still not working: here is my code: import React, { useState, useEffect } from 'react'; import FastMarquee from 'react-fast-marquee'; import "./MyMarqueeComponent.css" const Slider = () => { const [isPaused, setIsPaused] = useState(false); const [isMobile, setIsMobile] = useState(false);

useEffect(() => { // Check if viewport width is less than 600px (you can adjust this threshold) const handleResize = () => { setIsMobile(window.innerWidth < 600); };

handleResize(); // Initial check
window.addEventListener('resize', handleResize);

return () => {
  window.removeEventListener('resize', handleResize);
};

}, []);

const handleMouseEnter = () => { setIsPaused(true); };

const handleMouseLeave = () => { setIsPaused(false); };

return (

    <div>
      Hurray! You are in the right place *
      <span style={{ color: '#f3589e', fontWeight: 'bold' }}> 100K+ social media followers </span> *
      We value every customer *
      <span style={{ color: '#f3589e', fontWeight: 'bold' }}> 100% customer satisfaction </span> *
      We guarantee your entry *
      <span style={{ color: '#f3589e', fontWeight: 'bold' }}> SSL certificate website </span> *
      Secured payout *
      <span style={{ color: '#f3589e', fontWeight: 'bold' }}> 24/7 Customer Support </span> *
      If you are not 100% satisfied, we will refund you 100%
    </div>
  </FastMarquee>
</div>

); };

export default Slider;

[shboul1]

Can you put it in a codepen or a live editor ?

[ZeeshanJafar6356]

@shboul1 on iphone devices its creating this glitch issue when start again i dont know much about codepen can you please solve it for me thanks i have to show this today to the client

[ZeeshanJafar6356]

@shboul1 brother?