$(document).ready(function(){
  $('.responsive').slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
    {
      breakpoint: 1220,
      settings: {
        slidesToShow: 4,
        slidesToScroll: 1,
        infinite: true,
        dots: false
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});


  $('.demo').slick({
  		
  	accessibility: true,

  	arrows: true,
  	prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  	nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',

  	autoplay: false,
	autoplaySpeed: 2000,
	draggable: true,
	slidesToShow: 1,
  	slidesToScroll: 1,
  	easing: 'linear',

  	swipe: true,
  	asNavFor: '.slider-nav'
  });

$('.demo-tablet').slick({
  		
  	accessibility: true,

  	arrows: false,
  	prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  	nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',

  	autoplay: false,
	autoplaySpeed: 2000,
	draggable: true,
	slidesToShow: 1,
  	slidesToScroll: 1,
  	easing: 'linear',

  	swipe: true,
  	asNavFor: '.slider-nav-tablet'

  });

$('.demo-desktop').slick({
  		
  	accessibility: true,

  	arrows: false,
  	prevArrow: '<button type="button" data-role="none" class="slick-prev">Previous</button>',
  	nextArrow: '<button type="button" data-role="none" class="slick-next">Next</button>',

  	autoplay: false,
	autoplaySpeed: 2000,
	draggable: true,
	slidesToShow: 1,
  	slidesToScroll: 1,
  	easing: 'linear',

  	swipe: true,
  	asNavFor: '.slider-nav-desktop'

  });


  $('.slider-nav').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.demo',
  arrows: false,
  draggable: false,
  focusOnSelect: true,
});

   $('.slider-nav-tablet').slick({
  slidesToShow: 5,
  slidesToScroll: 1,
  asNavFor: '.demo-tablet',
  arrows: false,
  draggable: false,
  focusOnSelect: true,
  }); 



  $( "#accordion" ).accordion({
  active: false,
  collapsible: true,
  });

  $( "#accordion-tablet" ).accordion({
  active: false,
  collapsible: true,
  });

  $( "#accordion-desktop" ).accordion({
  active: false,
  collapsible: true,
  });


  $('.product-image-slider').show();
  $('.thumb-singleProduct-container').show();
  $('.accordion-load').show();
  

});