Cacher is the code snippet organizer for pro developers

//////////////////////////////////
// CAROUSEL  
//////////////////////////////////
    $('.slider').slick({ 
        dots: true,
        infinite: true,
        speed: 500,
        fade: false,
        arrows: false,
        cssEase: 'linear',
        autoplay: true,
        slidesToShow: 1,
        slidesToScroll: 1
    });
    
	//////////////////////////////////
  // HTML  
  //////////////////////////////////
    <div class="slider-wrapper block bg-gray">
            <div class="slider">
                <div class="slid">
                    <img src="images/content/slide.jpg">
                </div>
                <!-- .slid -->
                <div class="slid">
                    <img src="images/content/slide.jpg">
                </div>
                <!-- .slid -->
            </div>
            <!-- slider -->
        </div>
        <!-- slider-wrapper -->
  
  //////////////////////////////////      
  // SASS
  ////////////////////////////////// 
  .slick-slider {
    display: block;
    width: 100%;
    position: relative;
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    .bg-slide {
        font-size: 0;
        text-align: center;
    }
}

.content-slide {
    width: 100%;
    top: 160px;
    bottom: auto;
}

.slick-track:before,
.slick-track:after {
    content: "";
    display: table;
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    display: none;
    &:focus {
        outline: none;
    }
}

.slick-initialized .slick-slide {
    display: block;
}

//arrows
.slick-prev,
.slick-next {
    position: relative;
    display: block;
    height: 38px;
    width: 21px;
    line-height: 0;
    font-size: 0;
    cursor: pointer;
    color: transparent;
    top: 50%;
    margin-top: -19px;
    padding: 0;
    border: none;
    outline: none;
    z-index: 10;
}

.latest-ctn {
    top: auto;
}

.dots-ctn {
    bottom: auto;
}

// .slick-prev {
//     // left: 0px;
//     // background: #f09;
//      // @include background-image-retina("../images/controls", "png", 904px, 37px);
//      // background-repeat: no-repeat;
//      // background-color: transparent;
//      //     left: -2px;
// }
// .slick-next {
//     //    background: #f09;
//     //  background: #f09;
//     // right: 0px;
//      // @include background-image-retina("../images/controls", "png", 904px, 37px);
//      // background-repeat: no-repeat;
//      // background-color: transparent;
//      // background-position: -883px 0px;
//      //     right: -5px;
// }
// DOTS
ul.slick-dots {
    position: absolute;
    top: 115px;
    list-style: none;
    padding: 0 0;
    margin: 0 0;
    width: 100%;
    line-height: 0;
    li {
        @include inline-block;
        text-indent: -9999px;
        width: 12px;
        height: 12px;
        cursor: pointer;
        background: rgba(#f09, 0.7);
        @include border-radius( 50% 50%);
        margin-right: 5px;
        &.slick-active {
            background: rgba(#000, 0.7);
        }
    }
}

// SLIDE CONTENT 
.slide-content {
    a {
        &:hover {
            color: inherit;
        }
    }
    .slide-link {
        position: relative;
        font-size: 1.667rem;
        background: url('../images/icons/icon-right-blue.png') top 2px right no-repeat;
        padding-right: 25px;
    }
    .slide-hash {
        position: relative;
        font-size: 1.333rem;
    }
}