After having imported everything and installed, I copy and paste any carousel of the code offered by the page, managing to work with the exception of this, the main problem being "baseUr"After having imported everything and installed, I copy and paste any carousel of the code offered by the page, managing to work with the exception of this, the main problem being the "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>
);
}
}
You just need to create at the root of your project a config.js file like this:
config.js
export const baseUrl = window.location.origin + '/img';
// 'img' is the images folder in 'public' (project_name/public/img/)
In your slider component
import { baseUrl } from '../config';
// '../config' instead of './config'
Demo: Stackblitz