My Sliders

Установка

npm install my-sliders

Подключение

// Основной импорт
import { SliderImages, SliderImagesStatic } from 'my-sliders';

// Подключение стилей (если не подключаются автоматически)
import 'my-sliders/dist/index.css';

Примеры использования

Полный пример SliderImagesStatic

Ширина элементов слайда статична. Кол-во видимых эл-ов зависит от ширины родительского компонента

import React from 'react';
import { SliderImages } from 'my-sliders';

function App() {
  return (
    <SliderImagesStatic
        widthItem={240} // ширина элемента
        elements={[...]} 
        
        onClick={onClick} // клик на дочерний элемент (необ.)

        ms={450} // время переключения слайда (необ.)

        // показать текущие эл-ты 
        showItems={true} // показывать текущий(ие) видимые элементы слайда // (необ.)
                
        // если важно, при внешнем выборе, ставить на 1 место выбранный эл-нт
        firstElem={currentImage} // текущий эл-нт слайдера (1 эл-нт) (необ.)
        setFirstElem={setCurrentImage} // (необ.)

        // внешние фичи, отвечающие за скролл эл-ов
        refBackward={refBackward} // ref на внешний эл-нт для переключения слайда (необ.)
        refForward={refForward} // ref на внешний эл-нт для переключения слайда (необ.)

        // чтобы предотвратить скролл при внешнем выборе
        firstElemChange={firstElemChange}  // если эл-нт был переключен вне слайдера (необ.)
        setFirstElemChange={setFirstElemChange} // (необ.)
    />
  );
}

Полный пример SliderImages

Ширина элемента слайда равна ширине родителького компонента.

import React from 'react';
import { SliderImages } from 'my-sliders';

function App() {
  return (
    <SliderImages
        elements={[...]}

        onClick={onClick} // клик на дочерний элемент (необ.)

        ms={600} // время переключения слайда (необ.)

        // показать текущие эл-ты 
        showItems={true} // показывать текущий(ие) видимые элементы слайда (необ.)

        // если важно, при внешнем выборе, ставить на 1 место выбранный эл-нт
        firstElem={currentImage} // текущий эл-нт слайдера (необ.)
        setFirstElem={setCurrentImage} // (необ.)

        // чтобы предотвратить скролл при внешнем выборе
        firstElemChange={firstElemChange}  // если эл-нт был переключен вне слайдера (необ.) 
        setFirstElemChange={setFirstElemChange} // (необ.)

        // внешние фичи, отвечающие за скролл эл-ов
        refBackward={refBackward} // ref на внешний эл-нт для переключения слайда (необ.)
        refForward={refForward} // ref на внешний эл-нт для переключения слайда (необ.)
    />
  );
}

Если стили не применяются

Добавьте в ваш основной файл (например, index.js):

import 'my-sliders/dist/index.css'; // Глобальное подключение

Примеры использования

SliderImagesStatic: https://pfktpa.ru/certificates SliderImages: https://pfktpa.ru/product-catalog/sistemy-dau/sistema-dau-parus-13-10-20-30-40