Как убрать горизонтальную полосу прокрутки с слика. js

Question

Я реализовал один слайдер с помощью Slick. js. Это работает, но показывает горизонтальную полосу прокрутки, и я не могу найти, как это исправить.

Я пробовал с overflow:hidden и box-sizing: border-box;, но не работал. Не могли бы вы помочь мне избавиться от горизонтальной полосы прокрутки?

Скрипт и css прилагается ниже

(function(ng, $) {
	'use strict';

	ng.module('cfrRefugeeApp').directive('slider',slider);
	slider.$inject = ['App.config','$timeout','$window','$rootScope'];

	function slider(AppConfig, $timeout,$window,$rootScope) {
		return {
			restrict: 'A',
			scope: {
		       item: '='
		    },
			link: function(scope, element, attr) {
				var $el = ng.element(element);

				var itemId = attr.itemid;
				var itemType = attr.itemtype;
				var sectionId = attr.sectionid;
				var $sliderEl;
				var $slideshow, $slider, $scrollindicator;
				var height, top, bottom;
				var scrollY;
				var currentSlideNum = 0;
				var currentSection = undefined;
				var active = false;
				var isTouch = AppConfig.isTouchDevice;
				var $header, $line;
				var init = false;
				var built = false;
				var dimensionsSet = false;
				var noChangeCountToEnd = 100;
				var w = ng.element($window);
				var viewportHeight = window.innerHeight || w.height();
				var animate = false;
				var waitingToAnimate = false;
				var triggerItem = undefined;
				var triggerNum = undefined;

				
				var setElem = function(){
					$sliderEl = $el.find('.slider-el');
					setResolutions();
          			setSlideshow();
				}

				var resolutionsState = function(slick){
					if(slick.currentSlide == 0){
						if($header && $header.hasClass('dragged')) $header.removeClass('dragged');
						if($line && $line.hasClass('wider')) $line.removeClass('wider'); 
						slick.$prevArrow.fadeOut();

					}else{
						if($line && !$line.hasClass('wider')) $line.addClass('wider');
						slick.$prevArrow.fadeIn();
						
					}
					if(slick.currentSlide == slick.slideCount - 1){
						slick.$nextArrow.fadeOut();
					}else{
						slick.$nextArrow.fadeIn();
					}
				}

				var setResolutions = function(){
		          if(itemType == 'resolutions'){
		           	$header = $el.find('.resolution-head');
		           	$line = $el.find('.resolution-line');

		            $slider = $sliderEl.slick({
		              arrows: true,
		              slidesToScroll: 2,
		              variableWidth: true,
		              infinite: false,
  					  cssEase: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
  					  speed: 800,
  					  responsive: [
  					  	{
  					  		breakpoint: 1280,
							settings: {
								slidesToScroll: 1
							}
  					  	}
  					  ],
		              nextArrow: '<div class="resolution-drag next"><svg viewBox="0 0 11 18" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill-rule="nonzero" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square"> <polyline points="2 2 8.25418658 8.75198312 2 15.5"></polyline> </g> </svg></div>',
		              prevArrow: '<div class="resolution-drag previous"><svg viewBox="0 0 11 18" xmlns:xlink="http://www.w3.org/1999/xlink"> <g fill-rule="nonzero" fill="none" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square">  <polyline points="9.74581342 3 3 9.75198312 9.74581342 16.5"></polyline> </g> </svg></div>',
		            }).on('swipe', function(event, slick, direction){
		            	
		              	resolutionsState(slick);
		            })
		            .on('afterChange', function(event, slick, currentSlide){
		              
		            	resolutionsState(slick);
		            })
		            .on('beforeChange', function(event, slick, currentSlide){

		              	if($header && !$header.hasClass('dragged')) $header.addClass('dragged');

		            });
		          }
		        }



		        var setSlideshow = function(){
		          if(itemType == 'slideshow'){
		            var $parent = $el.parent();

		            $scrollindicator = $parent.find('.slider-scrollindicator');

		            $sliderEl.on('init', function(){
		            	intervalResize();
		            	console.log('slick init');
		            });

		            $slideshow = $sliderEl.slick({
		              arrows: false,
		              slidesToShow: 1,
		              infinite: false,
		              draggable: false,
		              dots: isTouch,
  					  cssEase: 'cubic-bezier(0.165, 0.84, 0.44, 1)',
  					  speed: 1000
		            });

		            $sliderEl.on('afterChange', function(event, slick, currentSlide){
		            	animate = false;
		            	
		            });
		            $parent.find('.slider-skip').on('click', function(){
		            	window.scrollTo(0, bottom);
		            });
		          }
		        }

		        var checkAnimate = function(){
		        	if(!animate){
		        		$sliderEl.slick('slickGoTo', currentSlideNum);
		        	}else{
			        	$timeout(function(){
			        		checkAnimate();
			        	}, 200);
			        }
		        }

		        /* resize */
		        var intervalResize = function(){
		          var interval,
		            timeout,
		            end,
		            lastTop,
		            lastBottom,
		            lastHeight,
		            noChangeCount;
		          dimensionsSet = false;

		            end = function () {
		               
		                clearInterval(interval);

		                interval = null;
		                timeout = null;
		                dimensionsSet = true;
		                onResize();
		                
		            };

		            interval = setInterval(function () {
		                setTopBottom();
		                if (top === lastTop && height === lastHeight && bottom === lastBottom) {
		                    noChangeCount++;

		                    if (noChangeCount === noChangeCountToEnd) {
		                        // The interval resolved the issue first.
		                        //if(itemNum == 20) console.log('interval end '+ height);
		                        end();
		                    }
		                } else {
		                    lastTop = top;
		                    lastBottom = bottom;
		                    lastHeight = height;
		                    noChangeCount = 0;
		                }
		            },1);
		        }

		        var setTopBottom = function(){
		          if(!scrollY) scrollY = 0;
		          // var rect = $el[0].getBoundingClientRect();
		          // top = rect.top + scrollY;
		          // height = $el.outerHeight();
		          // bottom = top + height;
		          height = $el.outerHeight();
        		  top = $el.offset().top;
        		  bottom = top + height;
		        }

		        var onResize = function(){
		            checkVisible();
		        }

		        var checkVisible = function(){
		        	if(scrollY > top && scrollY < bottom - viewportHeight){
	        			var percentScrolled = (scrollY - top)/(height - viewportHeight);

	        			// var num = Math.round(percentScrolled * 8);

        				// if(num !== currentSlideNum){
	        			// 	currentSlideNum = num;
	        			// 	if(!animate){
	        			// 		animate = true;
	        			// 		$sliderEl.slick('slickGoTo', currentSlideNum);
	        			// 	}else{
	        			// 		checkAnimate();
	        			// 	}
	        				
	        			// }
	        			
	        			$scrollindicator.css('transform', 'scaleX('+ percentScrolled +')');
	        		}
		        }

		        var setActive = function(){
		        	active = true;
		        	if(!built){
						setElem();
						built = true;
					}else{
						if(!isTouch && itemType == 'slideshow') intervalResize();
					}
		        }

		        var getItemDetails = function(id){
		        	var arr = id.split('-');
		        	triggerItem = arr[0] + arr[1];
		        	triggerNum = parseInt(arr[2].substr(-1), 10);
		        }

		        var checkTrigger = function(id){
		        	if(itemType == 'slideshow' && built){
		        		getItemDetails(id);
		        		if(triggerItem = itemId){
		        			if(currentSlideNum !== triggerNum){
		        				currentSlideNum = triggerNum;
		        				if(!animate){
		        					animate = true;
		        					$sliderEl.slick('slickGoTo', currentSlideNum);
		        				}else{
		        					checkAnimate();
		        				}
		        			}
		        		}
		        	}
		        }


		        /* LISTENING TO EVENTS ----------------------------------------- */

				scope.$on('sectionItem::active', function($event, args) {
					currentSection = args.sectionId;
		          	if (init && currentSection == sectionId) {
						setActive();
					}else{
						active = false;
					}
		        });

				scope.$on('winEvents::scroll', function($event, args){
					scrollY = args.scrollY;
		        	if(!isTouch && itemType == 'slideshow' && active) checkVisible();
		        });

		        scope.$on('winEvents::resize', function($event, args){
		        	viewportHeight = args.height;
		        	if(!isTouch && itemType == 'slideshow' && active) intervalResize();
		        });
		        

		        scope.$on('triggerItem::inview', function($event, args) {
		        
			    	
			    		
		        		checkTrigger(args.triggerId);

		       
			        
			    });


				/* TIMEOUTs ----------------------------------------- */

		        $timeout(function() {
		          	init = true;

		          	if(currentSection == undefined){
						$rootScope.$broadcast('slider::init');
					}else if(currentSection == sectionId){
						setActive();
					} 
		        }, 500);

			}
		};
	}
})(angular, jQuery);

/* Slider */

.slick-slider {
    position: relative;
    display: block;
    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;

    &:focus {
        outline: none;
    }

    &.dragging {
        cursor: pointer;
        cursor: hand;
    }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -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;
    margin-left: auto;
    margin-right: auto;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }

    .slick-loading & {
        visibility: hidden;
    }
}
.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px;
    [dir="rtl"] & {
        float: right;
    }
    img {
        display: block;
    }
    &.slick-loading img {
        display: none;
    }

    display: none;

    &.dragging img {
        pointer-events: none;
    }

    .slick-initialized & {
        display: block;
    }

    .slick-loading & {
        visibility: hidden;
    }

    .slick-vertical & {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
}
.slick-arrow.slick-hidden {
    display: none;
}

.slick-dots {
    position: absolute;
    bottom: 10px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 6px;
    height: 6px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 6px;
    height: 6px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    position: absolute;
    top: 0;
    left: 0;

    width: 6px;
    height: 6px;
    border-radius: 50%;

    content: '';
    background: #000;
    text-align: center;

    opacity: .25;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}