Ползунок материализации не работает, показывает серый фон - PullRequest
Новая
       5

Ползунок материализации не работает, показывает серый фон

0 голосов
/ 01 апреля 2019

У меня возникли проблемы с ползунком материализации - он показывает серый фон. я не знаю, является ли init проблемой. Но когда я использую Carousle, она работает.

я использую M.AutoInit () для инициализации 

 import React, { Component } from "react";
 import M from "materialize-css";
 import burger1 from "./img/burgers/burger1.jpg";
 import burger2 from "./img/burgers/burger2.jpeg";
 import burger3 from "./img/burgers/burger3.jpg";
 import burger4 from "./img/burgers/burger4.jpg";

 class SliderBurger extends Component {
 componentDidMount() {
 M.AutoInit();
 }
 render() {
 return (
  <div>
    <div className="slider">
      <ul className="slides">
        <li>
          <img src={burger1} alt="" />
          <div className="caption center-align">
            <h3>Hello</h3>
          </div>
        </li>
        <li>

1 Ответ

0 голосов
/ 01 апреля 2019

Вы можете достичь этого, используя ref, предоставленный React.Проверьте демо Slider на этом сайте - Reactize - Slider Вы можете проверить код других компонентов из этого репо - GermaVinsmoke - Reactize 

import React, { Component } from "react";
import M from "materialize-css";
import "materialize-css/dist/css/materialize.min.css";

import Image1 from "../public/architecture-art-buildings-548094.jpg";
import Image2 from "../public/architecture-automobile-buildings-950223.jpg";
import Image3 from "../public/architecture-bridge-city-161853.jpg";
import Image4 from "../public/beach-clouds-dream-60217.jpg";

class Slider extends Component {
  componentDidMount() {
    const options = {
      indicators: true,
      height: 500,
      interval: 4000,
      duration: 500
    };
    M.Slider.init(this.Slider, options);
  }

  render() {
    return (
      <div
        ref={Slider => {
          this.Slider = Slider;
        }}
        className="slider"
      >
        {/* If you want fullscreen slider then add fullscreen to
      this div */}
        <ul className="slides">
          <li>
            <img src={Image1} />
            <div className="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image2} />
            <div className="caption left-align">
              <h3>Left Aligned Caption</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image3} />
            <div className="caption right-align">
              <h3>Right Aligned Caption</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
          <li>
            <img src={Image4} />
            <div className="caption center-align">
              <h3>This is our big Tagline!</h3>
              <h5 className="light grey-text text-lighten-3">
                Here's our small slogan.
              </h5>
            </div>
          </li>
        </ul>
      </div>
    );
  }
}

export default Slider;
...