infinite-image-slider v1.0.7

Infinite Image Slider

Installation

npm

npm install infinite-image-slider

yarn

yarn add infinite-image-slider

Default

import Slider from "infinite-image-slider"
import pictures from "./constants"
import { SliderWrapper, Image } from "./styles"

const App = () => (
  <SliderWrapper>
    <Slider>
      {pictures.map((picture) => (
        <Image key={picture.id} src={picture.src} alt={picture.alt} />
      ))}
    </Slider>
  </SliderWrapper>
)

With arrows

import Slider from "infinite-image-slider"
import pictures from "./constants"
import { SliderWrapper, Image } from "./styles"
import { ReactComponent as ArrowLeft } from "./assets/arrow-left.svg"
import { ReactComponent as ArrowRight } from "./assets/arrow-right.svg"

const App = () => (
  <SliderWrapper>
    <Slider 
      nextButton={<ArrowRight />}
      prevButton={<ArrowLeft />}
    >
      {pictures.map((picture) => (
        <Image key={picture.id} src={picture.src} alt={picture.alt} />
      ))}
    </Slider>
  </SliderWrapper>
)

With arrows and dots

import Slider from "infinite-image-slider"
import pictures from "./constants"
import { SliderWrapper, Image } from "./styles"
import { Circle, Diamond } from "./customDots"
import { ReactComponent as ArrowLeft } from "./assets/arrow-left.svg"
import { ReactComponent as ArrowRight } from "./assets/arrow-right.svg"

const App = () => (
  <SliderWrapper>
    <Slider
      showDots
      customDot={<Circle />}
      customActiveDot={<Diamond />}
      nextButton={<ArrowRight />}
      prevButton={<ArrowLeft />}
    >
      {pictures.map((picture) => (
        <Image key={picture.id} src={picture.src} alt={picture.alt} />
      ))}
    </Slider>
  </SliderWrapper>
)

All custom settings

import Slider from "infinite-image-slider"
import pictures from "./constants"
import { SliderWrapper, Image } from "./styles"
import { Circle, Diamond } from "./customDots"
import { ReactComponent as ArrowLeft } from "./assets/arrow-left.svg"
import { ReactComponent as ArrowRight } from "./assets/arrow-right.svg"
import "./styles.css"

const mediaSettings = [
  { maxWidth: 2200, slidesNumber: 3, spaceBetween: 5 },
  { maxWidth: 1400, slidesNumber: 2, spaceBetween: 4 },
  { maxWidth: 900, slidesNumber: 1, spaceBetween: 2 }
]

const App = () => (
  <SliderWrapper>
    <Slider
      showDots
      prevButton={<ArrowLeft />}
      nextButton={<ArrowRight />}
      config={mediaSettings}
      customDot={<Circle />}
      customActiveDot={<Diamond />}
      autoplay
      autoplaySpeed={5300}
    >
      {pictures.map((picture) => (
        <Image key={picture.id} src={picture.src} alt={picture.alt} />
      ))}
    </Slider>
  </SliderWrapper>
)

Browsers support

Props

Styling

.dots-wrapper

.left-button

.right-button

Welcome to suggestions

https - $ git clone https://github.com/MaKs-Tkachyk/image_carousel.git
or
ssh - $ git clone git@github.com:MaKs-Tkachyk/image_carousel.git

$ cd infinite-image-slider

$ git checkout demo

$ npm install
or
$ yarn

$ npm start
or
$ yarn start

Open: http://localhost:5173/