bootstrap carousel only for mobile devices

user_8308208 0
Viewed 2570

I have question about bootstrap4 carousel. I currently have an implemented carousel for all devices, but I want it to appear with only mobile devices. On the desktop, make the photos side by side. I know I can do two containers one for the desktop and the other one with a carousel. But I would like to avoid it. All proposed solutions are for jQuery, however I am using Angular7 and I would like to avoid jQuery. 

                    <div id="demo" class="carousel slide" data-ride="carousel">

                      <!--  Indicators -->

                        <ul class="carousel-indicators">
                                <li data-target="#demo" data-slide-to="0" class="active"></li>
                                <li data-target="#demo" data-slide-to="1"></li>
                                <li data-target="#demo" data-slide-to="2"></li>
                        </ul>

                            <!--      The slideshow -->

                              <div class="carousel-inner">
                                <div class="carousel-item">
                                  <img src="img1.jpg">
                                </div>
                                <div class="carousel-item">
                                  <img src="img2.jpg">
                                </div>
                                <div class="carousel-item">
                                  <img src="img3.jpg">
                                </div>
                              </div>

                              <!-- Left and right controls -->
                              <a class="carousel-control-prev" href="#demo" data-slide="prev">
                                  <mat-icon class="prev-icon">chevron_left</mat-icon>
                                <!--<span class="carousel-control-prev-icon"></span>  --> 
                              </a>
                              <a class="carousel-control-next" href="#demo" data-slide="next">
                                      <mat-icon class="next-icon">chevron_right</mat-icon>
                              </a>

                            </div>
bootstrap-4 angular html
1 Answers
img1: string = 'img1.jpg'
img2: string = 'img2.jpg'
img3: string = 'img3.jpg'

isHandset$: Observable<boolean> = this.breakPointObserver.observe(['(max-width: 750px)'])
    .pipe(
      map(result => result.matches)
    );

  constructor(private breakPointObserver: BreakpointObserver) { }

template hide on screen less then 750px: 

<div *ngIf="!(isHandset$ | async)">

Solutions:

// this whows on 750-
<div *ngIf="(isHandset$ | async)" id="demo" class="carousel slide" data-ride="carousel">
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <div class="carousel-inner">
    <div class="carousel-item">
      <img [src]="img1">
    </div>
    <div class="carousel-item">
      <img [src]="img2">
    </div>
    <div class="carousel-item">
      <img [src]="img3">
    </div>
  </div>
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <mat-icon class="prev-icon">chevron_left</mat-icon>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <mat-icon class="next-icon">chevron_right</mat-icon>
  </a>
</div>
//this shows on 750+
<div *ngIf="!(isHandset$ | async)" class="row carousel-inner">
  <div class="col-4 carousel-item">
    <img [src]="img1">
  </div>
  <div class="col-4 carousel-item">
    <img [src]="img2">
  </div>
  <div class="col-4 carousel-item">
    <img [src]="img3">
  </div>
</div>
user_63102600
Related