title: How to detect a click on a slide in Swiper?
body: <p>I have an Angular 2 component which contains a slider from the Swiper package. I want to know which slide (its index) I have clicked on. Trying to follow <a href="http://idangero.us/swiper/api/#events" rel="nofollow noreferrer">Swiper documentation</a> I have this:</p>
  
  <pre><code>import { Component, AfterViewInit } from "@angular/core";
  import Swiper from "swiper";
  
  @Component({
      selector: "challenges",
      templateUrl: "challenges.component.html"
  })
  export class ChallengesComponent implements AfterViewInit {
      public mySwiper: Swiper;
      public slides = [
          "https://via.placeholder.com/300x200/",
          "https://via.placeholder.com/300x200/",
          "https://via.placeholder.com/300x200/"
      ];
  
      constructor() { }
  
      public ngAfterViewInit() {
          this.mySwiper = new Swiper(".swiper-container", {
              slidesPerView: 3,
              spaceBetween: 30,
              pagination: {
                  el: ".swiper-pagination",
                  type: "bullets",
                  clickable: true
              },
              on: {
                  click: function(){
                      console.log(this.mySwiper.clickedSlide);
                  }
          }
          });
      }
  }
  </code></pre>
  
  <p>The problem is that if I click on one slide, it gives me this error <code>this.mySwiper is undefined</code>. Why, if <code>this.mySwiper</code> is a class member?</p>