[Owl Carousel - Place dots inside owl-nav] #owl #carousel

site.js

('.owl-carousel-block .owl-nav button:first-of-type').after(myDate);

// this makes it easier to style/position owl-pagination
// examples: https://www.accelaschool.com/what-is-it/ 

style.scss

// add to scss
 
 
#owl-carousel-block {

  .item {
    display: flex;
    flex-direction: column;

    @include breakpoint($bp-med) {
      flex-direction: row;
      align-items: center;
    }
    .content {
      margin: 0 0 20px 0;
      @include breakpoint($bp-med) {
        flex: 1; /* additionally, equal width */
        width: 50%;
        padding: 0 40px 0 0;
        margin: 0;
      }
    }
    .image {

      @include breakpoint($bp-med) {
        flex: 1; /* additionally, equal width */
        width: 50%;
      }
    }
  } // end item

  .owl-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0 0;

    @include breakpoint($bp-med) {
      margin: 60px 0 0 0;
    }

    .owl-prev, .owl-next {
      position: relative;
      top: auto;
      right: auto;
      left: auto;
      transform: none;
      &:focus {
        outline: none;
      }
    }
    .owl-dots {
      display: flex;
      align-items: center;
      position: relative;
      bottom: auto;
      left: auto;
      margin: 0;
      transform: none;
      background: none;
      padding: 0;
      margin: 0 5px;
      .owl-dot {
        background: none;
        margin: 0;
        &.active {

          span {
            background: blue;
          }
        }
        &:hover {

          span {
            background: yellow;
          }
        }
        &:focus {
          outline: none;
        }
      } // end owl-dot
    }
  } // end owl-nav

} // end owl-carousel-block