@Devilz_1

Разное поведение отрисовки функциональной компоненты с использованием react-id-swiper, в чём может быть дело?

Всем привет.

Использую библиотеку react-id-swiper, чтобы в конечном итоге получить "карусель" кликабельных категорий.

Вот компонента.

import React from 'react';
import Swiper from 'react-id-swiper';
import {_} from "underscore";

const FreeModeNoFixedPositions = (props) => {
    const params = {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
    };

    return (
        <Swiper {...params}>
            {_.map(props.sections, (sect, key)=>{
                return (
                    <div key={key} className="option-swiper-category" onClick={()=>{props.changeActiveCategory(sect.id)}}>{sect.name}</div>
                )
            })}
        </Swiper>
    )
};
export default FreeModeNoFixedPositions;


В неё я передаю объект sections, чтобы циклом пробежаться и отрисовать каждый пункт категорий. Всё ок, НО div-ы категорий отображаются на всю ширину и не меняют друг друга. Двигать пункт можно, но он вернётся на своё место, когда отпустишь курсор.

Если же использовать компоненту так:

import React from 'react';
import Swiper from 'react-id-swiper';
import {_} from "underscore";

const FreeModeNoFixedPositions = (props) => {
    const params = {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
    };

    return (
        <Swiper {...params}>
           <div>1</div>
           <div>2</div>
           <div>3</div>
           <div>4</div>
           <div>5</div>
           <div>6</div>
        </Swiper>
    )
};
export default FreeModeNoFixedPositions;


То всё отображается отлично, и свайпается всё, как надо. В чём может быть дело?
  • Вопрос задан
  • 29 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Aline digital agency Санкт-Петербург
от 180 000 до 250 000 руб.
Myagi Минск
от 3 000 до 4 000 usd.
от 100 000 руб.
22 нояб. 2019, в 17:16
200 руб./за проект
22 нояб. 2019, в 17:09
6000 руб./за проект
22 нояб. 2019, в 16:37
10000 руб./за проект