Изображение слайдера материала не загружается после переназначения - PullRequest
Новая
       22

Изображение слайдера материала не загружается после переназначения

0 голосов
/ 01 декабря 2018

Я использовал слайдер материала в статическом проекте веб-сайта.Ползунок работает хорошо при инициализации (он находится на домашней странице), но показывает только серый блок при перенаправлении с других страниц.Это исправляется, как только вручную обновляется домашняя страница.

Я полагаю, что ползунок должен автоматически загружать изображения как при инициализации, так и при перенаправлении.

Пожалуйста, дайте мне несколько идей, чтобы решить эту проблему.Спасибо!

Slider.js 

import React from 'react';
import board from './images/board.jpeg';
import senior from './images/senior.jpg';
import youth from './images/youth.jpeg';

const Slider =(props) => {
    return (
        <div className="slider">
             <ul className="slides">
                <li>
                    <img className="responsive-img" src={board} alt=""/>
                        <div className="caption">
                            <h3 className='teal-text'>PCCSH board</h3>
                        </div>
                </li>
                <li>
                    <img className="responsive-img" src={senior} alt=""/>
                        <div className="caption">
                            <h3>Senior</h3>
                        </div>
                </li>
                <li>
                    <img className="responsive-img" src={youth} alt=""/>
                        <div className="caption">
                            <h3>Youth</h3>
                        </div>
                </li>
            </ul>
        </div>

    )
}

export default Slider;

Home.js 

import React from 'react';
import Slider from './Slider'
import funded from './images/funded.jpg';
import partner from './images/partner.jpg';

const Home = (props) => {
    return (
        <div className="container">
            <Slider />
            <h2 className="title center">Welcome to PCCSH website!</h2>
            <div>
                <img className="funded responsive-img center-block" src={funded} alt=""/>
            </div>
            <div>
                <img className="partner responsive-img center-block" src={partner} alt=""/>
            </div>
        </div>
    )
}

export default Home;

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
</head>
<body>
    <div id="root"></div>
    <base href="/" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
    <script src="/bundle.js" type="text/javascript"></script>
    <script>
        $(document).ready(function(){
            $('.slider').slider();
        });
    </script>
</body>
</html>
...