Слайдер React-Slick отображает больше слайдов, чем указано в свойстве SlidesToShow. ⇐ CSS

[Anonymous]

Я использую React-Slick для создания карусели встроенных видео YouTube. Там я указал значение «slidesToShow» равным 3.
Но отображается более 3 слайдов, а также слайды не выровнены по центру.
Вот экран: снимок карусели:
Изображение
Вот код страницы:

Код: Выделить всё

import React from "react";
import Slider from "react-slick";
import VideoEmbed from "../video-embed/VideoEmbed";
import VideoData from "../../media/VideoData";
import "./MusicVideos.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const MusicVideos = () => {
const settings = {
className: "center",
centerMode: true,
dots: false,
infinite: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
initialSlide: 0,
arrows : true,
responsive: [
{
breakpoint: 1000,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
centerMode : false
}
},
{
breakpoint: 770,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
centerMode : false
}
}
]
};

return (


Music Videos


{VideoData.map(videoId => (



))}



);
};

export default MusicVideos;

Это мой код VideoEmbed:

Код: Выделить всё

import React from "react";
import PropTypes from "prop-types";

const VideoEmbed = ({embedId}) => {

return (



);
};

VideoEmbed.prototype = {
embedId: PropTypes.string.isRequired
};

export default VideoEmbed;

Это CSS-стиль, который я использую для класса Slider:

Код: Выделить всё

.slick-track {
padding: 3rem 0;
}

.slick-center, .slick-current {
transform: scale(1.2);
z-index: 10000;
transition: all 500ms ease-in-out;
pointer-events: all;
}

.slick-list {
pointer-events: none;
}

Какова возможная причина этого?
Или есть ли какое-либо свойство CSS в классе Slider для этого?
У меня есть попробовал изменить некоторые стили CSS, но не смог добиться оптимального результата.

Подробнее здесь: https://stackoverflow.com/questions/783 ... show-prope