Przygotowuję suwak wieloelementowy. Wykorzystałem do tego react-slick. Implementuję Slider i dodaję kod, aby pokazać slider, ale funkcjonalność nie działa. Powinien działać jako suwak marek (obrazów) na pulpicie jest ich 6, następnie suwak powinien przesunąć się o 6 w prawo lub w lewo. Jedyną rzeczą jaką zmieniłem z przykładu jest zamiast w <Slider> umieścić divy wykorzystałem tablice. Mimo wszystko sprawdziłem opcję z <div> i także nie działa.
JS:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from 'react-slick';
import styles from './Brands.module.scss';
import Button from '../../common/Button/Button';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
export default class Brands extends Component {
render() {
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 3,
};
return (
<div className={styles.root}>
<Slider {...settings}>
<div className='container'>
<div className='row'>
<div className={styles.thumbnailNavigationWrapper}>
<Button className={styles.arrow} variant='small'>
<FontAwesomeIcon icon={faAngleLeft}>Left</FontAwesomeIcon>
</Button>
<div className={styles.thumbnailMenu}>
<ul>
<li>
<a href='#' className={styles.activeThumbnail}>
<img src='/images/brands/brands-1.jpg' alt='brand'></img>
</a>
</li>
<li>
<a href='#'>
<img src='/images/brands/brands-2.jpg' alt='brands'></img>
</a>
</li>
<li>
<a href='#'>
<img src='/images/brands/brands-3.jpg' alt='brands'></img>
</a>
</li>
<li>
<a href='#'>
<img src='/images/brands/brands-4.jpg' alt='brands'></img>
</a>
</li>
<li>
<a href='#'>
<img src='/images/brands/brands-5.jpg' alt='brands'></img>
</a>
</li>
<li>
<a href='#'>
<img src='/images/brands/brands-6.jpg' alt='brands'></img>
</a>
</li>
</ul>
</div>
<Button className={styles.arrow} variant='small'>
<FontAwesomeIcon icon={faAngleRight}>Right</FontAwesomeIcon>
</Button>
</div>
</div>
</div>
</Slider>
</div>
);
}
}
Proszę o pomoc.