Autoplay feature on Ionic 3 dynamic image slider pauses when manually sliding images

When I retrieve image slider data from a provider's REST API, the autoplay feature works perfectly. However, after manually sliding through the images, the autoplay function stops working. When I try to use ionViewDidEnter(), it triggers an error...

In my .ts file, the code is as follows:

import {Slides } from 'ionic-angular';
.
.
.
export class DemoPage {
.
.
.
@ViewChild(Slides) slides: Slides; 
.
.
.
allslider: any;
.
.
constructor(public navCtrl: NavController, public navParams: NavParams,public popoverCtrl: PopoverController,public demoapiService: DemoApiProvider)   
{    
this.imgSlider();    
} 

imgSlider() { 
this.demoapiService.getImgSlider()  
.then(myslide => { 
this.allslider= myslide ;   
});  
}

ionViewDidEnter() 
{
// this.slides.autoplayDisableOnInteraction = false;
// when used above statement then error is generated
}

My .html file looks like this:

<ion-slides class="slide-css"   #slides *ngIf="allslider && allslider.length" [autoplay]="2000" [speed]="500" [loop]="true" pager>
<ion-slide   *ngFor="let slide of allslider ">            
<img src="http://localhost:8000/{{slide.img}}" />
</ion-slide>
</ion-slides>

For more information, check out ionic 3 image slider stops autoplay after manual sliding

Answer №1

To avoid using it inside the constructor() because the DOM is not fully created at that point.

You should remove this.imgSlider();

 constructor()   
  {    
     //this.imgSlider();<--- it needs to be removed and used inside the `ionViewDidEnter()` event.
  }

Modify like this:

 ionViewDidEnter() 
    {
      this.imgSlider();
    }

 imgSlider() { 
    this.demoapiService.getImgSlider()  
    .then(myslide => { 
       this.allslider= myslide ;   
       this.slides.autoplayDisableOnInteraction = false;
      });  
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Unlocking the Power of Ionic: A Guide to Detecting Status 302 URL Redirects

Trying to handle a http.post() request that results in a 302 redirect, but struggling to extract the redirected URL. Any tips on how to achieve this? Appreciate any help. ...

Issue with jsPDF: PNG file is either incomplete or corrupted

I'm encountering an issue while attempting to pass Image data to the addImage function. I have tried downgrading the versions of jspdf and html2canvas, as well as experimenting with different ways to import the two libraries, but the problem still per ...

Toggle visibility between 2 distinct Angular components

In my application, I have a Parent component that contains two different child components: inquiryForm and inquiryResponse. In certain situations, I need to toggle the visibility of these components based on specific conditions: If a user clicks the subm ...

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

Customize the background color of a popup modal except for one element

After much searching without finding a solution, I am reaching out here for help. Whenever I click on a Bootstrap modal, a popup appears with a background color and CSS applied. My issue is that I want to prevent the Bootstrap modal from applying the backg ...

Steps for displaying a new event on a fullCalendar

Utilizing fullCalendar to display a list of events in the following manner: this.appointments = [{ title: "Appointment 1", date: "2020-09-06", allDay: false }, { title: "Appointment 2", date: "2020 ...

What is the reasoning behind TypeScript's decision to permit implicit downcasting in method parameters?

Consider the following example: interface Vehicle{ mass:number } interface InspectorClass{ inspect(v:Vehicle):void } class Car implements Vehicle{ mass = 2000 wheels = 4 } class Boat implements Vehicle{ mass = 3000 sails = 2 } ...

Exploring the concept of kleisli composition in TypeScript by combining Promise monad with functional programming techniques using fp-ts

Is there a way to combine two kleisli arrows (functions) f: A -> Promise B and g: B -> Promise C into h: A -> Promise C using the library fp-ts? Having experience with Haskell, I would formulate it as: How can I achieve the equivalent of the > ...

The quantity of elements remains constant in the EventEmitter

The Grid component is structured as follows: export class GridComponent { @Output('modelChanged') modelChangedEmitter = new EventEmitter(); private valueChanged(newValue: any, item: Object, prop: string) { item[prop] = newValue; ...

Module '.tmp/Rx.min.js' could not be located

My system runs on Ubuntu os version 16.04 with Node v6.6.0 and Npm 3.10.3. I'm currently setting up a project with gulp, but encountering a common issue: Error Message: Cannot find module '.tmp/Rx.min.js' When running the command below to ...

Utilizing a created OpenAPI client within a React application

Using the command openapi-generator-cli generate -i https://linktomybackendswagger/swagger.json -g typescript-axios -o src/components/api --additional-properties=supportsES6=true, I have successfully generated my API client. However, despite having all th ...

Is it possible to utilize a FOR loop in TypeScript to store an array in a variable?

Hey there pals! I could really use your brain power for a solution that requires some context. Our array ress is limited to items that meet a certain condition. After filtering the array, I need to store the new results in a different variable. I' ...

Issue with Angular 2: Not receiving events when subscribing to a service's Subject property

Presented below is a service: @Injectable() export class AuthService { public reset: Subject<any>; constructor() { this.reset = new Subject(); } public logout() { this.reset.next('logout'); } } Here is an additional s ...

I'm struggling to set up break points in both my Angular application and library within VSCode. I can only seem to get them working in either one or the other, but not both

My goal is to enable debugging in vscode for both my Angular 16 application and my library at the same time. The file structure looks like this: ./root ./root/my-app/src ./root/lib/projects/my-lib I have successfully added my lib to the app's pr ...

The declaration of 'exports' is not recognized within the ES module scope

I started a new nest js project using the command below. nest new project-name Then, I tried to import the following module from nuxt3: import { ViteBuildContext, ViteOptions, bundle } from '@nuxt/vite-builder-edge'; However, I encountered th ...

Using Typescript: Undefined arrays could cause issues in the array map function

Encountering a Typescript error stating that '<array name>' is possibly undefined while attempting to map over an array in Typescript. Below is an example code snippet triggering this issue: type obj = { list?: string[] }; function dem ...

Edge is experiencing a slowdown when utilizing ng-bind-html

I've been using ng-bind-html to bind HTML content to a div element. However, when I attempt to bind larger amounts of HTML, it can take around 5-6 seconds for the content to load. Interestingly, this issue seems to only occur in Chrome browser. I have ...

Is it true that "Conditional types" are not compatible with actual functions?

Checking out https://www.typescriptlang.org/docs/handbook/2/conditional-types.html I'm curious as to why this code is not functioning properly? interface IdLabel { id: number } interface NameLabel { name: string } type NameOrId<T extends num ...

Difficulty arises when attempting to load Silverlight within an Angular2 component

Issue with Silverlight Component Loading When embedding and loading the Silverlight.xap file directly inside an HTML page, everything works perfectly. However, when we move the same code inside a component, the Silverlight content fails to load. Interest ...

What is the best way to categorize a collection of objects within a string based on their distinct properties?

I am working with an array of hundreds of objects in JavaScript, each object follows this structure : object1 = { objectClass : Car, parentClass : Vehicle, name : BMW } object2 = { objectClass : Bicycle, parentClass : Vehicle, name : Giant } object3 = { ob ...