MT
количество слайдов легко получить. например, если у вас каждый слайд - это div с каким-то классом, типа 'block-name__slide', то document.querySelectorAll('.block-name__slide').length
Size: a a a
2018 March 07
MT
номер текущего слайда вроде тоже как-то можно, но я не помню, посмотрите в документации на github, там есть описание всех проперти слайдера
Д
лезть руками в dom в ректе не очень хорошая практика, как получить количество элементов достаточно просто, есть встроенные методы в плагине для этого. Мне именно интересно что бы добавить это без лишних костылей, методами плагина, в api не нашел не чего похожего.
DT
Добрый день, может кто пользуется react-slick, надо что бы выводил количество слайдеров и какой слайд сейчас, что то типа 1\10 переключаемся, счетчик меняется на 2\10 и т.д. с помощью чего можно реализовать ?
можно реализовать самому очень легко. ты же передаешь массив со слайдами в слайдер, соответсвенно знешь общее число фоток потом просто выводишь текущий индекс
DT
да, считать дом элементы не надо
DT
у меня была такая же задача решил так....
DT
...
const onChangeSlide = (curSlideIndex) => {
// get current index and set to state
this.setState({curSlideIndex})
}
<div className="slider-holder">
<div className="slick-numbers">
<span>{curSlideIndex} из {photoUrls.length}</span>
</div>
<Slider value={photoUrls}
onChangeSlide={(event) => onChangeSlide(event)}>
</Slider>
</div>
...
Д
Как вывести такими способами это понятно, наверное не очень коректно выразился, мне интересно реализована данная возможность в плагине, и если да то через какой api, если не ошибаюсь в swiper есть для этого специальный метод paggination как то так
DT
в api слайдера этого нет
Д
в slick не чего похоже не нашел
DT
сделайте форк потом пулреквест разрабу )
Д
А у тебя разве не будет перерендероваться каждый раз слайдер при изменения, при такой реализации ?
Д
Может кому интересно будет, в slick, можно передать пропс nextArrow или prevArrow отрисовывают React Element, он получает currentSlide - текущий слайд (от 0 считает) и slideCount (количество слайдов) и в нем можно сделать счетчик и застелезовать.
У меня вышло как то так:
function NextArrow(props) {
const { onClick, currentSlide, slideCount = 1 } = props;
return (
<NextArrowDiv onClick={onClick}>
<CountPage>
{currentSlide} / {slideCount}
</CountPage>
</NextArrowDiv>
);
}
и перерендоривает только данную функцию при изменении
У меня вышло как то так:
function NextArrow(props) {
const { onClick, currentSlide, slideCount = 1 } = props;
return (
<NextArrowDiv onClick={onClick}>
<CountPage>
{currentSlide} / {slideCount}
</CountPage>
</NextArrowDiv>
);
}
и перерендоривает только данную функцию при изменении
2018 March 08
//
ID:72036040
Для самого поля в
classes={{root: "class-name"}} через withStylesСпасибо
//
Не подскажете. Бутстрап стоит учить если работаешь с Материал УИ? Или лучше забить на материал и учить бутстрап?
MK
Лучше semantic-ui
MK
)) imho
ЮЧ
Не подскажете. Бутстрап стоит учить если работаешь с Материал УИ? Или лучше забить на материал и учить бутстрап?
Нет ) С чем работаешь, то и учи.
NK
Не подскажете. Бутстрап стоит учить если работаешь с Материал УИ? Или лучше забить на материал и учить бутстрап?
ЮЧ
ID:72036040
А можно увидеть не только выводы, но и исходные данные?