<div class="wrapper">
<div class="points">
  image
            <div class="point active" data-point="1">1</div>
            <div class="point" data-point="2">2</div>
            <div class="point" data-point="3">3</div>
            <div class="point" data-point="4">4</div>
            <div class="point" data-point="5">5</div>
        </div>
   </div>

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 1</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 2</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 3</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 4</div></div>
    <div class="swiper-slide"><div class="swiper-slide-container">Slide 5</div></div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination"></div>
</div>

body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 300px;
        margin: 20px auto;
    }
    .swiper-slide {
        
    }
.swiper-slide-container {
  text-align: center;
        font-size: 18px;
        background: #fff;
  height:100%;
        max-width: 600px;
  margin:auto;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
}

.wrapper{
  display: flex;
  justify-content: center;
}
.points{
  width: 800px;
  height: 300px;
  background: white;
  position: relative;

}

.point{
   position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
}
.point:hover, .active{
  
  border: 1px solid red;

}

.point:nth-child(1){
top: 10%;
  left:20%;
}
.point:nth-child(2){
top: 50%;
  left:65%;
}
.point:nth-child(3){
top: 80%;
  left:15%;
}
.point:nth-child(4){
top: 5%;
  left:68%;
}
.point:nth-child(5){
top: 80%;
  left:50%;
}

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  slidesPerView: 1,
  centeredSlides: true,
  paginationClickable: true
});