Slider methods not working


#1

Hi,

Currently im using the slider component from Ionic.

Im having a ion list and want that if the user clicks on it it shows the details, and the user is be able to swipe to the next/previous article.

If the user clicks an list item i push the details page into it with the needed info for creating the slides. This is working.

Now i want to set the index of the initial slide (On which slide it should start) by code. When the user clicks item 3 i want to start the slides on that slide.

Therefore i have the following code:

@ViewChild('articleSlider') slider: Slides;

  ngAfterViewInit() {  
  var initialSlide = me.initialize();
  this.slider.slideTo(initialSlide,0); 
}

This always throws me Cannot read property ‘slideTo’ of undefined.

If i use the following its working but with delay:

ngAfterViewInit() {
var me = this;
var initialSlide = me.initialize();
me.swipeIndex = initialSlide;
me.sliderOptions.initialSlide = initialSlide;
setTimeout(function () {      
   setTimeout(function () {
   me.showArticle = true;
   }, 300);
 }, 0); }

Is there any way to get rid of the delay and have the swipes working correctly? So that it starts directly on the correct slide without seeing it moving to the slide?

Hope that somebody can help me.


#2

hoprfully you are try to show a initial slide by index,

why are you use the 300 for settimeout there,
remove 300 what happens?

may be you are picking data from some where else, until the data received the slider is not create


#3

Hi,

Yes im trying to show it by index. Maybe my explanation was a bit confusing with the given code example.

Current:
The user first is visiting a list, when clicking on an item in that list he sees the details and can swipe left/right to go to the next or previous article. When the user clicks an article, all articles will be loaded into a slide (This should be optimized, but for now its ok). Then im searching for that index and set the slider to that index so the user sees the correct item and can swipe to the next or previous.

The problem:
If i dont use the timeout function, and click on a item i always see the first created slide, and then it slides to the index that it should. What i want is that the slider starts on the index that it should without sliding, thats why i put in the 300 delay, so the start is not seen by the user. If i look at the documentation of swiper it should be possible to instantly start on the given slide, but i cannot get this done.

Data:
The data that i get is already received in the list view, and is passed to the article view as a navigation param. So it can create the slider directly and doesnt have to wait for the data.


#4

sorry @bolivir
Although you give a detail explanation,
still i am not able to visualize your code or ui design pattern

can you do a plunkr and share the link here
i will surely help you


#5

I just created a plunker https://embed.plnkr.co/zuP5LS/

Its just a simple slider, but the behavior of this one is the same as it does in my application.
I set the slider index higher then the first one, as you will see in the example you see a little jump (See colors).
For me this means it will not start at the correct index, please correct me if im wrong but this is not the behavior i would expect when i set the initial index.
Even when i set the initial index in the slideroptions directly i see the slider starting at 0.


#6

@bolivir, seems this is a bug
if you still need a fix go to
node_modules->ionic-angular->components->slide->slide.js

around 80 to 90 th line there is a set timeout is there just remove that

hope it will solve the issue but seems this fix can cause some other problem
see those