$(document).ready(function(){
$('.responsive-3').slick({
  centerMode: true,
  arrows: false,
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  touchThreshold: 20,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 900,
      settings: {
        centerMode: true,
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        centerMode: true,
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

$('.responsive-4').slick({
  arrows: false,
  dots: true,
  infinite: true,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 1,
  touchThreshold: 20,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 486,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});

function setSlideVisibility() {
  //Find the visible slides i.e. where aria-hidden="false"
  var visibleSlides = $('.slick-slide[aria-hidden="false"]');
  //Make sure all of the visible slides have an opacity of 1
  $(visibleSlides).each(function() {
    $(this).css('opacity', 1);
  });
  //Set the opacity of the first and last partial slides.
  $(visibleSlides).first().prev().css('opacity', 0);
  $(visibleSlides).last().next().css('opacity', 0);
}

$(setSlideVisibility());

$('.slider').on('beforeChange', function() {
  $('.slick-slide').each(function() {
  	$(this).css('opacity', 1);
  });
});

$('.slider').on('afterChange', function() {
  setSlideVisibility();
});

});

@@ -50,36 +50,16 @@
 slick(%7B%0A
-  centerMode: true,%0A
   arrows
@@ -59,32 +59,32 @@
  arrows: false,%0A
+
   dots: true,%0A  
@@ -243,34 +243,8 @@
 : %7B%0A
-        centerMode: true,%0A
     
@@ -400,34 +400,8 @@
 : %7B%0A
-        centerMode: true,%0A
     
@@ -513,34 +513,8 @@
 : %7B%0A
-        centerMode: true,%0A
     
@@ -1239,32 +1239,32 @@
 1%0A      %7D%0A    %7D%0A
+
   %5D%0A%7D);%0A%0Afunctio
@@ -1260,685 +1260,8 @@
 );%0A%0A
-function setSlideVisibility() %7B%0A  //Find the visible slides i.e. where aria-hidden=%22false%22%0A  var visibleSlides = $('.slick-slide%5Baria-hidden=%22false%22%5D');%0A  //Make sure all of the visible slides have an opacity of 1%0A  $(visibleSlides).each(function() %7B%0A    $(this).css('opacity', 1);%0A  %7D);%0A  //Set the opacity of the first and last partial slides.%0A  $(visibleSlides).first().prev().css('opacity', 0);%0A  $(visibleSlides).last().next().css('opacity', 0);%0A%7D%0A%0A$(setSlideVisibility());%0A%0A$('.slider').on('beforeChange', function() %7B%0A  $('.slick-slide').each(function() %7B%0A  %09$(this).css('opacity', 1);%0A  %7D);%0A%7D);%0A%0A$('.slider').on('afterChange', function() %7B%0A  setSlideVisibility();%0A%7D);%0A%0A
 %7D);%0A

Create carousel.js