kimcoder / react-simple-image-slider

simple image slider component for react

react-simple-image-slider

Simple ImageSlider Component for ReactJS v17

• Just Two Elements will be used. (for display images)
• Support GPU Render, by default.
• Support Image Preload.
• Support SSR. ( server-side-rendering )
• Selectable Navigation Styles.

Live demo

• Go to Site
  
  

Install

// npm
npm install react-simple-image-slider --save

// yarn
yarn add react-simple-image-slider

Usage

import SimpleImageSlider from "react-simple-image-slider";

const images = [
  { url: "images/1.jpg" },
  { url: "images/2.jpg" },
  { url: "images/3.jpg" },
  { url: "images/4.jpg" },
  { url: "images/5.jpg" },
  { url: "images/6.jpg" },
  { url: "images/7.jpg" },
];

const App = () => {
  return (
    <div>
      <SimpleImageSlider
        width={896}
        height={504}
        images={images}
        showBullets={true}
        showNavs={true}
      />
    </div>
  );
}

If You want to see more detail source,

• example/App.tsx
  

Props

Name	Type	Required	Description	Default
width	Number	Required	Image Slider Width
height	Number	Required	Image Slider Height
images	Array	Required	Images, Array Elements should be like this structure, { url: "" } or string[]
style	String	Optional	css object
slideDuration	Number	Optional	css transition-duration property	0.5
navStyle	Number	Optional	Arrow Navgation Style, 1 or 2	1
navSize	Number	Optional	Arrow Size	50
navMargin	Number	Optional	Arrow Margin	30
showNavs	Boolean	Required	Toggle Arrow
startIndex	Number	Optional	start Index of Slide	0
showBullets	Boolean	Required	Toggle Bullets	true
loop	Boolean	Optional	looping slider	true
autoPlay	Boolean	Optional	auto play	false
autoPlayDelay	Boolean	Optional	auto play delay	2.0
useGPURender	Boolean	Optional	Toggle GPU Render	true
bgColor	String	Optional	slider container's css background-color property	#000000
onClick	Function	Optional	Image Click Callback function, onClick = (idx, event) => { } idx : number : clicked bullet index (begin from 0)
onClickNav	Function	Optional	Arrow Navigation Callback function, onClickNav = (toRight) => { } toRight : Boolean : slide direction
onClickBullets	Function	Optional	Bullets Callback function, onClickBullets = (idx) => { } idx : Number : clicked bullet index (begin from 0)
onStartSlide	Function	Optional	Slide Transition Start function, onStartSlide = (idx, length) => { } idx : Number : start index (begin from 1) length : Number : image length
onCompleteSlide	Function	Optional	Slide TransitionEnd Callback function, onCompleteSlide = (idx, length) => { } idx : Number : start index (begin from 1) length : Number : image length

If You want to see more detail,

• example/app.tsx
  

Style customize

• can customize by className with !important;

.your-app {
  .rsis-container {
    // do something
  }
}

.your-app {
  .rsis-image {
    background-size: contain !important;
  }
}

Development

directory & source

• ./example/ : demo site souce for testing component
• ./src/ : image slider component source
• ./dist/ : image slider component distribution
• ./babelrc : babel configure. (version 7.x)
• ./webpack.config.js : webpack configure. (version 4.x)
• ./rollup.config.js : rollup configure.

scripts

// npm
npm run example         // run a test app(demo) by webpack dev server
npm run build           // build the image slider component by rollup
npm run dev     // build watch mode

// yarn
yarn example
yarn build
yarn dev

If you want to run a test app, should build before do that.

After run example by webpack dev server,
open http://localhost:8080/ in a browser

License

MIT

react-simple-image-slider's Issues

-

onClickNav return only true

onClickNav = (toRight) => {
console.log(toRight)
}

왼쪽, 오른쪽 클릭 시 둘 다 true가 찍힙니다

Not Responsive on mobile screen

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!

SimpleImageSlider always expects an element at index 0

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:

vertical mode

Unable to define setting for using it as vertical slider.

How to set positions of NavArrows?

안녕하세요. 좋은 라이브러리를 만들어주셔서 감사합니다.

하나 건의사항이 있습니다!
NavArrow를 보면 좌, 우 각각 left: 30px, right 30px이 고정되어 있습니다.
하지만 이미지 크기가 100x100 정도로 작아지게 되면 NavArrow가 가운데로 모이게 돼버립니다.

이를 사용자가 지정할 수 있도록 하면 더 좋을것 같습니다!

The package does not work with a single image

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];

Update data source

Hi, after update image source from api, SimpleImageSlider is not updating images? how can achieve this?

StartIndex

startIndex only affects the bulletpoint starting position, it does not affects photos too

Object-fit property

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!

does it need relative URl or http urls will also work?

Getting the following error:

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",
          },
        ],
*/

unable to change backgroundSize to contain

the default background size is cover but I need contain so all my pic will show

how to make it responsive !!

Image slider package is not working

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

Images shown wrongly oriented on IOS

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.

set start image index

Is it possible to enter the index from which the slider should start?

Image not defined

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

Can I change the color of the arrows and the circles?

not show decode 64 images

after loading the base 64 code of the images from database its not show in the slider slider become dark

복수의 이미지를 보여주는 경우 Slider의 Index에 접근할 순 없나요?

배열을 통한 복수 이미지를 Slider하는 경우 분명 각 이미지별 Index값이 있는 것 같은데

이 Index값을 활용하고 싶어요 ㅜㅜ

가령 업로드한 이미지에 대해 선택 삭제같은 걸 구현할 때 이미지배열의 Index값을 활용하고 싶어요!

Slider is re-rendering but not rendering new images unless nav buttons are clicked

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);
  };

Width and Height to be input as percentage

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%}

I can't make borderRadius

I can't make a borderRadius for the picture

How can I edit Navigation button CSS?

My buttons are coming in the middle of the image. How can I edit the margins of the buttons?

Add touch support

Have you thought about adding support for swiping gestures on touch screens?

혹시 오토플레이 기능은없나요?

이미지가 자동으로 넘어가게끔 만들어주고싶은데 이런 기능은 없을까요?

Autoplay

Hi,

Does the slider have autoplay? I can't find any info on it.

onClick

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

TypeError: can't access property "url", images[0] is undefined

everything as in instructions. array of objects with url: "URL"

node 14
react-create-app 16

Question regarding loading data from API

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?

Slider's first image does not seem unless you do not click the nav button while entering a page.

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> 
  </>
) ;       

Portrait pictures can't show properly

My image is portrait, but I set width={896} height={504}.
The background-size: cover setting seems not work.

fullscreen ?

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 ?

is there a way to add a bullets size property?

like bulletsSize={12}?

responsive

how can i responsive?