score:0
you do not have the right variable bindings: before the class constructor you define variable
var slides = workarrays.length;
there is a bug in the functions leftslide and rightslide (you use state, where you have a zero)
this.setstate({
slides: this.state.slides - 1
});
that's the reason why in this.state.slides you have -1 on click left.
try to use on left click:
// calculate previous slide
var newcurrentslide = this.state.slides - 1;
// if slide number < 0, then get last slide from array
if (newcurrentslide < 0){
newcurrentslide = slides.length - 1;
}
this.setstate({
slides: newcurrentslide
});
for right click:
// calculate next slide
var newcurrentslide = this.state.slides + 1;
// if slide number >= count slides, then get first slide from array
if (newcurrentslide >= slides){
newcurrentslide = 0;
}
this.setstate({
slides: newcurrentslide
});
i suggest you rename variable slides to slidescount - it is a better naming convention.
and if you want a dynamic slider on left and right clicks then you can show a single active image like this:
render(){
return(
<div>
<header/>
<hero/>
<div>
<button onclick={this.leftarrow}><i classname="far fa-arrow-circle-left"></i></button>
<button onclick={this.rightarrow}><i classname="far fa-arrow-circle-right"></i></button>
<div key={this.props.workarrays[this.state.slides].id}>
<services img={this.props.workarrays[this.state.slides].img}/>
</div>
</div>
</div>
);
}
Source: stackoverflow.com
Related Query
- Please help me create an image slider in react.js?
- How do I create a loader that will load in between images when they load in an image slider in react js
- How can I repeat a pattern image to create a background in React Native?
- Create React App 4.0 cannot resolve image path in public folder
- Create a rotated text banner (trapezoid) on top of image in React Native
- How to create a simple spinning animation for an image in React
- How to create an image background fade when mapping an array of images with React
- How to create Image Grid Slider with different heights and width of image ( masonry slider )
- Interpolation in React is not working this way can anybody please help me in this regards?
- how to show image slider in React
- How can I fill a konva rect with fillPatternImage in React or create an infinite grid with the same svg image in React
- CSS / React Help - position text infront of image
- Changing Background image using Create React App
- Setting dynamic background image in React with create react-app
- How to use template string to create link from props and render image in React component
- Facebook Create React App Build - Add Image As Prop Type
- Can someone please help me with this React start?
- Toggling between an image grid and image slider with one array of images in react hooks
- how to create image carousel (not the regular type) - css / react / npm
- create image in React from backend dataURL
- Create and download image of a react component without rendering it
- Adding Modal Popup on Each Image Inside React Slick Slider
- Image slider with react
- React Carousel / Image Slider
- How can I add Vanilla JS to my react app to create Image Modal pop-ups?
- Image Loading Error React Create React App
- How to create floating image transition with css and react
- How to create url for multiple files in react image uploader?
- How do I create image maps (clickable areas on an image using <map >) with React and JSX?
- React onClick refreshes page each time image slider buttons are clicked?
More Query from same tag
- React router private route not redirecting
- What is correct date format in material-ui?
- Do we need to import React or just {Component, PropTypes} will do?
- Including typings from the piral instance fails
- Updating a specific field of object state in React
- How to find an object from recursive array of objects that is matching with the id using javascript and react?
- Prevent web pack from bundling react
- React-table in Material UI Dialog causes "Error: Maximum update depth exceeded. " when selecting a row and exporting it via useMountedLayoutEffect
- How to change the submit button availability according to the dirty property of the Form?
- Looping numbers with object values and push output to a array
- Draft.js - Unable to get data from the database. Cross-origin error
- Adding multiple conditions within a Link in React
- Add "active" class attribute to clicked item in React
- onclick funtion not working beacause it not in the main retun statement
- React, this.setState not updating a variable
- Request failed with status code 500 error. When making form post of multiForm data in React
- Issues with react context
- why filtering state array with react hooks doesn't work but filtering original array does
- React, availableForSale: true to display Text when true
- React: Map over array and dynamically render a component in a specific div
- Why can I nest Styled Components but not ordinary React Components
- How to flow type a Component?
- use date from fetch object to create link for fetch another object in react
- Lodash debounce firing every change
- Child component is rerendering despite using useMemo,
- how to push an deleted list from an array to an empty array in reactjs
- React: useQueries does not stringify nested query objects by default: use a custom stringifyQuery function
- React-Redux: filtering an array of objects from state by whether their properties match other arrays from state
- Cascading drop down in ReactJS controlled component
- ReactJS - REST API query inside .map function?