React-slick Как слайдер растянуть?

Question

Хочу растянуть слайдер по ширине браузера. Чтобы касался правой и левой стороны. Как это сделать? Размер экрана 2560x1440.

import React, { Component } from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css"; 
import "slick-carousel/slick/slick-theme.css";
import "./watching.css";
import posterIcon1 from '../Assets/Posters/1.jpg';
import posterIcon2 from '../Assets/Posters/2.jpg';
import posterIcon3 from '../Assets/Posters/3.jpg';
import posterIcon4 from '../Assets/Posters/4.jpg';
import posterIcon5 from '../Assets/Posters/5.jpg';
import posterIcon6 from '../Assets/Posters/6.jpg';


function NextArrow(props) {
    const { className, style, onClick } = props;
    return (
        <div
        className={className}
        style={{ ...style, display: "block", zIndex: "1"}} 
        onClick={onClick}
        >
        </div>
    )
}

function PrevArrow(props) {
    const { className, style, onClick } = props;
    return (
        <div
        className={className}
        style={{ ...style, display: "block", zIndex: "1"}} 
        onClick={onClick}
        >
        </div>
    )
}

export default class CenterMode extends Component {
    render() {
      const settings = {
        adaptiveHeight: true,
        className: "center",
        centerMode: true,
        infinite: true,
        slidesToShow: 1,
        slideToScroll: 1,
        speed: 500,
        nextArrow: <NextArrow/>,
        prevArrow: <PrevArrow/>,
        initialSlide: 0,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slideToScroll: 3,
              infinite: true,
              dots: true,
            },
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              slideToScroll: 2,
              initialSlide: 2,
            },
          },
          {            
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slideToScroll: 1,
            },
          },
        ]
      };
      
      return ( 
    <div className='container' style={{ marginTop: "-150px"}}>
      <Slider {...settings}>
        <div className='card'>
          <img src={posterIcon1} alt="" className="w-100 p-0"/>
            <div className="card-body">
            </div>
        </div>
        <div className='card'>
          <img src={posterIcon2} alt="" className="w-100"/>
        <div className="card-body">
          </div>
        </div>
        <div className='card'>
          <img src={posterIcon3} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon4} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon5} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon6} alt="" className="w-100"/>
          </div>
        </Slider>
    </div>
        );
    };
};

.slick-next:before {
    font-size: 90px !important;
} 
.slick-next,.slick-next:hover,.slick-next:focus {
    right: 40px;
    margin-top: -30px;
}
.slick-prev:before {
    font-size: 90px !important; 
}
.slick-prev,.slick-prev:hover,.slick-next:focus {
    margin-top: -30px;
}
.slick-slide > div {
    margin: 0 10px;
}
.slick-list {
    margin: 0 -10px;
}
.card {
    border: 1px solid #ffffff00;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
}
.card img {
    border-radius: 15px;
}
.card-top > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-body {
    display: none
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Cinema App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Answer 1

Решение нашел: надо было удалить класс container:

      return ( 
      <Slider {...settings}>
        <div className='card'>
          <img src={posterIcon1} alt="" className="w-100"/>
            <div className="card-body">
            </div>
        </div>
        <div className='card'>
          <img src={posterIcon2} alt="" className="w-100"/>
        <div className="card-body">
          </div>
        </div>
        <div className='card'>
          <img src={posterIcon3} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon4} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon5} alt="" className="w-100"/>
        <div className="card-body">
        </div>
        </div>
        <div className='card'>
          <img src={posterIcon6} alt="" className="w-100"/>
          </div>
        </Slider>
        );
    };
};

Из-за него не получалось. Хотя в документации он был, поэтому даже и не думал, что в нём может быть ошибка.

БЛОГ НА HUSL

React-slick Как слайдер растянуть?

Ответы (1 шт):