Can someone guide me on creating a slideshow using Ionic?

Having trouble integrating a javascript/css slideshow into Ionic.

Ionic does not support the use of ".style" in elements. Need assistance, below is the code:

<head>
<title>Slideshow</title>
<style>
.slides {display:none;}
</style>
</head>

The above code hides all media items. The following code displays and hides media items:

<body>

<h2 class="center">Automatic Slideshow</h2>

<div class="content section" style="max-width:500px">
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/336d5ebc5436534e61d16e63ddfca3272007281.jpg" style="width:100%">
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/03c7c0ace395d80182db07ae2c30f0342007221.png" style="width:100%">
  <video class="slides" playsinline="playsinline" style="width:100%" autoplay muted webkit-playsinline preload="auto">
  <source src="http://localhost/ads/dashboard/uploads/slides/0d43283ccf9d9d6d3a213f5e742425032010261232321.mp4" type="video/mp4">
  </video>
  <video class="slides" playsinline="playsinline" style="width:100%" autoplay muted webkit-playsinline preload="auto">
  <source src="http://localhost/ads/dashboard/uploads/slides/838c0f8d4f2ea2a687935d8546d54c302010261232321.mp4" type="video/mp4">
  </video>
  <img class="slides" src="http://localhost/ads/dashboard/uploads/slides/8277e0910d750195b448797616e091ad2007281.png" style="width:100%">
</div>

Below is the Javascript code that rotates each media item every 10 seconds:

<script>
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("slides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}    
  x[myIndex-1].style.display = "block"; 
  setTimeout(carousel, 10000); 
}
</script>
angulartypescriptionic-frameworkionic4

Answer №1

Utilize the following code to set up a slideshow using Angular:

//Assign #slides as the id for the wrapper containing child divs generated by *ngFor.

*ngFor="let img of images" 
var x = document.getElementsByClassName("slides");
for(i = 0; i < x.length; i++) {
x[i].style.display = "none";  
}

//Initialize slideIndex to 1 when starting the slideshow

showDivs(slideIndex += n);
enter code here

//Reset all images to null and only display the image at specified slide index

x[slideIndex - 1].style.display = "block";

//To enable slideshow functionality, click on the right or left arrow buttons //Only one image will be shown at a time

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

Error encountered in Angular/Ramda while using mapAccum with an array of objects in Typescript

I am having difficulties implementing Ramda in an Angular 6 / TypeScript environment. "ramda": "^0.25.0", "@types/ramda": "^0.25.24" This is how I have started: const addP = (p1,p2) => ({ x: p1.x+p2.x,y: p1.y+p2.y }); const accum = (a,b) => [add ...

angulartypescriptramda.js

Is it possible to define a namespaced external module in TypeScript?

Currently, I am dealing with some legacy js modules that are either namespaced on window or define'd if the page is using AMD. Here's an example: // foo/bar.js (function (root, factory) { if (typeof define === "function" && define.am ...

typescriptamd

Module ‘gulp’ could not be located

Whenever I try to execute the ionic build android command, it keeps showing me an error message: WARNING: ionic.project has been updated to ionic.config.json, so you need to rename it. Oops! It seems like there's a missing module in your gulpfile: Mo ...

androidnode.jsionic-frameworknpmgulp

Startling error: Our node server.js running into an unexpected token

I'm attempting to follow the Angular Universal quickstart, but I encountered an error when running "node server.js". Emily's-MBP:vepo Emily$ node server.js /Users/Emily/Development/vepo/server.js:3 import 'angular2-universal/polyfills&apos ...

node.jsangularangular-universal

Having trouble getting the ionic lib update command line to work properly?

My current situation: $ionic lib update you sure you want to replace D:\Projects\cda-volunteer\www\lib\ionic with an updated version of Ionic? (yes/no): yes Unable to receive version data Here's my ionic info: Cordova ...

angularjscordovaionic-frameworknpm

Definition in Typescript: The term "value is" refers to a function that takes in any number of arguments of

export function isFunction(value: any): value is (...args: any[]) => any { return typeof value === 'function'; } What is the reason behind using value is (...args: any[]) => any instead of boolean ? ...

javascripttypescript

How is babel-loader / tsc compiler able to distinguish between importing a package for its types only and for its functionalities?

Currently, I am integrating Typescript into my project. During this process, I made an interesting discovery. In the App.tsx file below, you will notice that I needed to use import firebase from "firebase/app" in order to access the firebase.ap ...

typescriptfirebasewebpacktsc

New options for outdated Webpack i18n plugin and loader

I am currently working on a TypeScript project that requires loading translations from individual .json files assigned to each country. For instance, we would have separate language files like en.json, es.json. The goal is to be able to access these trans ...

javascripttypescriptwebpackinternationalization

How can I make sure the page scrolls to the top when navigating from one component to another in Angular 4 (now 5)?

Recently, I've encountered a problem with routing in my Angular 5 project. My CLI version is 1.5.2. The issue arises when transitioning from one route to another. If I scroll down on the page and then navigate back to the previous route, the page rem ...

angularangular5

Maintain the nullability of object fields when casting

I have been working on a type called DateToNumber that converts all the Date properties of an object to number. Here is what I have come up with so far: type LiteralDateToNumber<T> = T extends Date ? number : T extends Date | null ? number | nu ...

typescripttypescastingtypescript-generics

Removing the AM and PM from OwlDateTime in Angular is simple since the time format is already in 24-hour time

Using OwlDateTime in a 24-hour format: <div *ngIf="isSchedule" class="form-inline"> <label style='margin-right:5px ;margin-left:210px'> Date Time: <input [owlDateTimeTrigger]="dt" [owlDateTime]="dt" class="form-control" placeh ...

angulartypescript

Implementing a click event on an image in an Angular 4 application

I'm facing an issue with adding a click event to an image within an Angular component. I have tried the following code: <img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> However, this approach does not seem to work as ...

htmlcssangular

What are the advantages of utilizing the HttpParams object for integrating query parameters into angular requests?

After exploring different ways to include query parameters in HTTP requests using Angular, I found two methods but struggled to determine which one would be the most suitable for my application. Option 1 involves appending the query parameters directly to ...

javascriptangulartypescriptangular-httpclient

Creating components with the viewContainerRef in Angular2 is functioning as expected

When attempting to load a dynamic component into the root component using viewContainerRef.createComponent, I encountered an issue where it appended to the wrong place. https://i.stack.imgur.com/lF1yT.png Here is my code: -----app.compoment.ts----- exp ...

angulartypescriptangular2-services

Issue with the code: Only arrays and iterable objects are permitted in Angular 7

Trying to display some JSON data, but encountering the following error: Error Message: Error trying to diff 'Leanne Graham'. Only arrays and iterables are allowed Below is the code snippet: The Data {id: 1, name: "Leanne Graham"} app.compone ...

angulartypescript

Guide on navigating to a specific page with ngx-bootstrap pagination

Is there a way to navigate to a specific page using ngx-bootstrap pagination by entering the page number into an input field? Check out this code snippet: ***Template:*** <div class="row"> <div class="col-xs-12 col-12"> ...

htmlcssangulartypescriptreact-native

Angular and the challenges of connecting Facebook OAuth due to CORS problem

In my API, I have implemented OAuth login and callback methods for popular platforms such as Facebook, Google, and Twitter. The API is built using Express.js framework and it runs on port 3000. Meanwhile, I also have an Angular 2 application running on p ...

angularoauthcorscross-origin-read-blocking

Learn the steps to access various file formats including doc, ppt, xlsx, pdf, jpg, and png using the Ionic native file opener

I am currently working on a Hybrid app using Ionic. My goal is to be able to open various types of files (doc, ppt, xlsx, pdf, jpg, png) from the device's internal or external storage using the Ionic Native File Opener plugin. However, I have only bee ...

angularfileionic3

Collaborate on an Angular2 codebase for both a web application and a hybrid application

I am considering creating a mobile app based on my existing Angular2 web app codebase. After researching, I have found two possible options - Ionic2 and NativeScript. Upon further investigation, it appears that both Ionic2 and NativeScript have their own ...

angularionic2nativescript

Using NextJS's API routes to implement Spotify's authorization flow results in a CORS error

I am currently in the process of setting up the login flow within NextJS by referring to the guidelines provided in the Spotify SDK API Tutorial. This involves utilizing NextJS's api routes. To handle this, I've created two handlers: api/login.t ...

node.jsreactjstypescriptredirectnext.js