Halten Slider

Halten Slider is a customizable slider component built with React and React Spring.

Dependencies

React-Spring is a library for creating animations in React. It provides powerful and flexible tools for implementing animations with smooth transitions and reactive changes.

Installation

To install the component, run:

npm install @haltentech/halten-slider

Usage

Here's an example of how to use the Halten Slider:

Linear Mode

In this simple mode, the pictures line up.

import { HaltenSlider } from '@haltentech/halten-slider';

const images = [
  { src: pic_1, proportional_height: 90,},
  { src: pic_2, proportional_height: 30,},
  { src: pic_3, proportional_height: 45,},
  { src: pic_4, proportional_height: 80,},
  { src: pic_5, proportional_height: 50,},
  { src: pic_6, proportional_height: 80,},
  { src: pic_7, proportional_height: 35,},
  { src: pic_8, proportional_height: 40,},
  { src: pic_9, proportional_height: 45 },
  { src: pic_10, proportional_height: 35},
];

const App: React.FC = () => {
  return (
      <HaltenSlider
        mode="linear"
        images={images}
        imageSpacing={15}
        scrollSensitivity={1.5}
        height="500px"
        imgStyle={{ border: '10px solid black' }}
        align="top"
      />
  );
};

export default App;

interface HaltenSliderImage

• proportional_height - mandatory attribute. Percentage of the height of the image in the parent container. Frames are not taken into account

interface HaltenSliderProps:

• imageSpacing - distance in pixels between images, taking into account the border
• scrollSensitivity - swipe sensitivity (speed).
• height - slider container height.
• imgStyle - styles that will be applied to the pictures.
• align - Align only valid for "linear" mode ("top", "center", "bottom")

Mosaic Mode

Add additional pos_x and pos_y to the array with images indicating the position in the scrollable container.

Switch to mode="mosaic"

import { HaltenSlider } from '@haltentech/halten-slider';

const images = [
  { src: pic_1, proportional_height: 90, pos_x: 0, pos_y: 5 },
  { src: pic_2, proportional_height: 30, pos_x: 250, pos_y: 10 },
  { src: pic_3, proportional_height: 45, pos_x: 250, pos_y: 135 },
  { src: pic_4, proportional_height: 80, pos_x: 450, pos_y: 20 },
  { src: pic_5, proportional_height: 50, pos_x: 650, pos_y: 50 },
  { src: pic_6, proportional_height: 80, pos_x: 930, pos_y: 18 },
  { src: pic_7, proportional_height: 35, pos_x: 1285, pos_y: 10 },
  { src: pic_8, proportional_height: 40, pos_x: 1280, pos_y: 155 },
  { src: pic_9, proportional_height: 45, pos_x: 2700, pos_y: 138 },
  { src: pic_10, proportional_height: 35, pos_x: 1840, pos_y: 160 },
];

const App: React.FC = () => {
  return (
    <HaltenSlider
      mode="mosaic"
      images={images}
      scrollSensitivity={0.7}
      height={"500px"}
      imgStyle={{ border: "10px solid black" }}
    />
  );
};

export default App;