React Slick dots cover Text

Question

I use React-slick but as soon as I want to display the dots the text is covered. If I remove the background, the text is visible, but the distance is not formed to the text, but to the upper elements.

Now my question how can I get a distance to the text so that this can be displayed?

import React from 'react'
import Slider from "react-slick";

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";


function Main() {

    var settings = {
        dots: true,
        infinite: true,
        speed: 500,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 6000,
        pauseOnHover: true,
        appendDots: dots => (
            <div
                style={{
                    backgroundColor: "#ddd",
                    borderRadius: "10px",
                    marginTop: "10px",
                    padding: "20px"
                }}
            >
                <ul style={{ margin: "0px" }}> {dots} </ul>
            </div>
        ),
    };
    return (
        <div>
            Hier steht noch Text
            <h2>Pause On Hover</h2>
            <Slider {...settings}>
                <div>
                    <h3 className="title is-3">1</h3>
                </div>
                <div>
                    <h3 className="title is-3">2</h3>
                </div>
                <div>
                    <h3 className="title is-3">3</h3>
                </div>
                <div>
                    <h3 className="title is-3">4</h3>
                </div>
                <div>
                    <h3 className="title is-3">5</h3>
                </div>
                <div>
                    <h3 className="title is-3">6</h3>
                </div>
            </Slider>
        </div>
    )
}

export default Main

What it looks

Current Status

What it should be

It should be like

React slicks example

React Slick dots cover Text

0 Answers0