Después de haber importado todo e instalado, copio y pego cualquier carrusel del código que ofrece la página, logrando funcionar a excepción de este, siendo el principal problema "baseUr"Después de haber importado todo e instalado, copio y pego cualquier carrusel del código que ofrece la página, logrando funcionar a excepción de esta, siendo el principal problema la "baseUrl"
import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; export default class CenterMode extends Component { render() { const settings = { customPaging: function(i) { return ( <a> <img src={`${baseUrl}/abstract0${i + 1}.jpg`} /> </a> ); }, dots: true, dotsClass: "slick-dots slick-thumb", infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div> <h2>Custom Paging</h2> <Slider {...settings}> <div> <img src={baseUrl + "/abstract01.jpg"} /> </div> <div> <img src={baseUrl + "/abstract02.jpg"} /> </div> <div> <img src={baseUrl + "/abstract03.jpg"} /> </div> <div> <img src={baseUrl + "/abstract04.jpg"} /> </div> </Slider> </div> ); } }Solo necesita crear en la raíz de su proyecto un archivo config.js como este:
config.js
export const baseUrl = window.location.origin + '/img'; // 'img' is the images folder in 'public' (project_name/public/img/)En su componente deslizante
import { baseUrl } from '../config'; // '../config' instead of './config'Demostración: Stackblitz