Нажимаем прокрутить div горизонтально в угловую 6 - PullRequest
Новая
       76

Нажимаем прокрутить div горизонтально в угловую 6

0 голосов
/ 08 июля 2019

Я использую Angular 6 и загрузочный фреймворк для CSS. Я хочу прокручивать div по горизонтали при нажатии на левую / правую кнопки.

Я хочу прокрутить нижеприведенный раздел, названия глав могут содержать одну главу или более 1, т.е. 1-10 глав. Как добиться горизонтальной прокрутки по нажатию кнопок со стрелками вправо и влево. 

<div style="margin-top:52px;" *ngFor="let chapter of chapters; let i = index" >
<li style="display: inline-block;float: left; padding: 0px 30px 0px 0px;"> chapter.name </li>
</div>

Для справки, в приведенном ниже примере у нас есть названия фильмов с изображением. я использую только текст,

enter image description here

мой текущий пользовательский интерфейс выглядит так, как показано ниже, и мне нужно добиться этого с помощью функции прокрутки события щелчка,

enter image description here

1 Ответ

0 голосов
/ 09 июля 2019

То, что вы ищете, это карусель ... со стрелками для эффекта прокрутки, к которому вы стремитесь:

релевантно HTML : 

<div class='containerDiv'>
    <carousel [itemsPerSlide]="itemsPerSlide" [singleSlideOffset]="singleSlideOffset" [showIndicators]="false" [noWrap]="!noWrap"
     [interval]="false" [startFromIndex]="0" (slideRangeChange)="onSlideRangeChange($event)">
        <slide *ngFor="let slide of slides; let index=index">
            <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <p>some optional text {{index}}</p>
    </div>
  </slide>
</carousel>
</div>

релевантно TS : 

import { Component } from '@angular/core';

@Component({
  selector: 'demo-carousel-multilist',
  templateUrl: './multilist.html',
  styles: [`
  ::ng-deep a.carousel-control-prev, a.carousel-control-prev:hover {left:-7% !important;}
  ::ng-deep .carousel-control-next, .carousel-control-next:hover {right:-8% !important;}
  slide{margin:5px;}
  .carousel-caption{position:relative; text-align: center; padding: 15px 0 0 0; bottom: 0;}
  `]
})
export class DemoCarouselMultilistComponent {
  itemsPerSlide = 4;
  singleSlideOffset = false;
  noWrap = false;

  slidesChangeMessage = '';

  slides = [
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/3.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/4.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/5.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/6.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/7.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/8.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/1.jpg'},
    {image: 'https://valor-software.com/ngx-bootstrap/assets/images/nature/2.jpg'}
  ];

  onSlideRangeChange(indexes: number[]): void {
    this.slidesChangeMessage = `Slides have been switched: ${indexes}`;
  }
}

завершено здесь работает стек стека

...