Swiper не работает centeredslides

swiper thumb gallery problem without use centeredSlides #2078

Comments

ginkosen commented Apr 19, 2017

swiper thumb gallery problem without use centeredSlides .

When galleryThumbs swiper slide , the galleryTop doesn’t swiper to the right slide

The text was updated successfully, but these errors were encountered:

rustamgaliev commented Apr 21, 2017

I have the same problem

ghost commented Apr 25, 2017

Me too. When I switch off centeredSlides, it becomes unable to show some slides, though in thumbnails swiper displays them perfectly.

AntonShumin commented Apr 28, 2017

I came here for the exact same issue. The last n (however visible) elements will not respond to any actions. with centeredSlides: false

Also, looping .gallery-thumbs causes all kinds of issues

WebKieth commented May 7, 2017

I also have the same. But I have a nice idea how to solve the bug. Swiper has a nice API method .slideTo and into one of the last project i needed to code anchors to other slides. You can syncronize your slides without top.params.control = thumbs thumbs.params.control = top. jQuery helps you — you need to indexing each slide for top and thumb, and do callback, when you click on slide. Callback with galleryTop.slideTo(galThumbIndex).
Or something like this. I will try it when will have some time

Triloworld commented May 12, 2017

I have the same bug there. centeredSlides is bugged. There is more issue about problems with it.

amiut commented May 13, 2017

I have the same issue, it’s so annoying

shrpne commented May 17, 2017

Here is PR which maybe can fix this issue: #1915

Also related issues with workarounds: #1138 #1209

Grawl commented May 29, 2017

Have the same issue.

pwnz22 commented Jun 8, 2017

Any updates on this?

saurabhkohli commented Jun 20, 2017 •

When centeredSlides is set to false, SWIPER API doesn’t calculate the correct snapGrid array.. replace the snapGrid with slidesGrid in the code and everything will work for you.. only if you are not using loop, as I haven’t tested that part.

In getInterpolateFunction (line 3144 in swiper.js): This method was having two calls to LinearSpline which also shouldn’t be the case but for comment the snapGrid and replace with slidesGrid.

In s.slideTo method (line 2030 of swiper.js)

In s.minTranslate and s.maxTranslate (line 681 in swiper.js)

I hope I may be able to resolve your issue for now until the Swiper Team bring an actual fix.

Also this is my swiper code to load (for percentage slidesOffsetBefore I have done few more minor changes):

janistravins commented Jul 25, 2017

nolimits4web commented Nov 13, 2017

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

• Clearly describe the issue including steps to reproduce when it is a bug.
• Make sure you fill in the earliest version that you know has the issue.
• Provide live link or JSFiddle/Codepen or website with issue

anephew commented Feb 7, 2018

Same issue. Please fix this bug, I don’t want use «centeredSlides» with my thumbs

Grawl commented Feb 7, 2018

Grawl commented Feb 7, 2018

But there is a new bug

santamaria7 commented Mar 3, 2018

paulinekorkina commented Mar 10, 2018

You can set ‘width’ to your thumbs gallery to solve the problem

Markao17 commented Oct 2, 2018

When centeredSlides is set to false, SWIPER API doesn’t calculate the correct snapGrid array.. replace the snapGrid with slidesGrid in the code and everything will work for you.. only if you are not using loop, as I haven’t tested that part.

In getInterpolateFunction (line 3144 in swiper.js): This method was having two calls to LinearSpline which also shouldn’t be the case but for comment the snapGrid and replace with slidesGrid.

In s.slideTo method (line 2030 of swiper.js)

In s.minTranslate and s.maxTranslate (line 681 in swiper.js)

I hope I may be able to resolve your issue for now until the Swiper Team bring an actual fix.

Also this is my swiper code to load (for percentage slidesOffsetBefore I have done few more minor changes):

Sorry, i know is been a long time. Can you help me get slidesOffsetBefore as a percentage value?
Can’t get it to work :/

Источник

Incorrect slide selection when centeredSlides = false, slidesPerView > 1 #1138

Comments

Rikk commented Mar 4, 2015

There’s some error in the number of slides that can be selected when centeredSlides = false and slidesPerView > 1

The result seems to be something like this (I’m not really sure):
available slides = total number of slides — slidesPerView + 1

I found it when implementing a variant of thumbs-gallery demo, so I’ve made a testcase using it: http://jsfiddle.net/rfc1en11/

The text was updated successfully, but these errors were encountered:

nolimits4web commented Mar 5, 2015

That is how Swiper works, control doesn’t work based on slide indexes it works on a percentage divider between (maxTranslateParent — minTranslateParent)/(maxTranslateChild — minTranslateChild). So when centeredSlides = false, you can’t move thumbs to the most right slide that is why those multiplication percentage became different

Rikk commented Mar 5, 2015

Thanks, could you please add a note about it? It definitely isn’t easy to figure out for those who don’t know the source-code specifics.

Btw, couldn’t you make it do the margin calc automatically when when centeredSlides == false and slidesPerView > 1 ? Otherwise, I think it would be helpful if it trigger an alert in console.

Or maybe you will find a formula to handle both cases.

nolimits4web commented Mar 5, 2015

It definitely isn’t easy to figure out for those who don’t know the source-code specifics.

Should be visually easy, it is default offset of first slide from the left in centered slide, where each slide is 20% width in your case

Btw, couldn’t you make it do the margin calc automatically when when centeredSlides == false and slidesPerView > 1? Otherwise, I think it would be helpful if it trigger an alert in console.

No, it is normal behavior how it is now, it is just your case which is not default one and pretty specific

Источник

initialSlide not working #3333

Comments

joebentaylor1995 commented Nov 10, 2019 •

So the idea of my slider is to have 4 sliders working together in sync to allow a sort of rolling effect.

I want sliders 1 2 & 3 to all start at different slides.

3 & 4 will be the same.

However, when i set the initialSlide of sliders 1 & 2 (These are the faded out sliders to the left of the slider, the initial index will not apply.

However if i change the initialSlide of the main slider (Slider3) this updates just fine. Can you not have sliders synced and have different initialSlide ‘s on each of them?

This is my code (react)

The text was updated successfully, but these errors were encountered:

aaadamgo commented Nov 11, 2019

Had a very similar issue like this and I put it down to swiper doing some of priority thing with syncing. Unsure though. Hoping @nolimits4web can help you on that.

joebentaylor1995 commented Nov 21, 2019

Used a different slider in the end @aaadamgo as got no help here.

guille-alibrate commented Nov 22, 2019 •

However, when i set the initialSlide of sliders 1 & 2 (These are the faded out sliders to the left of the slider, the initial index will not apply.

I confirm it seem to be no way to set the initial index. That parameter, initialSlide , wont work.

UPDATE: finally worked. Don’t really know why.

OffCorner commented Dec 26, 2019

It did work for me, but only with centeredSlides set to true . I would still like to have the slides not centered but already set an active slide (which also has some custom css)

dcsan commented Feb 2, 2020

@joebentaylor1995 what slider did you end up with? I’m looking for a decent react swiper, the ones out there seems unused or react-slick which includes everything even jquery >.

floppydisken commented Jul 30, 2020

I have a React project, and to get an initialSlide i was forced to pass a controller to the component i was initializing and then set the slide number afterwards.

I hope it can help someone fiddling with Swiper.

efriandika commented Oct 1, 2020

It works for me if cssMode=false

floppydisken commented Oct 1, 2020

@efriandika is it true by default?

efriandika commented Oct 1, 2020

the default value is false. for my cases, previously I always used cssMode,
When I removed the cssMode, initialSlide works as expected and other features also works including virtual slide, etc..

you can find here what feature which is not supported while u are using cssMode=true

georgekrax commented Jan 28, 2021

After importing styles, initialSlide works great.

versedi commented Jun 18, 2021 •

initialSlides works fine if the element is visible before you initialise it.

See here: https://codesandbox.io/s/swiper-default-forked-s9lzu — read the comments, if you set the #mySwiper style to display: block before initializing it, the initialSlide will be working correctly.

What I’m trying to figure out myself now is how to get rid of the animation between slide 0 and initialSlide when using eg. in bootstrap modal: https://codesandbox.io/s/swiper-boostrap-modal-initialslide-repro-oz02z

No matter what speed or callback I set there’s still an animation clearly visible cause of the movement between 0 and my initialSlide. If anyone has any ideas I’d be very welcome to read them.

iamrhm commented Jun 18, 2021

Check this below implementation

My Swiper Component receiving initialSlide from the parent component, so the way I am updating the new initialState is

em commented Aug 13, 2021

Any update on this? initialSlide is completely broken and does nothing. Pretty essential feature.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Не работают опции ‘loopAdditionalSlides’ и ‘loopedSlides’ #1436

Comments

bekliev commented Sep 11, 2015

If you don’t know Russian language — please, translate it with Google Translator.

Владимир, или я и ещё один разработчик неверно читаем документацию, или эти опции не работают.

Полный js-код, который использую:

Пример на jsfiddle.net — прокрутите к bootstrap-алерту с содержимым «Не работают опции ‘loopAdditionalSlides’ и ‘loopedSlides’. «

The text was updated successfully, but these errors were encountered:

nolimits4web commented Sep 13, 2015

Общее количество «дублированных» слайдов ( loopedSlides ) не может быть больше чем общее количество слайдов, в вашем случае это не больше 2 , соответственно не больше 2-х дублированных слайдов с каждой стороны

bekliev commented Sep 13, 2015

А как можно решить эту проблему?
Есть ли другой способ?

Было бы лучше, если была такая опция, которая бы отключала loop , если все слайды помещаются в экран и при $(window).resize проверяля на соответсвию этому условию.

nolimits4web commented Sep 13, 2015

В данный момент есть варианта 2:

• увеличить количество слайдов
• или вручную продублировать их на нужное количетсво

bekliev commented Sep 13, 2015

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

Просто, такое может произойти не только у меня, но и у других людей.

А что если сделать такой функционал в библиотеке?
И назвать опцию loopCondition .

bekliev commented Sep 13, 2015

Общее количество «дублированных» слайдов (loopedSlides) не может быть больше чем общее количество слайдов,

Кстати, стоит добавить это в документацию.

bekliev commented Sep 29, 2015

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

Просто, такое может произойти не только у меня, но и у других людей.

А что если сделать такой функционал в библиотеке?
И назвать опцию loopCondition.

Будет ли такая возможность?

nolimits4web commented Nov 13, 2017

Issue is closed because of outdated/irrelevant/not actual/needed more information/inactivity.

If this issue is still actual and reproducible for latest version of Swiper, please create new issue and fill the issue template correctly:

Источник

Откуда возникает ошибка со слайдером?

Добрый день, подскажите в чем проблема. Есть слайдер, нужно, чтобы он отрабатывал с одними параметрами до 857 и дальше вместо листания появлялся эффект фейд. Через брейкпоинты такое не сделать. Надо дестрой делать слайдера и заново его инициализировать. С первой частью справился. Он на заданном разрешении деактивируется. Но не могу сделать, чтобы на определенном разрешении он снова активировался. Пишет в девтулс ошибку Uncaught TypeError: Cannot read property ‘destroy’ of undefined.

• Вопрос задан 14 янв.
• 273 просмотра

Destroy slider instance and detach all events listeners, where
deleteInstance — boolean — Set it to false (by default it is true) to not to delete Swiper instance
cleanStyles — boolean — Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction

Передайте false в метод destroy.

И как предложение: а что если не делать destroy, а в зависимости от размеров окна браузера делать init с разными настройками?

cupacabka, у вас код как-то награмождён.
Вам нужна 1 функция, которую нужно вызвать при загрузке документа и при ресайзе.
Скажем,

Ну и, возможно, в функции инициализации слайдера, перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если если, вызвать его.

Источник