Карта слайдера React Slick не показывает слайды?

Я столкнулся со следующей проблемой: ползунок React Slick не отображает мои слайды внутри функции карты. Пробовал несколько вещей, но продолжает получать пустые значения.

Когда я жестко кодирую div, это работает, но когда я пытаюсь создать их динамическими, даже если они существуют, они не отображаются.

Кто-нибудь может помочь?

Мой код:

  <Slider {...settings}>
    {this.props.home.fetched &&
      this.props.home.content.map(value => {
        return value.acf.slider_extends.map((value, index) => {
          return (
            <div>
              <h1>{value.project_titel}</h1>
              <p>{value.project_intro}</p>
              <span>{value.video_project}</span>
            </div>
          );
        });
      })}
  </Slider>

вам не хватает атрибута key для div

— 04.04.2019 13:54

javascript reactjs slick.js

04.04.2019 13:45

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 256

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

import React, { Component } from 'react';
import Slider from 'react-slick';

class Home extends Component {

    constructor() {
        super();
        this.state = {
            sliders: [
                'http://img.nowrunning.com/content/movie/2014/Jagga-Jaso/wall_1024x768_01.jpg',
                'https://alchetron.com/cdn/Cocktail-2012-film-images-6dbd0ec2-2ea4-47aa-88fd-388cabed7f8.jpg',
                'http://media.glamsham.com/download/wallpaper/movies/images/z/zindagi-na-milegi-dobara-wallpaper-03-12x9.jpg']
        }
    }

    sliders() {
        return this.state.sliders.map(data => {
            return (
                <div key = {data}>
                    <img alt = "image" src = {data} />
                </div>
            )
        });
    }

    render() {
        const settings = {
            dots: true,
            autoplay: true,
            autoplaySpeed: 4000,
            arrow: false
        }
        return (
            <div >
                <Slider {...settings}>
                    {this.sliders()}
                </Slider>
            </div>
        );
    }
}
export default Home;

04.04.2019 13:57

Если содержащий div или раздел Slick имеет свойство flex, это может привести к исчезновению изображений.

30.04.2021 15:10