React Media Slider – Display Images and Videos in a Single Slider

jishnu vijayan — Tue, 24 Feb 2026 10:38:14 +0000

Repository

https://github.com/jishnuAVijayan012/my-react-slider

Building a modern media gallery in React should be simple. Whether you're showcasing product images, promotional videos, portfolios, or social media content, you often need to display both images and videos in the same slider.

my-react-image-slider-jav is a lightweight and customizable React media slider that supports both images and videos with an easy-to-use API.

Features

📷 Display images and videos in a single slider
🎥 Native HTML5 video support
🔄 Smooth navigation between media items
📱 Fully responsive design
⚡ Lightweight and easy to integrate
🎨 Customizable through CSS
🖱️ Previous and Next navigation controls
💻 Works with modern React applications
🚀 Simple installation and setup

Installation
First, install the required package using npm:

npm install my-react-image-slider-jav

yarn add my-react-image-slider-jav

Basic Usage

Import and use the ImageSlider component in your React application:
import React from 'react'

import { ImageSlider } from 'my-react-image-slider-jav';

const App = () => {

  const productData = {

    name: "Nike Air Max",

    images: [

      "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_1.jpg",

      "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_2.jpg",

      "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_3.jpg",

      "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_4.jpg",

    ],

  };

  return (

    <div className="App">

      <ImageSlider images={productData.images} />


    </div>

  );

}


export default App;

Media Object Structure

Each media item accepts the following properties:

Image

{
type: "image",
src: "https://example.com/image.jpg",
alt: "Beautiful landscape"
}

Video

{
type: "video",
src: "https://example.com/video.mp4",
poster: "https://example.com/poster.jpg"
}

Example

import { ImageSlider } from "my-react-image-slider-jav"; 
const media = [ 
{ 
type: "image", 
src: "https://picsum.photos/id/1018/1200/600", 
alt: "Mountain View", 
}, 
{ 
type: "image", 
src: "https://picsum.photos/id/1015/1200/600",
 alt: "Forest", 
},
 { 
type: "video",
 src: "https://www.w3schools.com/html/mov_bbb.mp4",
 poster: "https://picsum.photos/id/1016/1200/600",
 }, 
{ 
type: "image", 
src: "https://picsum.photos/id/1025/1200/600", 
alt: "Beach",
 },
 { 
type: "video", 
src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4", 
poster: "https://picsum.photos/id/1035/1200/600",
 }, 
]; 

const App=()=> {
 return <ImageSlider media={media} />; 
}
 export default App;

The slider can seamlessly display mixed media like this:

Navigation works smoothly across all media types without requiring separate components.

Use Cases

Product galleries
E-commerce websites
Portfolio websites
Photography showcases
Travel blogs
Real estate listings
Educational content
Event galleries
Marketing landing pages
Company presentations

Why Use my-react-image-slider-jav?

Lightweight package
Easy integration
Supports both images and videos
Responsive layout
Simple API
Minimal configuration
React-friendly
Suitable for personal and commercial projects

Contributing

Contributions, bug reports, and feature requests are always welcome. Feel free to open an issue or submit a pull request.

npm Package

npmjs.com

If you find this package useful, consider giving it a ⭐ on GitHub and sharing it with the React community.

License

**
This project is licensed under the MIT License.

Author
JISHNU A VIJAYAN

Readme
Keywords
reactslidercarouselimage slider

React Image Slider

jishnu vijayan — Tue, 24 Feb 2026 10:38:14 +0000

Repository
https://github.com/jishnuAVijayan012/my-react-slider

This project is a simple React Image Slider using the my-react-image-slider-jav package.
It displays product images in a slider format.

Installation
First, install the required package using npm:

npm install my-react-image-slider-jav

Usage
Import and use the ImageSlider component in your React application:
import React from 'react'

import { ImageSlider } from 'my-react-image-slider-jav';

const App = () => {

const productData = {

name: "Nike Air Max",

images: [

  "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_1.jpg",

  "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_2.jpg",

  "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_3.jpg",

  "https://fadzrinmadu.github.io/hosted-assets/product-detail-page-design-with-image-slider-html-css-and-javascript/shoe_4.jpg",

],

};

return (

<div className="App">

  <ImageSlider images={productData.images} />


</div>

);

}

export default App;

Features
Simple and lightweight image slider
Easy integration with React
Supports multiple images
License
This project is licensed under the MIT License.