diff --git a/.gitignore b/.gitignore
index d2b51d6fe..735cbb4eb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,4 @@ jquery.html
 docs/fonts/
 docs/ajax-loader.gif
 package-lock.json
+.DS_Store
diff --git a/package.json b/package.json
index 769152252..974eba3d9 100644
--- a/package.json
+++ b/package.json
@@ -41,10 +41,10 @@
     "autoprefixer": "^7.1.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
+    "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.4",
     "babel-preset-airbnb": "^2.1.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^2.1.1",
     "deepmerge": "^1.1.0",
     "del": "^2.2.2",
     "enzyme": "^3.2.0",
@@ -59,7 +59,7 @@
     "gulp-sass": "^4.0.0",
     "husky": "^0.14.3",
     "jasmine-core": "^2.5.2",
-    "jest": "^23.6.0",
+    "jest": "^24.8.0",
     "jquery": "^3.2.1",
     "js-beautify": "^1.7.5",
     "json-loader": "^0.5.4",
diff --git a/src/default-props.js b/src/default-props.js
index 8d828add3..c98806a31 100644
--- a/src/default-props.js
+++ b/src/default-props.js
@@ -1,6 +1,6 @@
 import React from "react";
 
-var defaultProps = {
+let defaultProps = {
   accessibility: true,
   adaptiveHeight: false,
   afterChange: null,
diff --git a/src/dots.js b/src/dots.js
index 908a39191..ae1e51d4c 100644
--- a/src/dots.js
+++ b/src/dots.js
@@ -3,8 +3,8 @@
 import React from "react";
 import classnames from "classnames";
 
-var getDotCount = function(spec) {
-  var dots;
+const getDotCount = spec => {
+  let dots;
 
   if (spec.infinite) {
     dots = Math.ceil(spec.slideCount / spec.slidesToScroll);
@@ -25,7 +25,7 @@ export class Dots extends React.PureComponent {
     this.props.clickHandler(options);
   }
   render() {
-    var dotCount = getDotCount({
+    let dotCount = getDotCount({
       slideCount: this.props.slideCount,
       slidesToScroll: this.props.slidesToScroll,
       slidesToShow: this.props.slidesToShow,
@@ -37,29 +37,29 @@ export class Dots extends React.PureComponent {
     // Credit: http://stackoverflow.com/a/13735425/1849458
     const { onMouseEnter, onMouseOver, onMouseLeave } = this.props;
     const mouseEvents = { onMouseEnter, onMouseOver, onMouseLeave };
-    var dots = Array.apply(
+    let dots = Array.apply(
       null,
       Array(dotCount + 1)
         .join("0")
         .split("")
     ).map((x, i) => {
-      var leftBound = i * this.props.slidesToScroll;
-      var rightBound =
+      let leftBound = i * this.props.slidesToScroll;
+      let rightBound =
         i * this.props.slidesToScroll + (this.props.slidesToScroll - 1);
-      var className = classnames({
+      let className = classnames({
         "slick-active":
           this.props.currentSlide >= leftBound &&
           this.props.currentSlide <= rightBound
       });
 
-      var dotOptions = {
+      let dotOptions = {
         message: "dots",
         index: i,
         slidesToScroll: this.props.slidesToScroll,
         currentSlide: this.props.currentSlide
       };
 
-      var onClick = this.clickHandler.bind(this, dotOptions);
+      let onClick = this.clickHandler.bind(this, dotOptions);
       return (
         <li key={i} className={className}>
           {React.cloneElement(this.props.customPaging(i), { onClick })}
diff --git a/src/track.js b/src/track.js
index 4b4bd31f1..727cb66e2 100644
--- a/src/track.js
+++ b/src/track.js
@@ -9,9 +9,9 @@ import {
 } from "./utils/innerSliderUtils";
 
 // given specifications/props for a slide, fetch all the classes that need to be applied to the slide
-var getSlideClasses = spec => {
-  var slickActive, slickCenter, slickCloned;
-  var centerOffset, index;
+const getSlideClasses = spec => {
+  let slickActive, slickCenter, slickCloned;
+  let centerOffset, index;
 
   if (spec.rtl) {
     index = spec.slideCount - 1 - spec.index;
@@ -43,8 +43,8 @@ var getSlideClasses = spec => {
   };
 };
 
-var getSlideStyle = function(spec) {
-  var style = {};
+const getSlideStyle = spec => {
+  let style = {};
 
   if (spec.variableWidth === undefined || spec.variableWidth === false) {
     style.width = spec.slideWidth;
@@ -85,18 +85,18 @@ var getSlideStyle = function(spec) {
 
 const getKey = (child, fallbackKey) => child.key || fallbackKey;
 
-var renderSlides = function(spec) {
-  var key;
-  var slides = [];
-  var preCloneSlides = [];
-  var postCloneSlides = [];
-  var childrenCount = React.Children.count(spec.children);
+const renderSlides = spec => {
+  let key;
+  let slides = [];
+  let preCloneSlides = [];
+  let postCloneSlides = [];
+  let childrenCount = React.Children.count(spec.children);
   let startIndex = lazyStartIndex(spec);
   let endIndex = lazyEndIndex(spec);
 
   React.Children.forEach(spec.children, (elem, index) => {
     let child;
-    var childOnClickOptions = {
+    let childOnClickOptions = {
       message: "children",
       index: index,
       slidesToScroll: spec.slidesToScroll,
@@ -112,8 +112,8 @@ var renderSlides = function(spec) {
     } else {
       child = <div />;
     }
-    var childStyle = getSlideStyle({ ...spec, index });
-    const slideClass = child.props.className || "";
+    let childStyle = getSlideStyle({ ...spec, index });
+    let slideClass = child.props.className || "";
     let slideClasses = getSlideClasses({ ...spec, index });
     // push a cloned element of the desired slide
     slides.push(