1

I am creating the custom paging slider from https://react-slick.neostack.com/docs/example/custom-paging/ I copied the code directly from the website and follow the instructions and installed the packages. When i try to run the code though i get the following error:

./src/Carousel.js Module not found: Can't resolve './config.js' in '/Users/mcoe/Documents/Code/my-app1/src'

Code:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Style from "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from 'react-responsive-carousel';
import Slider from 'react-slick';
import { baseUrl } from "./config.js";

export default class SimpleSlider extends React.Component {
  render() {
    const settings = {
      customPaging: function(i) {
        return (
          <a>
            <img src={`${baseUrl}"Random1${i + 1}.png`} />
          </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 + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
          <div>
            <img src={baseUrl + "Random1.png"} />
          </div>
        </Slider>
      </div>
    );
  }
}
dwill09
  • 11
  • 9

2 Answers2

1

It looks like the component just wants a base url from a config file. The baseUrl needs to be the url path of your images. A relative path should work so if they are stored in my-app1/public/images/ you should be able to create a file config.js in the src directory like this:

//config.js
export const baseUrl = 'images/';
nbwoodward
  • 2,816
  • 1
  • 16
  • 24
  • Thank you that fixed the error. Now I having trouble getting my images to show. im not sure about the syntax for the first tag right after the return statement – dwill09 Oct 16 '18 at 16:31
  • Ah I'm sorry I didn't see where `baseUrl` was being used. I'll edit my answer. – nbwoodward Oct 16 '18 at 16:33
  • that connected the images but its not following the slider settings or anything the only time i can see the pictures is by pressing the previous button but its shows them all at once not one at a time. i was doing some searching https://stackoverflow.com/questions/43150266/react-slick-custom-paging-paging-prop-usage and it said something about updating to the latest version when i do npm install react-slick i get the following: – dwill09 Oct 16 '18 at 17:17
  • npm WARN ajv-keywords@3.2.0 requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN react-slick-carousel@0.14.9 requires a peer of react@^0.14.0 || ^15.0.1 but none is installed. You must install peer dependencies yourself. npm WARN react-slick-carousel@0.14.9 requires a peer of react-dom@^0.14.0 || ^15.0.1 but none is installed. You must install peer dependencies yourself. npm WARN slick-carousel@1.8.1 requires a peer of jquery@>=1.8.0 but none is installed. You must install peer dependencies yourself. + react-slick@0.23.1 – dwill09 Oct 16 '18 at 17:18
  • Are you loading the CSS, as shown in the quick start guide: https://react-slick.neostack.com/docs/get-started – nbwoodward Oct 16 '18 at 17:29
  • I added the Link tags into the index.html now i am able to switch between them though the dots do not show the thumbail images. Where do the import "~slick-carousel/slick/slick.css"; import "~slick-carousel/slick/slick-theme.css"; go? – dwill09 Oct 16 '18 at 17:42
  • You don't have to add both the `` tags and the import tags. But the import tags go at the top of Carousel.js with the rest of the imports. – nbwoodward Oct 16 '18 at 17:52
  • was able to get everything working except the getting the images to appear as the dots and arrows to appear. Ive added the css and added all dependencies. any suggestions? – dwill09 Oct 16 '18 at 20:33
  • That has to be an issue with `settings.customPaging`. You'll have to figure that one out. – nbwoodward Oct 16 '18 at 21:39
  • This helps me lot.. :) I just added it on top of the page..! – vishnu Sep 17 '20 at 17:51
0

What it looks like currently, works. have not gotten the arrows to appear or images to appear in the dots underneath

dwill09
  • 11
  • 9