Slick JQuery

by Anton Kolesnikov

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<div class="slideshow">
  <div class="sliderMy slider-1 slick-initialized slick-slider" role="toolbar">
    <button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>
    <div aria-live="polite" class="slick-list draggable">
      <div class="slick-track" style="opacity: 1; width: 4272px;" role="listbox">
        <div class="item slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1424px; position: relative; left: 0px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms linear;">
          <img src="http://bountyrelax.com/images/large/6.jpg">
        </div>
        <div class="item slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 1424px; position: relative; left: -1424px; top: 0px; z-index: 999; opacity: 1;">
          <img src="http://bountyrelax.com/images/large/1.jpg">
        </div>
        <div class="item slick-slide" data-slick-index="2" aria-hidden="true" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 1424px; position: relative; left: -2848px; top: 0px; z-index: 998; opacity: 0; transition: opacity 500ms linear;">
          <img src="http://bountyrelax.com/images/large/2.jpg">
        </div>
      </div>
    </div>


    <button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>
    <ul class="slick-dots" style="display: block;" role="tablist">
     ...

CSS

body {
  position: relative;
}

.first {
  display: block;
  background: yellow;
  width: 400px;
  height: 400px;
}

.visivleCe {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
}

.slideCintent {
  width: 700px;
}

img {
  width: 200px;
  height: auto;
}

.content {
  width: 1000px;
}

.testTwo {
  width: 700px;
}

.testTwo div {
  width: 100px;
  height: 100px;
  background: red;
  overflow: hidden;
}

.content {
  margin: 10% auto;
  width: 1000px;
  height: 400px;
}

h3 {
  background: #fff;
  color: #3498db;
  font-size: 36px;
  line-height: 100px;
  margin: 10px;
  padding: 2%;
  position: relative;
  text-align: center;
}

.center img {
  opacity: 0.4;
  transition: all 500ms ease;
  z-index: 1;
  position: relative;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

.center .slick-center img {
  -moz-transform: scale(1.28);
  -ms-transform: scale(1.28);
  -o-transform: scale(1.28);
  -webkit-transform: scale(1.28);
  color: #e67e22;
  opacity: 1;
  transform: scale(1.28);
  z-index: 5;
  position: relative;
}

.center .slick-track {
  height: 400px;
}


/*.lleo_errorSelection *::-moz-selection,
.lleo_errorSelection *::selection,
.lleo_errorSelection *::-webkit-selection {
    background-color: red !important;
    color: #fff !important;;
}*/

#lleo_dialog,
#lleo_dialog * {
  color: #000 !important;
  font: normal 13px Arial, Helvetica !important;
  line-height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none 0 !important;
  position: static !important;
  vertical-align: baseline !important;
  overflow: visible !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  float: none !important;
  visibility: visible !important;
  text-align: left !important;
  text-transform: none !important;
  border-collapse: separate...

JavaScript

$(document).ready(function() {
  $('.sliderMy').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 4000
  });

  /*click*/
  $(".first ").click(function() {

    $(".visivleCe").fadeIn(900);

  });


  $(".visivleCe").click(function() {

    $(".visivleCe").fadeOut(900);
    alert("ff");
  });



  $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [{
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    }, {
      breakpoint: 80,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }]
  });





});