Различные параметры настройки слайдера на основе устройства Reactjs

Question

Ситуация

У меня есть гладкий слайдер, который показывает 4 слайда, однако я заметил на сайте, что он показывает 4 слайда на компьютере, а на мобильном устройстве показывает 1, а 4 слишком велики для мобильного экрана. С этой целью я скачал пакет React DeviceDetect.

Ниже приведен код, который работает с моим ползунком

 export default class ExchangeSlider extends Component {
  
  render() {
    const settings 
    = 
    {     
       
      dots: true,
      infinite: true,
      speed: 700,
      arrows: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true, 
    };
     
    //  justifyContent:'center', alignItems:'center',
    return (
      <div className="container" style={{justifyContent:'center', alignItems:'center' }}> 
        <Slider {...settings} >

Теперь я ожидал сказать что-то вроде `

 render() {
    const settings 
    if(isMobile){

  
      settings 
    = 
    {     
       
      dots: true,
      infinite: true,
      speed: 700,
      arrows: true,
      slidesToShow: 4,
      slidesToScroll: 1,
      autoplay: true, 
    }
  }else
     {
        settings 
      = 
      {     
         
        dots: true,
        infinite: true,
        speed: 700,
        arrows: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true, 
      };
    }
     }

`

или

const settings 
= 
{     
  if(isMobile)
  {
    slidesToShow: 4,
  }
  else {
    slidesToShow: 1,
  }

Но пока ничего не работает, хотел бы знать, где я могу проверить состояние мобильного устройства или браузера.

С уважением

Различные параметры настройки слайдера на основе устройства Reactjs

Ответы (0)