[Slick Slider] using the slick slider

_slider.scss

/* change class to theme name initials - slider. change color to primary or secondary?
*/
.tf-slider {
  display: flex;
  align-items: center;
  text-align: center;

  &__circle-border {
	border: 2px solid $primary;
	border-radius: 46px;
	padding: 10px;
	display: block;
	width: 46px;
	height: 46px;
	cursor: pointer;
	color: $primary;
	transition: ease all .2s;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
	  background: $primary;
	  color: #fff;
	}
  }

  &__arrow {
	font-size: 1.25rem;
	&.fa-chevron-left {
	  padding-right: 2px;
	}
	&.fa-chevron-right {
	  padding-left: 2px;
	}
  }
}

slider.js

// used WITH slick slider installed

$('.tf-slider').slick({
			arrows: true,
			infinite: true,
			speed: 300,
			slidesToShow: 3,
			adaptiveHeight: false,
			prevArrow: '<span class="tf-slider__small">' +
				'<span class="tf-slider__circle-border">' +
				'<span class="tf-slider__arrow fas fa-chevron-left"></span>' +
				'</span>' +
				'</span>',
			nextArrow: '<span class="tf-slider__small">' +
				'<span class="tf-slider__circle-border">' +
				'<span class="tf-slider__arrow fas fa-chevron-right"></span>' +
				'</span>' +
				'</span>',
			responsive: [
				{
					breakpoint: 768,
					settings: {
						slidesToShow: 2
					}
				},
				{
					breakpoint: 480,
					settings: {
						slidesToShow: 1
					}
				}
			]
		});