Category : carousel

I wanted to add different interval for each item in mdb-carousal. I found few solution but it is jQuery based. I want solution in Typescript. <div> <mdb-carousel [interval]="1000" [isControls]="false" class="carousel slide carousel-fade" [animation]="’fade’"> <mdb-carousel-item> <!– THIS NEEDS TO BE DISPLAYED FOR 5 SECS –> <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg" alt="First slide"> </mdb-carousel-item> <mdb-carousel-item> <!– THIS NEEDS ..

Read more

I use Angular MDB Carousel (https://mdbootstrap.com/docs/angular/) in my app which shows a list of items. When a new item gets added I want the carousel to be refreshed. However, there is a rendering problem after an item has been added and the new item and the current slide overlap. How can I solve this problem? ..

Read more

I want to access data outside *ngFor <mat-carousel timings="250ms ease-in" [autoplay]="false" interval="5000" color="accent" maxWidth="93%" proportion="80" slides="3" slideHeight="100%" [loop]="false" [hideArrows]="false" [hideIndicators]="true" [useKeyboard]="false" [useMouseWheel]="false" orientation="ltr" maintainAspectRatio="false"> <mat-carousel-slide #matCarouselSlide *ngFor="let event of myvideo; let i = index" overlayColor="#00000040" [hideOverlay]="true"> <video *ngIf="event?.Video" controls style="width: 100%;"> <source src="{{event?.Video}}" type="video/mp4"> Browser not supported </video> </mat-carousel-slide> ***I want to get in this ..

Read more

I have a angular primeng carousel with tabView. But not working with this static data. Why not working? Note: used angular 4, primeng 4. <p-tabView> <p-carousel circular="circular" easing="easeOutStrong"> <ng-template> <p-tabPanel header="Header 1" [selected]="true"> Content 1 </p-tabPanel> </ng-template> <ng-template> <p-tabPanel header="Header 2"> Content 2 </p-tabPanel> </ng-template> <ng-template> <p-tabPanel header="Header 3"> Content 3 </p-tabPanel> </ng-template> </p-carousel> </p-tabView> ..

Read more

I have an issue with carousel, i need to remove gaps on the right and left side(marked on screenshot), tried with padding and margin, nothing helps:( Will appreciate any help.gaps, Carousel should touch div with text and be a bit wider on the right side @import url(‘https://fonts.googleapis.com/css2?family=Dosis&family=Lora:[email protected]&family=Raleway&display=swap’); @import url(‘https://fonts.googleapis.com/css2?family=PT+Serif&display=swap’); .carousel-inner > .carousel-item > img{ height: ..

Read more

please i want to create a dynamic carousel with nativescript-carousel view plugin. i use the following code <Carousel #carousel [items]="fiches" debug="true" height="100%" width="100%" color="red" backgroundColor="red" indicatorOffset="0, -30" indicatorColor="#fff000" finite="true" bounce="false" showIndicator="true" verticalAlignment="top" android:indicatorAnimation="DROP"> <CarouselItem height="red" backgroundColor="red" *ngFor="let item of fiches; let id=index" [id]="’slide ‘+id" verticalAlignment="center"> <GridLayout rows="*" cols="*, *"> <WebView height="100%" width="100%" [src]="item.content" (loaded)="onWvloaded($event)"> </WebView> ..

Read more

I am using this carousel. I want something like the multiple-item carousel here. I tried following this tutorial but it ends up breaking my website and causes many errors. What I have tried: <ngb-carousel *ngIf="images"> <ng-template ngbSlide> <div class="row"> <div class="item card col-md-3" *ngFor="let image of images"> <img src="{{image.picture}}" class="card-img-top" alt="…"> <div class="card-body"> <h5 class="card-title">Card ..

Read more

I have an angular app with a bootstrap carousel. Swiping on my mobile phone works when you load the site but once you navigate to some other page then swipe doesn’t work. Once you click the controls or reload the page, swipe stars to work again. It’s only when you navigate on the app then ..

Read more