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

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

or

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