Ion slides weird behaviour

Ionic Framework
1

Hi, when i use a ion slides in my project at the very beginnig it shows only one of the slides and after one or two second it shows the right amount of slides at the same time. As one image worth a million words lets take a look to the next one:

2
2.png1080×555 179 KB

The image above appears for just the first two seconds. After that time the image below appears:
1
1.png1080×555 412 KB

As i have my slides options like {‘autoplay’: false, ‘slidesPerView’: 2.5} it should show the second image right away.

I tought that maybe this is a performance problem, too many things happening at the same time, but after removing almost everything the problem persists.

2

Can you please provide access to a repository containing a minimal complete reproduction case?

3

For example if you do this:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage implements OnInit {
	private algo;

	constructor() { }

	ngOnInit() {
		this.algo = [{"summary":"They feature Vault Boy, Power Armor and Perk Cards.","title":"                  'Fallout 76' gets glow-in-the-dark postage stamps in the UK and Europe              ","external_article":true,"tags":"av bethesda fallout fallout76 gaming merchandise","thumbnail":"https://o.aolcdn.com/images/dims?resize=810%2C455&crop=810%2C455%2C0%2C0&quality=80&image_uri=https%3A%2F%2Fo.aolcdn.com%2Fimages%2Fdims%3Fcrop%3D890%252C606%252C0%252C0%26quality%3D85%26format%3Djpg%26resize%3D1600%252C1089%26image_uri%3Dhttps%253A%252F%252Fs.yimg.com%252Fos%252Fcreatr-uploaded-images%252F2018-11%252Fc0f3ab40-e355-11e8-8aab-e53d6d21b3cc%26client%3Da1acac3e1b3290917d92%26signature%3Df261c3e5094660130b56973b6fe12394d4ca851b&client=amp-blogside-v2&signature=4bcd9c5eda7c95eedccdfeda16d5433af083f74b","source":"Engadget","authors":"saqib shah/","url":"https://www.engadget.com/2018/11/08/fallout-76-postage-stamps/","date":"2018-11-08T15:19:02.823Z"},{"summary":" We are almost at the end of the week, let's share one burst of inspiration roundup, calling it: Pure Inspiration. We have our UI Inspiration but this one is more scattered. We are not trying to be focused but sharing a series of images from UI interactions, photography, illustration, graphic design and so on.","title":"Pure Inspiration: A roundup Yi Li, Michal Kmeť and more","external_article":true,"tags":"pure inspiration inspiration digital art","thumbnail":"http://abduzeedo.com/sites/default/files/styles/home_cover/public/originals/interface.png?itok=luu2-Jay","source":"Abduzeedo","authors":"François Hoang","url":"http://abduzeedo.com/pure-inspiration-roundup-yi-li-michal-kmet-and-more","date":"2018-11-08T00:00:00Z"},{"summary":"Black Friday and Cyber Monday are coming for 2018 - here's everything you need to know as a creator, including how to find the best deals on creative tech, design software and more this weekend.","title":"Black Friday 2018: When is it and what artists and designers can expect this year","external_article":true,"tags":"\nNews\n","thumbnail":"https://cdn4.digitalartsonline.co.uk/cmsdata/features/3686417/black-friday-homepage_thumb336.png","source":"Digital Arts","authors":"Giacomo Lee","url":"http://mobile.digitalartsonline.co.uk/news/creative-software/black-friday-2018-when-is-it-what-artists-designers-can-expect-this-year/","date":"2018-11-08T00:00:00Z"},{"summary":"Harley-Davidson has launched its first electric motorcycle, the LiveWire, which is set to go on sale in 2019.","title":"Harley-Davidson debuts motorcycle \"that just happens to be electric\"","external_article":true,"tags":"Design","thumbnail":"https://static.dezeen.com/uploads/2018/11/harley-davidson-electric-motorcyle-livewire_dezeen_1704_hero23.jpg","source":"Dezeen","authors":"Rima Sabina Aouf","url":"https://www.dezeen.com/2018/11/08/harley-davidson-first-electric-motorcycle-livewire/","date":"2018-11-08T00:00:00Z"},{"summary":"Can Marketing Save Lives? at the Museum of Brands demonstrates how attitudes have shifted alongside the campaigns designed to change and moderate people’s behaviour","title":"Exhibition reveals evolving public health campaigns on smoking, sexual health and more","external_article":true,"tags":"\nReviews ","thumbnail":"https://s3-eu-central-1.amazonaws.com/centaur-wp/designweek/prod/content/uploads/2018/11/07135948/Z1PLrgmw.jpg","source":"Design Week","authors":"Alina Polianskaya","url":"https://www.designweek.co.uk/issues/5-11-november-2018/public-health-campaigns-exhibition-shows-from-past-century-shows-how-m/","date":"2018-11-07T15:13:45Z"}];
	}
}

and

<ion-content padding>
	<ion-slides [options]="{'autoplay': false, 'slidesPerView': 2.5}" scrollbar="true">
		<ion-slide *ngFor="let a of algo">
			<ion-img [src]="a.thumbnail"></ion-img>
			<h1 class="featured-title">{{a.title}}</h1>
		</ion-slide>
	</ion-slides>
</ion-content>

It happends for a brief period of time

4

What I meant is “something where I can type git clone blahblah; cd blahblah; npm i; ionic serve and be able to reproduce the situation”.

5

Sorry, here you have…

6

Thanks for taking the time to make that. Unfortunately (?) it builds and looks just fine in my environment. All slides seem to appear as soon as the app starts. Is it possible that the way algo is initialized in this sample app is different from how it is being initialized in the real project?

7

I just tried the app in “ionic serve -l” and the problem is there but for just a moment, very quickly. But if i run it in a device is longer

8

Do you think #15519 might be related?

9

the scrollbar="true" seems to be the problem, if you remove the attribute it works aka your goal is achieved.

not sure if it’s actually an Ionic problem, because if you don’t use the attribute scrollbar bur rather set this in the options object it doesn’t seems to work as you would except neither (or sometimes it works sometimes not)

10

<ion-slides [options]="{‘autoplay’: false, ‘slidesPerView’: 2.5}" scrollbar=“true” pager=“true”>

try this pager="true"

13

@rapropos
I don’t think so, it’s a different problem but seems like it’s a little bit broken.

@yashwanth493
Hi, it doesn’t solve the problem

@reedrichards
Hi, even if i remove it doens’t solve the problem

14

Hi pabloo87
I have the same problem in my Ionic Project. It seems to be the slidesPerView-option.
When the Component with the slides gets active the slidesPerView-option has its default value 1. one moment later ionic overrides it with your value but at first it shows the slides with slidesPerView=1

15

The only workaround i found is to set the opacity of the slides to 0 and when the slides are fully initialized set the opacity to 1.

16

I had the same problem and I think finally came across with a possible workaround.
On my html I use:

<ion-slides [slidesPerView]="3">   <---- for example
        <ion-slide *ngFor="s of slides">
            <...></...>
</ion-slides>

Then on your css you could do something like this:

ion-slide    {
            padding-right: 16px;    <----- to separe each ion-slide
            width: calc((ionSlidesVisibleWidthOnScreen) / 3) !important;  <---- to set the number of ion-slides visible
}

It is important to match the slidesPerView value on the html with the value used on the css to divide the ionSlidesVisibleWidthOnScreen. This way scrolling won’t mess up.

Hope it helps somebody

17