Issues with nguCarousel slider functionality when interacting with touch gestures, specifically without utilizing the previous or next buttons in an

I am facing an issue with the ngu-carousel I have implemented. There are over 100 data items, and when a user tries to slide using touch, it is not moving smoothly. I would like to disable the next and prev buttons since the mobile screen size is small.

myapp.ts file

 this.carouselOne = {
      grid: { xs: 2, sm: 2, md: 3, lg: 4, xl: 6, all: 0 },
      slide: 2,
      speed: 400,
      interval: 4000,
      point: {
        visible: true
      },
      load: 2,
      touch: true,
      custom: "banner"
    };

myapp.html

<div class="card-block-carousel" #carouselContainer id="carouselContainer">
    <div [@cardToggle]="cardToggle" class="overflowvis">
      <ngu-carousel [inputs]="carouselOne">
        <ngu-item *ngFor="let freebie of data">
           
          /// my card divs here

        </ngu-item>
      </ngu-carousel>
    </div>

I have created a sample code on SlackBlitz to demonstrate the issue. If you check the slider with touch functionality, it does not work smoothly (https://stackblitz.com/edit/ngu-carousel-demo-jn8laf?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fsimple%2Fsimple.component.ts,src%2Fapp%2Fsimple%2Fsimple.component.html)

I would appreciate any suggestions on how to resolve this issue.

angulartypescriptngu-carousel

Answer №1

After reviewing your project on stackblitz, I noticed that you are currently using carousel version 1.5.2 which is quite outdated. The latest version available is 7.0.0. It would be beneficial for you to upgrade to the latest version and then implement the following code:

NguCarouselConfig = {
    point: {
      visible: false
    },
    touch: true,
  };

However, if upgrading is not an option for you, you can address this issue using CSS with the following code:

@media (max-width: 600px) {
  .myPoint {
    display: none;
  }
}

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

Manipulating the HTML host using Angular 2 directives

I need help with Angular 2 as I want to create a directive that can modify the behavior of its host HTML element. Specifically, I am looking for an InnerDirective with selector '[inner-directive]' so that: @Component({ selector: &a ...

angularangular2-templateangular2-directives

What is the necessity behind keeping makeStyles and createStyles separate in Material UI with TypeScript?

Dealing with TypeScript issues in Material UI has been a frequent task for me, and I find it frustrating that styling components requires combining two different functions to create a hook every time. While I could use a snippet to simplify the process, it ...

typescriptmaterial-ui

The email input should be the same red color as the other inputs, but unfortunately it is

When I enter the email address with first name and last name, it shows as invalid. However, the color on the CSS does not match. I am confused about why there is a difference between the two. I tried changing the type of email to text, but still no luck. ...

angularformsreactiveangular-custom-validators

Transforming JSON response observable into an array of Angular objects (written in Typescript)

My current setup involves a service API that retrieves data from Django-REST. The JSON output is structured as follows: [ { "manufacturer": "Mfg", "model": "Model", }, { "manufacturer": "Mfg2", "model": "Model2", } ] The service API funct ...

djangoangulardjango-rest-framework

Exploring the capabilities of nested reactive forms in Angular 5 with observables

I'm working with a reactive form set up like this: <form *ngIf="people$ | async;" [formGroup]="applicationForm" (ngSubmit)="submitForm()"> <person-form [parentForm]="applicationForm" (added)="addPerson()" (removed)="removePers ...

angularobservableangular-reactive-forms

Generic Typescript Placeholder Design

Imagine you have the following data: const dataA = { name: "John", age: 25, attributes: {specificA: "hello", specificA2: 14, nonspecific:"Well"}, } const dataB = { name: "Lisa", age: 38, attributes: {spe ...

typescriptgenericstypescript-generics

The parameters provided in TypeScript do not align with any signature of the call target

In JavaScript, a function can be called with any number of parameters. If a parameter is not passed, it will default to undefined without causing an error. Below is a code snippet for reference: function test(a,b){ if(b){console.log(b)} else{console ...

angulartypescript

Contrary to GraphQLNonNull

I am currently working on implementing GraphQL and I have encountered a problem. Here is an example of the code I wrote for GraphQL: export const menuItemDataType = new GraphQL.GraphQLObjectType({ name: 'MenuItemData', fields: () => ...

node.jstypescriptgraphql

Incorporating TypeScript into a project that already contains .js files

I currently have a NodeJS project with .js files written in ES6. I am interested in integrating typescript into this existing project. What steps should I follow? Can I simply introduce .ts files within the same directory structure? One issue I have encou ...

node.jstypescriptecmascript-6

New substitute for extending the extent in OpenLayers 4

I am currently in the process of migrating my code from OpenLayers 3 to OpenLayers 4 using TypeScript. Previously, I had a code snippet that extended the extent of my map so that all vector shapes I drew would be visible upon loading... angular.forEach(w ...

angulartypescriptopenlayersopenlayers-3openlayers-5

Why is the navbar not visible on the outcome?

Working with angular 15.0.0 has presented a challenge for me I am unable to see the navbar, only the Recipe Book is visible Take a look at the code snippet below: <nav class = "navbar navbar-default"> <div class="container-fluid ...

angularbootstrap-modalnavbar

Finding the value of an item within a JSON sub-array based on the most recent date that falls within a specified timeframe

I am currently developing a billing application using Angular. The items array that I am working with is structured like this (showing only one item here):- items: [{ _id: "5ee2298f59ce2e1747cb5539" createdAt: "2020-06-11T ...

javascriptarraysjsonangular

The React application, when built using `npm run build`, experiences difficulty loading image sources after deployment to App Engine

In my React frontend application, I have the logo.png file being loaded in Header.tsx as an img element like this: <img className={classes.headerLogo} src={'logo.png'} alt={"MY_LOGO"}/> The directory structure looks lik ...

reactjstypescriptgoogle-app-enginenpmwebpack

Sort elements based on an array of specified keys

Picture a scenario where you have an interface like this: interface Person { name: string; age: number; height: number; } Now, imagine having a function that accepts an array of keys from the interface and returns an object with only those spe ...

typescript

In order to use the serve command, it is necessary to run it within an Angular project. However, if a project definition cannot be located

An error occurred while running the ng serve command: C:\Mysystem\Programs\myfwms>ng serve The serve command needs to be executed within an Angular project, but a project definition could not be found. I encounter this error when ...

javascriptnode.jsangulartypescriptangular8

What is the best way to position the card header and footer to display at the top and bottom of the vertical space?

I am attempting to designate a card as the main display container within a 'sidenav', like the example below: <div class="content-container" width="100%" height="100%" > <nav class="sidenav clr-flex-fill clr-flex-column clr-align-con ...

angularvmware-clarity

Unable to retrieve a value from an Angular EventEmitter

Is there a way to retrieve the result of a method call between components using an EventEmitter? While I understand that there are more efficient methods such as calling the method from a service directly, my situation requires me to utilize the base compo ...

javascriptangularrxjsobservable

What are the recommended guidelines for utilizing the private keyword?

While reviewing our React codebase, I've noticed that almost every function within all components has the private keyword in front of it. Specifically, this pattern is present in class components, such as: private componentDidMount() { this.props.o ...

reactjstypescriptprivate

Creating an interactive webpage with Javascript and HTML

I'm facing a challenge with my component setup, which is structured as follows: import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ ...

javascripthtmlangular

Setting text in a datetime picker with ngx-mat-datetime-picker in an Angular application is a straightforward process

I've been utilizing the ngx-mat-datetime-picker library from angular-material-components to enable datetime selection. It's functioning effectively, but I'm searching for a way to insert text preceding the hour and minute inputs, such as &ap ...

angulartypescriptangular-materialangular-daterangepicker