kimcoder / react-simple-image-slider Goto Github PK
View Code? Open in Web Editor NEWsimple image slider component for react
Home Page: https://kimcoder.github.io/demo/react-simple-image-slider/
License: MIT License
simple image slider component for react
Home Page: https://kimcoder.github.io/demo/react-simple-image-slider/
License: MIT License
안녕하세요. 좋은 라이브러리를 만들어주셔서 감사합니다.
하나 건의사항이 있습니다!
NavArrow를 보면 좌, 우 각각 left: 30px, right 30px이 고정되어 있습니다.
하지만 이미지 크기가 100x100 정도로 작아지게 되면 NavArrow가 가운데로 모이게 돼버립니다.
이를 사용자가 지정할 수 있도록 하면 더 좋을것 같습니다!
Currently we need to input width height as numbers, based on different screens they dont fit and overstrech. Wrapping the image slider in bootsrap color range should fix this but since number is still rerquired to provide in height and width, it does not work.
I need to be able to put in like width={100%} height={100%}
like bulletsSize={12}
?
Hi,
Does the slider have autoplay? I can't find any info on it.
The package has some issues which i will list here.
1)url key word must be present for it to work.
2) it's always expecting an element at index 0 for some reason
3) When the page first loads it always shows a black screen
4)if there is only one image, it doesn't load it or show it.
I had to make a workaround to fix these problems as such
const [imgUrls, setIMGUrls] = useState([{url:""}]);
await firebase.firestore().collection("Properties").where("propertyID","==",propID).get().then((snapshot) => {
let images = []
snapshot.forEach((doc) => {
const {imageUrls} = doc.data();
images = [...images, ...imageUrls.map(url => ({ url }))]
})
setIMGUrls(images)
})
return (
<SimpleImageSlider
width={896}
height={504}
images={imgUrls}
showBullets={true}
showNavs={true}
autoPlay={true}
/>
)
line of code that is causing the problem:
Hi, after update image source from api, SimpleImageSlider is not updating images? how can achieve this?
Hi, installed this component today, and whenever i try to use it, I get a ReferenceError:
ReferenceError: Image is not defined
at eval (webpack-internal:///./node_modules/react-simple-image-slider/dist/index.js:4:2477)
at Array.map ()
at eval (webpack-internal:///./node_modules/react-simple-image-slider/dist/index.js:4:2462)
at eval (webpack-internal:///./node_modules/react-simple-image-slider/dist/index.js:4:2820)
at Module../node_modules/react-simple-image-slider/dist/index.js
I have modal which displays the image slider, i have a button that is called 'next post' which should render a new image slider and other info in the modal.
what happens is the slider gets re-rendered, the bullet points reflect the right number of new images in the new post, but the new images do not render unless i click the slider nav buttons. Can anyone help?
const nextPost = () => {
setPostImageArray(posts[postIndex + 1].images);
setPostCaption(posts[postIndex + 1].caption);
setPostIndex(postIndex + 1);
};
Please how do i add a click listener to each of the slide.
Here is the structure of my data, i want to be able to click on each of the slide and have it link to different location.
{
url: require("../../assets/banner.jpg"),
link: "",
key: 1,
}
Thanks in advance
이미지가 자동으로 넘어가게끔 만들어주고싶은데 이런 기능은 없을까요?
Have you thought about adding support for swiping gestures on touch screens?
how can i responsive?
startIndex only affects the bulletpoint starting position, it does not affects photos too
배열을 통한 복수 이미지를 Slider하는 경우 분명 각 이미지별 Index값이 있는 것 같은데
이 Index값을 활용하고 싶어요 ㅜㅜ
가령 업로드한 이미지에 대해 선택 삭제같은 걸 구현할 때 이미지배열의 Index값을 활용하고 싶어요!
The package does not work when there is only one element in the array.
I know the package is designed for more than one image, but when retrieving images from an API via filters, many times you don't have control of how many images will be returned.
Here is the code for this:
<SimpleImageSlider
width={"500px"}
height={"500px"}
images={[
{url: "/images/img1.png"},
]}
showNavs={true}
showBullets={false}
/>
Error:
TypeError: Cannot read property 'url' of undefined
SimpleImageSlider
/node_modules/react-simple-image-slider/dist/index.js:237
234 | currentSliderStyle = _React$useState8[0],
235 | setCurrentSlideStyle = _React$useState8[1];
236 |
> 237 | var _React$useState9 = React.useState(styles.getImageSlide(images[1].url, slideDuration, 1, useGPURender)),
| ^ 238 | _React$useState10 = _slicedToArray(_React$useState9, 2),
239 | nextSliderStyle = _React$useState10[0],
240 | setNextSliderStyle = _React$useState10[1];
onClickNav = (toRight) => {
console.log(toRight)
}
왼쪽, 오른쪽 클릭 시 둘 다 true가 찍힙니다
Hello, I am using npm image slider package : npmjs.com/package/react-simple-image-slider
This package has the property : slideDuration and i am using this property in my code. however, it is not working. Rest of the properties are working.
here is the code for this:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactBootstrap, { Jumbotron, Container, Row, Col, Column, Image, Button } from 'react-bootstrap';
import SimpleImageSlider from "react-simple-image-slider";
class Homepage extends Component {
render() {
const images = [
{ url: '../../Assets/images/img_bg_1.jpg' },
{ url: '../../Assets/images/img_bg_2.jpg' },
{ url: '../../Assets/images/img_bg_3.jpg' },
];
return (
<div>
<SimpleImageSlider
width={896}
height={504}
images={images}
slideDuration={0.1}
/>
</div>
);
}
}
export default Homepage;
I am not sure where is the issue. can someone please suggest where i can get the support. ? Thanks
can we make ik widht 100% and heigth 100% so it uses full available screen width ?
i have
<div>
<SimpleImageSlider
width={'100%'}
height={'100vh'}
images={images}
showBullets={true}
showNavs={true}
/>
</div>
but can we make it crop in center ? a bit like background cover with postition to center center ?
after loading the base 64 code of the images from database its not show in the slider slider become dark
When you are entering the first time for the page or refreshing, the first image does not seem, like the one below.
However, when you click the nav buttons, after arriving at the first image, it seems, like the one below.
Can anyone help?
const images = [{ url: file0 }, { url: file1 }, { url: file2 }];
return(
<>
<section className="shadow-none p-3 mb-5 rounded d-flex justify-content-center">
<SimpleImageSlider
width={896}
height={504}
images={images}
autoPlay
autoPlayDelay={5}
showBullets
showNavs
/>
</section>
</>
) ;
I can't make a borderRadius for the picture
My image is portrait, but I set width={896} height={504}.
The background-size: cover setting seems not work.
Is it possible to enter the index from which the slider should start?
everything as in instructions. array of objects with url: "URL"
node 14
react-create-app 16
I have a few images that I am trying to load from the API however it's showing black color screen for the images that are coming from the API but when I hard code in a variable with URLs its works fine.
Any thoughts on how to fix this issue?
Hi,
I'm trying to change the width and height of the pictures and the object-fit property to display the whole picture. Is there any way how to do this? I assume all picture have an objectFit of cover? The thing is that standing pictures cut off and that's pretty annoying
Thanks in advance!
Hi I'm a newbie to web development,
I m trying to use this package with photos taken with an iPhone XR. My site works as expected both in Android and in desktop but when it comes to IOS (the same phone that I took photos with), the photos I used inside the slider shown with a wrong orientation. Until now I tried to delete EXIF data but no luck, I tried to change used image tag with a safe one (https://www.npmjs.com/package/react-fix-image-orientation) but I couldn't.
Unable to define setting for using it as vertical slider.
As of now, the slider is not responsive on different screens, and it is not even possible to make provision for that.
It would be great if we can add the functionality of setting the width & height in percentage(& other formats). Let me know if there is some already existing functionality for the same purpose.
Thank You!
Here's the code:
<SimpleImageSlider width={180} height={180} images={item.coverImages} />
/*
item.coverImages= [
{
url:
"https://produits.bienmanger.com/34887-0w470h470_Organic_Apples_Royal_Gala_From_Frnace.jpg",
},
{
url:
"https://5.imimg.com/data5/BJ/SR/MY-28139693/natural-alphonso-mango-500x500.jpg",
},
],
*/
the default background size is cover but I need contain so all my pic will show
My buttons are coming in the middle of the image. How can I edit the margins of the buttons?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.