Certona carousel on mobile

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<script src="https://www.screwfix.com/presentation-web-sitebuilder/js/browse.js"></script>
<script src="https://www.screwfix.com/assets/js/lib.min.js"></script>
<div class="row">
  <div class="sm-24">
    <div class="row-wrp--mod">
      <div class="sl__full">
        <div class="slider slider-certona">


          <div>
            <div class="ct__pt">
              <div class="certona-tile__container ct__pt__e" title="Wheelbarrows">
                <a href="//www.screwfix.com/c/building-joinery/wheelbarrows/cat3850012" title="View all Wheelbarrows">
                  <div class="certona-tile">
                    <div class="ct__product-thumb">
                      <img src="//s7g3.scene7.com/is/image/ae235/82115_P?$autoprodblock$" alt="Wheelbarrows" class="fill">
                    </div>

                    <div class="ct__product-info">
                      <p class="ct__product-desc">
                        <span class="ct__product-desc__txt">Wheelbarrows</span>
                      </p>

                      <div class="ct__price-row">
                        <div class="ct__price-from">From Only:</div>
                        <div class="ct__price-now">
                          <span class="ct__price"> £46.99 </span> <span class="ct__price-vat"> 
														inc.<br>vat
													
								</span>
                        </div>


                      </div>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>



          <div>
            <div class="ct__pt">
              <div class="certona-tile__container ct__pt__e" title="Nail Guns">
                <a href="//www.screwfix.com/c/tools/nail-guns/cat830710" title="View all Nail Guns">
                  <div class="certona-tile">
                    <div class="ct__product-thumb">
                      <img...

JavaScript

//$('.slider-certona').find('.ct__pt').unwrap();

$('.slider-certona').slick('unslick');
// this works on homepage

//$('.slider-certona').slick('resize');

$('.slider-certona').wrap('<div id=recommendations_container></div>');
$('.slider-certona').wrap('<div class=sausages></div>');


//$('.slider-certona').slick('unslick');

setTimeout(function(){ $('.slider-certona').slick('refresh') }, 3000);
//this works on homepage

//$('.slider-certona').slick('reinit'); /* Initialize the slick again */


/*var certonaCarousel = $('.slider-certona');

var initRecommendationCarousel = function(certonaCarousel) {
  var winSize = $(window).width();
  var resizeTimer;

  if (certonaCarousel.parent().hasClass('sl__full')) {
    certonaFull(certonaCarousel);
  }

  $(window).on('resize', function() {

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {

      // Run code here, resizing has "stopped"
      winSize = $(window).width();
      if (winSize > 1024) {
        certonaCarousel.slick('unslick');
      } else {
        certonaFull(certonaCarousel);
      }
    }, 250);
  });

}

if (certonaCarousel.length > 0) {
  initRecommendationCarousel(certonaCarousel);
}

function certonaFull(certonaCarousel) {
  var prevArrow = '<button id="slider_previous" type="button" data-role="none" class="btn pagi__link slick-prev"><span class="icon-left-dir"></span></button>';
  var nextArrow = '<button id="slider_next" type="button" data-role="none" class="btn pagi__link slick-next"><span class="icon-right-dir-1"></span></button>';

  certonaCarousel.slick({
    dots: false,
    focusOnSelect: true,
    draggable: true,
    prevArrow: prevArrow,
    nextArrow: nextArrow,
    slidesToShow: 6,
    slidesToScroll: 6,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
    ...