What is the best way to customize arrow designs in a React Slick Slider?

I am struggling to customize the arrows in react-slick with my own PNG images. Despite my efforts, the images appear distorted on the screen as they are automatically set to a width and height of 20px instead of their actual size of 17x27px. I have experimented with various solutions to adjust the styling, but none have been successful so far. How can I successfully change the width and height of my arrow-images?

I am currently working with nextjs. Here is a concise representation of my react slick slider component:

function TeamCarousel() {
  
  const SlickArrowLeft = ({ currentSlide, slideCount, ...props }) => (
      <img src="/arrow-left.png" alt="prevArrow" {...props} />
  );

  const SlickArrowRight = ({ currentSlide, slideCount, ...props }) => (
    <img src="/arrow-right.png" alt="nextArrow" {...props} />
  );

  const settings = {
    dots: false,
    infinite: true,
    speed: 200,
    slidesToShow: 3,
    slidesToScroll: 1,
    centerMode: true,
    arrows: true,
    beforeChange: (current, next) => handleChangeBefore(current, next),
    afterChange: (index) => handleChangeAfter(),
    prevArrow: <SlickArrowLeft />,
    nextArrow: <SlickArrowRight />,
  };

return ( <Slider {...settings} ref={slider}> [etc.] </Slider> )

Despite attempting inline styles and classNames, I have not been able to modify the image components. Even using JavaScript to manipulate the styles has yielded unsatisfactory results.

Answer №1

Consider including the width and height parameters in the image tag

<img src="/arrow-left.png" alt="previousArrowIcon" {...props} width='27' height='17'/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble displaying selected value in Textfield Select component of Material UI React

My TextField Select Material UI components are populated based on a specific number of values stored in a variable. {this.state.selectedNextHops.map((nextHop, index) => ( <div> <TextField selec ...

Continuous horizontal columns

Is there a way to create horizontal columns with inline-blocks, like the method described here, without having vertical gaps between items on the second line due to different heights? I want to eliminate the vertical gaps between the tiles using only CSS. ...

Steps for deactivating the ag-grid sidebar choices

Using the Ag-grid sidebar, I'm trying to display all columns as options to check or uncheck, with some being read-only. There are no data groups involved. Although the documentation suggests setting functionsReadOnly to true, this doesn't seem to ...

Placing an interactive overlay on top of a button component within Material UI

Currently, I am attempting to place a button on top of another button in Material UI: Click here for the demo I want to ensure that clicking the X button only prints B, instead of both A and B. Although I am aware that nesting buttons is not the proper w ...

The action 'onDeleteClick' cannot be executed as the property is undefined

Why is the onDeleteClick function working on the first <div>, but returning undefined on the second one? I am able to access the reference of this, but when clicking, it shows "onDeleteClick of undefined". I am confused as to why the onDeleteClick f ...

Animation event in CSS3 fails to trigger on Firefox browser

Exploring the potential of CSS3 animation to detect when an input transitions from the enable to disable state, I encountered a challenge specifically in Firefox. Here is the code snippet that showcases the issue: View Demo on jsFiddle HTML: <input t ...

Error: The function `push` cannot be used on the variable `result` (TypeError)

Here is a snippet from my react component const mockFetch = () => Promise.resolve({ json: () => new Promise((resolve) => setTimeout(() => resolve({ student1: { studentName: 'student1' }, student2: { studen ...

What is the process for incorporating a dropdown field and editable field within a container?

Looking to create a unique setup by incorporating dropdown fields and editable text fields within a designated box, similar to the image provided. Any tips on how to successfully implement this design? https://i.sstatic.net/6tGMp.jpg ...

What is the optimal method for inserting a button in an AccordionHeader without causing the Accordion to toggle?

Using React Bootstraps Accordions (version 2.7.0), I want to integrate a button within the accordion header that performs a different action other than toggling the Accordion. const doSomethingElse = (event) => { event.preventDefault(); event.stop ...

Fetching information from external API prior to displaying it

I am currently working on an application that is built using the React Starter Kit. Each page within the app includes a fetch function that retrieves data from an API during the componentDidMount lifecycle. My goal is to retrieve the data before renderin ...

Toggling visibility in React Native by pressing a button

i have a toolbar in my react-native app that looks like this: https://i.stack.imgur.com/Msu4t.png Whenever I click on the search icon, I want to display an input text field like this: https://i.stack.imgur.com/HPwTB.png I've tried several examples ...

Using default language in Next.js internationalization: a step-by-step guide

I've been immersing myself in the Nextjs internationalization documentation for the past two days. My goal is to have support for two languages: en, fa. I also want to be able to switch between them with URLs structured like this: https://example.com ...

What steps are needed to obtain a Bearer access token for embedding a PowerBi Report using the PowerBiEmbed React component within the context of MS Teams?

My team and I are currently working on embedding a PowerBi Report using the PowerBiEmbed component in order to visualize it seamlessly within a Microsoft Teams context without requiring users to repeat the sign-in process every time they access the dashboa ...

Trouble with z-index | initial div out of four malfunctioning

Currently, I am attempting to practice by replicating the design shown in this image: https://i.sstatic.net/iIA2q.jpg However, I have encountered an issue that has been persisting for some time: https://i.sstatic.net/grABz.png I'm struggling to un ...

Identify the currently active subitem within the item-active class in a PHP carousel slider

I am working on creating an image carousel slider with 4 items and 4 slides each. These images will act as radio buttons, and I want to highlight the slide corresponding to the selected radio button. So, when the carousel loads, the selected slide should b ...

Issues arose when attempting to delete the values passed in the context provider using the 'useContext' hook

Try this code in your sandbox: https://codesandbox.io/s/goofy-dhawan-n2kk2?file=/src/components/NavBar.jsx An error occurred: TypeError: Cannot destructure property 'books' of 'Object(...)(...)' as it is undefined. ...

Guide on maximizing the screen height for content in a Material-UI single page application

I am seeking the most efficient method to set the page layout for a Single Page Application (SPA) with a static header (AppBar) at the top and dynamic content beneath it on the page. The height of the page content ScreenSizePage should ideally match the re ...

How can I programmatically trigger the opening of a Material-UI Accordion in ReactJS?

All of the Accordions are assigned unique IDs: const CategoryDisplay: React.FC<Props> = (props) => { ... return ( <> <Accordion id={`category-${accordion.id}`}/> </> ); }; export default CategoryDisplay ...

Setting a CSS Variable with the Help of jQuery

I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready. Currently, I am using a CSS variab ...

Using Reactstrap modal within an iframe on a react.js web application

I am currently working on a project in react.js where I have implemented an iframe using react-frame-component. Inside this iframe, I have incorporated code for a Modal using reactstrap. However, the issue I am facing is that the Modal opens in the main ap ...