React responsive carousel height not adjusting properly

Question

I am using react responsive carousel and it's rendering weird

render() {
    return (
      <div className="slider-container">
        <Carousel className="carousel-style" showArrows={true} showThumbs={false} showStatus={false}>
          {this.generateCards()}
          <div className="slider-item-div">
            Test
          </div>
        </Carousel>
      </div>
    );
  }

Here's the CSS

.slider-container {
    width: 100%;
    height: 100%;
}

.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}

.carousel-style {
    height: 100% !important;
}

and unfortunately this is what it renders as

I would like to have the height == 100% and fill the screen. Also I'd like the right and left arrows to be show without hovering over them like here: http://react-responsive-carousel.js.org/#demos

Why don't you try https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi This will help to see your HTML is rendered properly or not! — Faisal Alvi, Sep 07 '18 at 05:36

score 1 · Answer 1 · answered Sep 07 '18 at 05:04

1

If you're wanting this carousel to fill the screen, then the following CSS adjustments should achieve that:

.slider-container {
width: 100%;
height: 100%;

/* Add this */
position:fixed;
top:0;
left:0;

}

answered Sep 07 '18 at 05:04

Dacre Denny

29,664
5
45
65

Gooby · Answer 2 · 2018-09-07T17:21:30.637

1

this might actually be a bug, because when I change the height pixel wise, it does adjust but if I do percentage for it to match parent it doesn't do anything

edited Sep 07 '18 at 17:21

answered Sep 07 '18 at 06:15

Gooby

621
2
11
32

score 0 · Answer 3 · answered Sep 07 '18 at 05:44

0

Make changes in CSS and fixed position of the slider container

.slider-container {
    width: 100%;
    height: 100%;
    position:fixed; /* add this code for position fixed */
    top:0px; /* set top and left 0 */
    left:0px;
}
.slider-item-div {
    padding: 20px;
    background-color: white;
    text-align: center;
    height: 100%;
    width: 100%;
}
.carousel-style {
    height: 100% !important;
}

answered Sep 07 '18 at 05:44

Suhas Bachhav

403
1
7
28

1

set opacity at arrow class ike `.carousel .control-arrow{ opacity: 1 !important; }` – Suhas Bachhav Sep 07 '18 at 06:04
sorry I shoulda been more clear. This slider is in a parent div and I want it to fill that div. Unfortunately your suggestion didn't quite do it. : ( – Gooby Sep 07 '18 at 06:05

score 0 · Answer 4 · answered Jun 25 '22 at 19:26

If you're not against the idea of overriding the default CSS styling, then you could create a CSS file with the following:

.carousel .thumb img {
    width: 100% !important;
    height: 100% !important;
}

.carousel .slide img {
    max-height: 300px;  /* change this to whatever you want */
    width: auto;
}

and then in your code (assuming ES6 syntax) you would simply override the defaults by importing the CSS file you created. For example:

import React, { Component } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import './style/overrides.css';  // change this to the file path of your overrides

React responsive carousel height not adjusting properly

4 Answers4