Cacher is the code snippet organizer for pro developers

div.slider
  div.slides
    - for (let i = 1; i <= 3; i++)
      div.slide
        img(src='https://placehold.jp/600x300.png' alt!='')
  div.slider-paginations
    - for (let i = 1; i <= 3; i++)
      span(class=i == 1 ? 'is-selected' : '')
  div.slider-button-prev
    svg.icon-arrow.left.hover-opacity(viewBox='0 0 6.25 9.5')
      polyline(points='0.75 0.75 4.75 4.75 0.75 8.75')/
  div.slider-button-next
    svg.icon-arrow.hover-opacity(viewBox='0 0 6.25 9.5')
      polyline(points='0.75 0.75 4.75 4.75 0.75 8.75')/

.slider
  margin 0 auto
  overflow hidden
  position relative
  width 600px
  z-index 1

.slides
  display flex
  position relative
  size 100%
  z-index 1

.slide
  flex-shrink 0
  size 100%

  img
    size 100%

.slider-paginations
  absolute right bottom 20px left
  text-align center
  z-index 1

  span
    background #333
    border-radius 100%
    cursor pointer
    display inline-block
    font-size 0
    margin 0 5px
    size 10

    &.is-selected
      background #0bd

.slider-button-prev, .slider-button-next
  absolute top 50%
  cursor pointer
  transform translateY(-50%)
  z-index 10

  .icon-arrow
    size 40
    stroke #333
    stroke-width 2px

.slider-button-prev
  left 5px

.slider-button-next
  right 5px

<link href="https://codepen.io/futemma/pen/REpRLV" rel="stylesheet" />