YIZHUANG / react-multi-carousel

A lightweight production-ready Carousel that rocks supports multiple items and server-side rendering with no dependency. Bundle size 2kb.
MIT License
1.3k stars 292 forks source link

Arrow style not coming proper #129

Open tarun1992 opened 4 years ago

tarun1992 commented 4 years ago

Hi,

I am using Carousel in one of my Next.js applications and arrow style is not coming in an arrow shape. The same can be checked on my website under section Featured Bikes and then Popular bikes. I am using the below code: `
<Carousel arrows={true} showDots={true} responsive={responsive} ssr={true} keyBoardControl={true} containerClass="carousel-container" deviceType={props.deviceType} dotListClass="custom-dot-list-style" itemClass="carousel-item-padding-40-px" partialVisbile>

    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 1</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 2</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 3</p>
    </div>
    <div>
      <picture>
        <source
          type="image/webp"
          srcSet="/static/images/bikersDuniaBackground1.webp"
        />
        <source
          type="image/jpeg"
          srcSet="/static/images/bikersDuniaBackground1.jpg"
        />
        <img src="/static/images/bikersDuniaBackground1.jpg" />
      </picture>
      <p className="legend">Bike 4</p>
    </div>
  </Carousel>`
YIZHUANG commented 4 years ago

You need to add something like this https://github.com/webpack-contrib/url-loader

tarun1992 commented 4 years ago

Already added. Check my Package.json { "name": "bikewalevlog", "version": "1.0.0", "description": "", "scripts": { "dev": "next", "build": "next build", "start": "next start", "export": "next export", "analyze": "cross-env ANALYZE=true next build" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "@material-ui/core": "^4.9.0", "@material-ui/icons": "^4.5.1", "@next/bundle-analyzer": "^9.2.1", "@zeit/next-css": "^1.0.1", "axios": "^0.19.2", "cross-env": "^7.0.0", "material-ui": "^0.20.2", "material-ui-search-bar": "^0.4.2", "next": "^9.1.5", "next-compose-plugins": "^2.2.0", "next-fonts": "^1.0.3", "next-images": "^1.3.0", "next-routes": "^1.4.2", "nodemon": "^2.0.2", "nprogress": "^0.2.0", "react": "^16.12.0", "react-dom": "^16.12.0", "react-jss": "^8.0.0", "react-multi-carousel": "^2.5.0", "react-redux": "^7.1.3", "react-responsive-carousel": "^3.1.51", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "ua-parser-js": "^0.7.21" }, "devDependencies": { "css-loader": "^3.4.2", "file-loader": "^5.0.2", "url-loader": "^3.0.0" } }

tarun1992 commented 4 years ago

Any findings on the above. Please let me know.

raajnadar commented 4 years ago

Paste your next.config.js file here

tarun1992 commented 4 years ago

next.config.js:-

`const withPlugins = require("next-compose-plugins"); const withCSS = require("@zeit/next-css"); const withFonts = require("next-fonts");

const config = { webpack: config => { config.module.rules.push({ test: /.(png|svg|eot|otf|ttf|woff|woff2)$/, use: { loader: "url-loader", options: { limit: 8192, publicPath: "/_next/static/", outputPath: "static/", name: "[name].[ext]" } } }); return config; } };

module.exports = withPlugins([withCSS], config);`

raajnadar commented 4 years ago
const withPlugins = require("next-compose-plugins");
const withCSS = require("@zeit/next-css");
const withFonts = require("next-fonts");

module.exports = withPlugins([withFonts, withCSS], {});

Replace the whole file with this snippet. Make sure you clear your browser cache and restart you nextjs server. The icon will be visible now.

tarun1992 commented 4 years ago

Thanks for your reply. Is there no need for a config object which imports 'url-loader'?. Though, I will test with above configurations and let you know soon.

raajnadar commented 4 years ago

next-fonts will do it internally you don't need to do it manually check the last line in my code you forgot to add withFonts

tarun1992 commented 4 years ago

I have checked but it is not working. After checking the example code, the arrow is appearing via an ASCII code in the style element 'content'. next-fonts is of no help to resolve the issue. The arrow is coming in a rectangular shape as can be checked on my website [https://bikersdunia.com]

raajnadar commented 4 years ago

Wait I will give you a very minimal example in codesandbox

tarun1992 commented 4 years ago

I tried again with the above configurations. It is working now. I wanted to understand the reason for config object issue.

raajnadar commented 4 years ago

It is not an issue you don't need to do anything manually next-fonts imports fonts properly and automatically. You need to clear your cache to check the changes.

tarun1992 commented 4 years ago

Thank you for your help. I am closing the issue.

paulotijero commented 3 years ago

@tarun1992 This closed because it was solved? If that is the case, please tell us if you followed the previous recommendations? or had to do some extra steps

tarun1992 commented 3 years ago

I had to do write custom arrow styles to fix the issue.

raajnadar commented 3 years ago

@paulotijero did you try my fix, because that fixed my issue.

paulotijero commented 3 years ago

@raajnadar I followed the path of @tarun1992 and adding custom arrows.

tarun1992 commented 3 years ago

Hello @raajnadar you have created unnecessary follow backlinks to my website on the URL " https://githubmemory.com/@raajnadar". Please remove those backlinks immediately.

raajnadar commented 3 years ago

I didn't create any. I don't even have an account on githubmemory. You can contact GitHub memory to resolve this issue.

Maybe removing the link from this issue ticket will resolve your issue.

raajnadar commented 3 years ago

@tarun1992 you can do this to solve the issue https://support.google.com/webmasters/answer/2648487?hl=en.

Also, remove your website link from the title & also delete the edit history of the OP.

tarun1992 commented 3 years ago

I don't know if that's your profile or not - https://githubmemory.com/@raajnadar but the backlink is created from this URL. I Disavowed it for now but check with the website why they are creating profile without your knowledge,

raajnadar commented 3 years ago

They also have your profile https://githubmemory.com/@tarun1992.

They are scrapping GitHub's data. Maybe they are using GitHub API for that.

tarun1992 commented 3 years ago

@raajnadar When are you planning to launch version 3?