Question

-1

React Slick slider map not showing slides?

rated 0 times [ 1] [ 2] / answers: 1 / hits: 7356 / 5 Years ago, thu, april 4, 2019, 12:00:00

I am facing the following problem, where the React Slick slider is not displaying my slides inside the map function. Tried multiple things, but keep getting empty values.

When i hardcode divs it works, but when i try to create them dynamic even when the exist the don't show up.

Can someone help?

My code:

  <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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kourtney

Add To Favorites

Follow

Total Points: 368

Total Questions: 103

Total Answers: 85

Location: Bonaire

Member since Sat, May 1, 2021

3 Years ago

kourtney questions

1 Problem with typescript while making request to SWR

Sun, Oct 4, 20, 00:00, 4 Years ago

1 JS DateTimePicker onChange event not working

Tue, Oct 29, 19, 00:00, 5 Years ago

1 NodeJS and Sharp, BMP to PNG Error: Input file contains unsupported image format

Fri, May 24, 19, 00:00, 5 Years ago

1 Cypress - Add custom header for all XHR requests

Fri, Mar 1, 19, 00:00, 5 Years ago

1 Uncaught SyntaxError: Unexpected identifier (Typescript for front end dev without framework)

Mon, Feb 25, 19, 00:00, 5 Years ago

View All

answered 5 Years ago breap · Accepted Answer

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;