Styling

Almost every element in `react-elastic-carousel` has a css class with the `rec-` prefix (rec is short React Elastic Carousel).

/* square buttons */
.rec.rec-arrow {
    border-radius: 0;
}
/* round buttons on hover */
.rec.rec-arrow:hover {
    border-radius: 50%;
}
/* hide disabled buttons */
.rec.rec-arrow:disabled {
    visibility: hidden;
}
/* disable default outline on focused items */
/* add custom outline on focused items */
.rec-carousel-item:focus {
    outline: none;
    box-shadow: inset 0 0 1px 1px lightgrey;
}

<div className="styling-example">
  <Carousel itemsToShow={2}>
    <Item>1</Item>
    <Item>2</Item>
    <Item>3</Item>
    <Item>4</Item>
    <Item>5</Item>
    <Item>6</Item>
  </Carousel>
</div>

<div className="styling-example">
  <Carousel itemsToShow={2}>
    <Item>1</Item>
    <Item>2</Item>
    <Item>3</Item>
    <Item>4</Item>
    <Item>5</Item>
    <Item>6</Item>
  </Carousel>
</div>