Slick Slider Defaults

Slick Slider install files:

Examples:

Slick to go

Default arrows & dots

CSS

.slick-prev,.slick-next{background:none;border:none;font-size:0;display:block;width:4rem;height:4rem;position:absolute;top:50%;-webkit-transform:translate(0,-50%);-moz-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-o-transform:translate(0,-50%);transform:translate(0,-50%);z-index:5}
.slick-prev::after,.slick-next::after{content:'';display:block;width:4rem;height:4rem;border-style:solid;border-width:0 .2rem .2rem 0;border-color:#c4c4c4;position:absolute;top:0;left:0;-webkit-transition: .3s linear;-o-transition: .3s linear;-moz-transition: .3s linear;transition: .3s linear}
.slick-prev{left:1.5rem}
.slick-prev::after{-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg)}
.slick-next{right:1.5rem}
.slick-next::after{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}

.slick-dots{position:absolute;left:50%;bottom:2rem;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0);z-index:30}
.slick-dots li{display:block;width:1.5rem;height:1.5rem;margin:0 .5rem;background:transparent;border:.1rem solid #fff;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;cursor: pointer}
.slick-dots li.slick-active{background:#fff}
.slick-dots li:only-child {display: none;}
.slick-dots li button{background:transparent;border:none;font-size:0}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.slick-prev:hover::after, .slick-next:hover::after {border-color: #066978;}
}

SCSS

/* Vars */
$arrowColor:      #ffffff;
$arrowColorH:     #066978;
$dotBorderColor:  #ffffff;
$dotBackground:   #ffffff;
	
.slick-prev, .slick-next {
	background: none;
	border: none;
	font-size: 0;
	display: block;
	width: 4rem;
	height: 4rem;
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 5;
	
	&::after {
		content: '';
		display: block;
		width: 4rem;
		height: 4rem;
		border-style: solid;
		border-width: 0 .2rem .2rem 0;
		border-color: $arrowColor;
		position: absolute;
		top: 0;
		left: 0;
		transition: .3s linear;
	}
}

.slick-prev {
	left: 1.5rem;
	
	&::after {
		transform: rotate(135deg);
	}
}

.slick-next {
	right: 1.5rem;
	
	&::after {
		transform: rotate(-45deg);
	}
}
			
.slick-dots {
	position: absolute;
	left: 50%;
	bottom: 2rem;
	display: flex;
	transform: translate(-50%, 0);
	z-index: 30;
	
	li {
		display: block;
		width: 1.5rem;
		height: 1.5rem;
		margin: 0 0.5rem;
		background: transparent;
		border: 0.1rem solid $dotBorderColor;
		border-radius: 50%;
		cursor: pointer;
		
		&.slick-active {
			background: $dotBackground;
		}
		
		&:only-child {
			display: none;
		}
		
		button {
			background: transparent;
			border: none;
			font-size: 0;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.slick-prev:hover::after, .slick-next:hover::after {
		border-color: $arrowColorH;
	}
}

Reload fix

HTML

<div class="top_slider hidden_slider" data-slider="top_slider"></div>

CSS

.top_slider.hidden_slider{opacity:0;overflow:hidden;max-height:66rem}

JavaScript

var $slidersArray = [];

function findSliders() {
    $('body').find('.hidden_slider').each(function () {
        var slider_Item = $(this).data('slider');
        $slidersArray.push(slider_Item);
    });
    for (var itemS = 0; itemS < $slidersArray.length; itemS++){
        var $sliderTimer = 'sliderTimer_' + itemS,
            $slides = $slidersArray[itemS];
        fixSlider($slides, $sliderTimer)
    }
}

findSliders();

function fixSlider($sliderSlick, $Timer) {
    var slider = $('.' + $sliderSlick);
    $Timer = setInterval(function () {
        var $sliderSlick = $('body').find(slider);
        if ($sliderSlick.hasClass('slick-initialized')) {
			$sliderSlick.find('.slick-dots').wrap('<div class="dots_wrapper"></div>');
            $sliderSlick.removeClass('hidden_slider');
            clearInterval($Timer);
        }
    }, 10);
}