react-basic-photo-carousel: adjust size and dimensions

As a newcomer to React JS, I decided to use react-simple-image-slider for my image slider component. However, I am facing an issue with making the images responsive on mobile devices. I tried setting the width and height using vw, vh or percentage units, but unfortunately, it only accepts numbers. I have a feeling that there might be an advanced concept that addresses this problem, but I am not sure what it is. Any assistance or guidance on this matter would be greatly appreciated!

    <div className="card_imgBox">
      <SimpleImageSlider
        className="card_img"
        width={400}
        height={300}
        images={item.thumb}
        showBullets={true}
        showNavs={true}
      />
htmlcssreactjsimageslider

Answer №1

Insert the necessary value into the string to find a solution for your issue.

Width="90%"
height="100%"

Answer №2

It is recommended to utilize % yes as the slider dimensions will remain consistent in width and height.

Answer №3

To work around the limitation of the SimpleImageSlider component not accepting string values, you can integrate a resize observer:. This allows you to set the size of the outer div according to your specifications.

import React from "react";
import useResizeObserver from "use-resize-observer";

const App = () => {
  const { ref, width = 1, height = 1 } = useResizeObserver();

  return (
      <div ref={ref} className="img_container" style={{ width: "90vw", height: "30px" }} >
        <SimpleImageSlider
          className="image_item"
          width={width}
          height={height}
          images={item.thumb}
          showBullets={true}
          showNavs={true}
        />
      </div>
  );
};

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

Tips for preventing breaks in typography

I have implemented a material ui Typography component, but it's causing a line break even though there is enough space. Here is the code snippet: <Box flexDirection="row"> <Typography> Gender: <RadioGroup row ...

javascriptcssreactjsmaterial-ui

Issue rendering React.useEffect and mapStateToProps in React Native

I'm currently working on a project that involves displaying a registration modal when the user is null. However, I've noticed that sometimes it doesn't work properly. The issue arises when I check the state element to see if the user exists ...

reactjsreact-nativestatereact-props

HTML does not occupy the entire width of the page

I'm struggling with an issue on my website where the <html> element doesn't span full width on mobile devices. Currently, I am using Bootstrap and Jquery for my website. If you have any insights on what may be causing this problem, please ...

csshtmlmobile

Turn off the ability to click on images, but allow users to access the right

https://i.stack.imgur.com/jriaP.png Example image sourced from reddit.com Illustration represents the desired effect using CSS and possibly JS. In essence: I aim to make an image on a website unclickable to its imageURL There should be a context menu ...

javascriptjqueryhtmlcssimage

Having trouble rendering the React app; encountered an error: JSX contents are unterminated

I am currently facing an issue while trying to fetch data from an API in React using Axios. How can I ensure that useEffect functions properly? My objective is to create a page by fetching data from an API in React through Axios. I have designed a compon ...

javascriptreactjs

Tips for choosing text within an HTML <label> tag

Here is the HTML code provided: <label for="xxxx" id="Password_label"> <div class="xxxx">Password 555</div> 555 <div class="xxx"></div> </label> I am attempting to replace the text "555" that appears inside th ...

javascriptjqueryhtml

What is the best way to establish a minimum width in pixels and a maximum width determined by the variable width of the browser window?

In this scenario: http://jsbin.com/anoyik/edit#preview http://jsbin.com/anoyik/edit#source Is there a way to make the red box's width a minimum of 200px and allow it to expand as the browser window's width increases horizontally? ...

css

Exploring the process of retrieving data from localStorage in Next.js 13

Having recently delved into the realm of Next JS, I've encountered a hurdle when it comes to creating middleware within Next. My aim is to retrieve data from local storage, but I keep hitting roadblocks. middleware.ts import { key, timeEncryptKey, to ...

javascriptreactjstypescriptnext.js

``Modeling CSS Classes Using the Adjacent Sibling

As a coding novice, I challenged myself to rebuild my WordPress site using HTML, CSS, and JavaScript. In my quest for the best way to create a responsive navigation bar, I stumbled upon an example on W3Schools. My dilemma lies in how to handle Adjacent Cl ...

css

What is the correct way to utilize CSS for setting a responsive background image for an element?

When I set the background-image for an <a>, it always requires specifying the width and height in the stylesheet file. This causes the URL image to not be responsive. I've tried solutions such as using background-size: cover; and background-colo ...

jqueryhtmlcsstwitter-bootstrap

What are the key differences between using role and class selectors in HTML 5 and CSS3 to create two sidebars with three

My decision to eliminate all ids from my CSS and transition to HTML 5 has led me to question the use of roles in markup. In the past, IDs were used to style sidebars individually within a single selector for both. Here is an example: <div id="sidebar" ...

htmlcssselectorsidebarrole

"Implementing conditional styling in React with Material-UI and custom

Is there a way to adjust the border radius of a card based on the proximity of the Typography element? Ideally, I would like the border radius of the card to be set to borderRadius: '4px 4px 4px 4px !important' when the Typography is close. < ...

reactjsmaterial-ui

Use Bootstrap to effortlessly arrange columns horizontally in a row

I'm facing a scenario where I need to arrange the columns in a row horizontally. The challenge is to ensure that the row expands horizontally to fit the columns. I attempted to use white-space: nowrap on the row, remove floats on columns, and set the ...

htmlcsstwitter-bootstrap

Struggling with the development of a crossfading image gallery using jQuery's .animate() function while ensuring compatibility with IE8

Seeking assistance in creating a crossfading image gallery using jQuery and the .animate() function. I'm struggling to solve the issue of smooth fadeIn for the next image while maintaining compatibility with IE8. https://jsfiddle.net/Vimpil/fqhc1e9m/ ...

javascriptjqueryhtmljquery-animatecross-fade

Capture any clicks that fall outside of the specified set

I am facing an issue with my navigation drop down menu. Currently, the pure CSS functionality requires users to click the link again to close the sub-menu. What I want is for the sub-menu to close whenever a click occurs outside of it. I attempted a solu ...

javascriptjqueryhtmlcss

Creating a CSV download feature with ReactJS is simple and incredibly useful. Enable users

Despite searching through various posts on this topic, I have yet to find a solution that addresses my specific issue. I've experimented with different libraries and combinations of them in an attempt to achieve the desired outcome, but so far, I have ...

javascripthtmlreactjscsvmaterial-ui

react-relay Attempting to use @refetchable incorrectly within fragment definition

Currently, I am delving into learning react-relay (v13) and encountering an issue when trying to specify a pagination fragment with @refetchable. Despite having a straightforward structure, everything functions as intended without the usage of @refetchable ...

reactjsgraphql-jsrelaymodernreact-relay

Set the HTML content as a string in the Html variable, similar to innerHTML but without using JavaScript directly from an external

When working in an embedded ruby (html.erb) file, I encounter a situation where I have a string of HTML such as variable_string = "<p>Some <strong>Content</strong></p>". In JavaScript, we can easily update the DOM with Element.inn ...

javascripthtmlruby-on-rails

Encountering issues with a React + Node Shopify application

I am developing an app in Shopify using React + Node, but I encountered this error: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. I'm not sure why ...

reactjsshopifyshopify-appshopify-apishopify-api-node

Tips for managing a date picker with JavaScript using the Selenium WebDriver

I have been attempting to scrape a travel website using Selenium Webdriver and Python. While I have successfully set the destination (destino) and place of origin (origem), I am encountering difficulties when trying to select a date. I understand that Ja ...

javascriptpythoncssselenium