<div class="reviews-header center">
    <h2>Благодарности</h2>
</div>

<swiper-container #desktopSwiper  class="desktop" slides-per-view="2" space-between="30" keyboard="true" mousewheel="true" pagination-enabled="true" pagination-type="fraction" pagination-el=".reviews-navigation-counter" navigation-next-el=".reviews-button-next" navigation-prev-el=".reviews-button-prev"  [loop]="true">
    <swiper-slide   *ngFor="let rev of reviews">
        <div class="reviews">
            <div class="reviews-img">
                <img [src]="rev.img"  (click)="select(rev.img)">
            </div>
            <div class="reviews-text">
                <h5>{{rev.header}}</h5>
                <div>{{rev.txt}}</div>
                <div class="reviews-author">{{rev.name}}</div>
                <div class="reviews-post">{{rev.post}}</div>
            </div>
        </div>
    </swiper-slide>    
</swiper-container>

<swiper-container #mobileSwiper class="mobile" (swiperslidechange)="onSlideChange($event)" pagination-enabled="true" pagination-type="fraction" pagination-el=".reviews-navigation-counter" navigation-next-el=".reviews-button-next" keyboard="true" mousewheel="true" navigation-next-el=".reviews-button-next" navigation-prev-el=".reviews-button-prev" [loop]="true" speed="500" autoplay.delay="2500" autoplay.disableOnInteraction="true">
    <swiper-slide swiperSlide *ngFor="let rev of reviews; let i = index;">
        <div class="reviews">
            <div class="reviews-img">
                <img [src]="rev.img"  (click)="select(rev.img)">
            </div>
            <div class="reviews-text">
            </div>
        </div>
    </swiper-slide> 
</swiper-container>


<div class="reviews-navigation">
    <button class="reviews-button-prev">
        <svg>
            <use href="assets/ico/chevron_left_big_24.svg#ico"></use>
        </svg>
    </button>
    <div class="reviews-navigation-counter"></div>
    <button class="reviews-button-next">
        <svg>
            <use href="assets/ico/chevron_right_big_24.svg#ico"></use>
        </svg>
    </button>
</div>

<swiper-container class="mobile" #mobileText slides-per-view="1" space-between="30" keyboard="false" mousewheel="false" speed="0" allow-touch-move (swiperinit)="onSwiperInit()" >
    <swiper-slide swiperSlide *ngFor="let rev of reviews; let i = index;">
        <div class="reviews">
            <div class="reviews-text">
                <h5>{{rev.header}}</h5>
                <div>{{rev.txt}}</div>
                <div class="reviews-author">{{rev.name}}</div>
                <div class="reviews-post">{{rev.post}}</div>
            </div>
        </div>
    </swiper-slide>
</swiper-container>

<div *ngIf="img" class="reviews-select" (click)="img=null">
    <img [src]="img" alt="">
</div>