Горизонтальная прокрутка

function scrollHorizontally(e) { //включает горизонтальный скрол элемента колесом 
    e = window.event || e; 
		var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); //это шаг колеса для разных браузеров 
    document.documentElement.scrollLeft -= (delta * 40); //прокручиваем всю страницу 
		e.preventDefault(); 
	}; 
   
function addMouseWell(elem, callback) { //вешает кроссплатформенный обработчик на колесо мыши над элементом 
	if (elem.addEventListener) { 
		if ('onwheel' in document) { 
			elem.addEventListener("wheel", callback); 
		} else if ('onmousewheel' in document) { 
			elem.addEventListener("mousewheel", callback); 
		} else { 
			elem.addEventListener("MozMousePixelScroll", callback); 
		} 
	} else { 
		elem.attachEvent("onmousewheel", callback); 
	} 
} 
 
addMouseWell(window, scrollHorizontally);

body { 
  overflow:hidden; 
  max-width:100%; 
} 
 
#wide { 
  width:3000px; 
}

<div id="wide"> 
  <div>Очень широкий контейнер. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam sit libero beatae vitae placeat, culpa similique, at fugit est eum distinctio cupiditate asperiores! Laborum, porro, exercitationem! Veritatis ea quisquam repudiandae. 
Deserunt unde iste placeat eaque. Error adipisci temporibus neque inventore ratione dicta quasi, ipsa corrupti alias distinctio nam quibusdam magni cumque, rem possimus officiis optio laudantium minima amet soluta eligendi. Quis, earum. Vitae eum cupiditate consequatur pariatur quis voluptatibus, dignissimos nam recusandae voluptatem repellendus exercitationem excepturi fugiat, obcaecati nostrum libero quaerat. Magni dolorem, deleniti tempore quas similique distinctio quam animi. 
Fugit nihil dolor dolores eos quidem quas, culpa fugiat amet expedita consectetur provident corporis blanditiis obcaecati tempora eum, repellendus quam! Aliquam quos pariatur, dignissimos dolor velit quo illum, fugit hic? Praesentium, aliquid id omnis nesciunt alias deleniti obcaecati ipsa doloremque itaque harum earum assumenda, fuga quisquam quia voluptate necessitatibus consequatur soluta maxime. Fuga quas autem debitis earum dicta repellendus illum.</div> 
</div>

$(function () { 
  $('.slider').slick({ 
    arrows: false 
  }); 
   
  $('.slider').mousewheel(function (e) { 
    if (e.deltaY !== 1) { 
      $('.slider').slick('slickNext'); 
    } else { 
      $('.slider').slick('slickPrev'); 
    } 
     
    e.preventDefault(); 
  }); 
});

body { 
  margin: 0; 
} 
 
.slider { 
  width: 100vw; 
  height: 100vh; 
} 
 
.slick-list, 
.slick-track { 
  width: 100%; 
  height: 100%; 
} 
 
.slider__item { 
  width: 100%; 
  height: 100%; 
  background-color: #ccc; 
} 
 
.slider__item span { 
  margin: auto; 
  height: 100%; 
  font-family: sans-serif; 
  font-size: 32px; 
  align-items: center; 
  justify-content: center; 
  display: flex; 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script> 
 
<section class=slider> 
  <article class=slider__item><span>1</span></article> 
  <article class=slider__item><span>2</span></article> 
  <article class=slider__item><span>3</span></article> 
  <article class=slider__item><span>4</span></article> 
</section>