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

Guide for creating a function that accepts an array containing multiple arrays as input

I am working with a function called drawSnake and it is being invoked in the following manner: drawSnake( [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], ] ); How should I format the input for this function? I have attempted using Array<Array<[numb ...

javascriptreactjstypescriptfunctiontypes

Conceal the block quotes while substituting with a newline

My HTML page contains numerous comments enclosed in blockquotes. I attempted to implement a feature that allows users to hide all the comments with just one click by using the following JavaScript code: const blockQuotes = document.getElementsByTagName(& ...

javascriptcss

Updating nested interface values using React hooks

I am looking to develop an application that can seamlessly update a nested configuration file after it has been imported (similar to swagger). To achieve this, I first created a JSON configuration file and then generated corresponding interfaces using the ...

reactjsjsontypescriptreact-hooksreact-typescript

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

javascriptjqueryhtmlangularjscss

Encountering a problem during the creation of a react native application

After successfully installing Nodejs, Java, Python, and Android Studio, I proceeded to install create-react-native-app using the following command: npm install -g create-react-native-app However, when trying to run the command sudo create-react-native-ap ...

reactjsreact-nativeubuntunpmcreate-react-app

encountered difficulty in fetching information from mongoDB

I have successfully created user accounts and stored them in a MongoDB users database within a users collection. To validate that the users are indeed stored, I am utilizing Studio 3T. Within my dal.js file, I have implemented the code responsible for retr ...

node.jsreactjsmongodbexpress

Merge two sets of results into a single set in mysql

Check out Fiddle Example 1 View Fiddle Example 2 I'm wondering if someone can assist me in combining two separate result sets into a single query to avoid running multiple queries? PRODUCT_PAGE_ID PRODUCT_PAGE_NAME SIMILAR_PRODUCT SIMILAR_PRODU ...

htmlmysqlsqljoingroup-by

The filter function for an array within setState is malfunctioning

Struggling to implement an onclick function that will delete a clicked item from an array. Despite my efforts, the item is not getting deleted. The setListOfDocs function should update the listOfDocs array by removing the clicked item (onClick function ac ...

reactjsmaterial-ui

HTML5 video function is only supported in Internet Explorer, while other browsers display a black screen instead

My task involves creating an html5 application that can be accessed across all major browsers, including Chrome, Firefox, IE9, Safari, and Opera. One of the requirements is for the application to support video playback. I am utilizing the video tag and hav ...

htmlvideocross-browserhtml5-videovideo.js

I can't figure out why I'm receiving undefined even though all the variables are populated with the necessary

I have been working on a project that involves implementing email and password authentication using Firebase. However, I encountered an error when the user submits their credentials: FirebaseError: Firebase: Error (auth/admin-restricted-operation). at ...

javascriptreactjstypescriptfirebasefirebase-authentication

Is there a way to apply a ternary for the className 'active' to only select items within a menu in

Just starting out with reactjs and having an issue with applying the 'active' class to only the Dashboard item. How can I use a ternary operator to add the 'active' class specifically for Dashboard? Additionally, I want to display diffe ...

reactjs

"ReactJS throws an error of 'Uncaught TypeError: undefined' for one scenario but works fine

I can't seem to understand why my console is throwing an "Uncaught TypeError" even though everything else in the object is functioning properly. Let me illustrate with this example: This is the data I am receiving: { "coord":{"lon":-117.8231,"lat ...

reactjsjsonobject

Can a website trigger an alarm on a user's iPhone without their permission?

Even though I have limited experience with HTML, CSS, and Javascript, I am curious if it is possible to create a basic website that can trigger an alarm on the user's device by simply clicking a button. For example, imagine a scenario where a user is ...

javascriptjqueryhtmliosalarms

The specialized element encountered an issue with mapping

For a while now, I've been trying to create my own custom component but it's not working as expected. The interaction seems fine, but for some reason, it only renders the last item in the arrays. export default class MyComponent extends Comp ...

javascriptreactjs

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

javascripthtmlangularjs

Tips for applying styles to elements that are not directly related when the parent element has a specific class using CSS

I have some HTML code structured as shown below. <div class='A'> <div class='B' /> <div class='C' /> </div class='A'> <div class='D' /> My Objective: If A contains C: ...

css

Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Currently, I am facing a challenge with implementing dynamic paths in NextJS and I'm struggling to find a solution. Let me provide some context for better understanding. I am working on developing an ecommerce application using NextJS, and the folder ...

javascriptreactjsmongodbnext.js

Unable to commit changes to a fresh Github repository

After successfully pushing my code to a repository on GitHub, I encountered difficulties when attempting to push my 'backend' folder. Despite eventually managing to do so, the code did not look the same as it did in VS Code. In an effort to maint ...

reactjsgitgithub

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

I'm currently working on a project that involves displaying data from a database in a table. To make the data paginated on the client side, I decided to use the bootstrap paginator library available at: Below is the code I'm using: In my header ...

javascriptphpjqueryhtmltwitter-bootstrap

Why Safari is Not Displaying Drop Shadows on SVG Path Elements in CSS

I implemented an SVG triangle using HTML: path { fill: red; filter: drop-shadow(5px 3px 17px rgb(0 0 0 / 1)); } <svg style="height: 36px; width: 100%; background-color: #EAEAEA ;" viewBox="0 0 436 217" preserveAspectRatio="none" class="Tagline ...

htmlcsssvgsafari