올빼미 캐로 셀을 반응하는 js에서 반응 적으로 만드는 방법?

Question

반응 올빼미 회전 목마 패키지를 사용하고 있습니다.

https://www.npmjs.com/package/react-owl-carousel

(나는 반응하는 새로운 오전,주의해야 할)의 지시에 따라 나는 성공적으로 코드를 구현하고 회전 목마가 원활하게 실행됩니다.

문제점 : 현재 4 개의 항목을 동시에 표시하고 있습니다. 그리고 모든 화면에서이 4 가지 항목이 나타납니다. 4 대신 3 개의 항목을 768px에서 1200px까지, 2 가지 항목을 500px에서 767px까지, 1 항목을 499px 미만으로 표시하려고합니다.

"반응 형"을 포함하는 옵션은 올빼미 회전식 문서에 있습니다. 그러나 나는 그것을 달성하기 위해 그것을 포함시키는 방법을 궁금해합니다.

여기까지 제가 한 것입니다.

import React, { Component } from 'react'; 
import {Grid, Row, Col , ProgressBar } from 'react-bootstrap'; 
import UserAvtar from '../common/UserAvtar.js'; 
import SectionHeaderOfCards from '../common/SectionHeaderOfCards.js'; 
import OwlCarousel from 'react-owl-carousel'; 

const options = { 
    items: 4, 
}; 

class DashboardPage extends Component { 
    render() { 
    return (
     <div> 
      <section className="has-small__padding has-grey__bg"> 
       <UserAvtar /> 
      </section> 
      <section className="has-small__padding"> 
       <Grid> 
        <SectionHeaderOfCards title="Recommended Matches" /> 
        <OwlCarousel margin={10} > 
         <div class="item"><h4>1</h4></div> 
         <div class="item"><h4>2</h4></div> 
         <div class="item"><h4>3</h4></div> 
         <div class="item"><h4>4</h4></div> 
         <div class="item"><h4>5</h4></div> 
         <div class="item"><h4>6</h4></div> 
        </OwlCarousel> 
       </Grid> 
      </section> 
     </div> 
    ); 
    } 
} 

export default DashboardPage; 

Answer 1

OwlCarousel 옵션 responsive을 사용해야합니다.

owlcarousel2 API 옵션에 대한 공식 문서를 here으로 확인하십시오.

예를 들어 상품 상태에 대해 다음 옵션을 사용하십시오.

 options:{ 
       loop: true, 
       margin:10, 
       nav:true, 
       responsive:{ 
        0:{ 
         items:1 
        }, 
        600:{ 
         items:3 
        }, 
        1000:{ 
         items:5 
        } 
       } 
      }, 

데모 예제를 here으로 확인하십시오.

희망이 도움이 될 것입니다.