How to use two carousels on one page?

Question

JavaScript

The page has a slider and a carousel.
How to use this library kenwheeler.github.io/slick 2 times on one page?
Here's the code I'm using:

<section class="main-slider">
          <ul>
            <li><img src="../images/slide1.jpg">
              <div class="content">всей семьей
                <h1>в сочи</h1>на день россии!<a href="#" class="button">Посмотреть тур</a>
              </div><img src="../images/slide2.jpg">
            </li>
            <li><img src="../images/slide3.jpg">
              <div class="content">всей семьей
                <h1>в геленджике</h1>на день россии!<a href="#" class="button">Посмотреть тур</a>
              </div><img src="../images/slide4.jpg">
            </li>
            <li><img src="../images/slide2.jpg">
              <div class="content">всей семьей
                <h1>в Абхазии</h1>на день россии!<a href="#" class="button">Посмотреть тур</a>
              </div><img src="../images/slide1.jpg">
            </li>
          </ul>
        </section>

  <section class="partners"><span>наши партнеры</span>
          <ul>
            <li><img src="../images/gold.png"></li>
            <li><img src="../images/turetno.png"></li>
            <li><img src="../images/AnexTourLogo.png"></li>
            <li><img src="../images/alean.png"></li>
            <li><img src="../images/gold.png"></li>
            <li><img src="../images/turetno.png"></li>
            <li><img src="../images/AnexTourLogo.png"></li>
            <li><img src="../images/alean.png"></li>
          </ul>
        </section>

$slider = $ '.main-slider ul'
$partnersCarousel = $ '.partners ul'

  $slider.slick
    dots: true
    infinite: true
    fade: true
    speed: 500
    cssEase: 'linear'

  $('.partners > ul').slick
    dots: false
    arrows: false
    slidesToShow: 4
    slidesToScroll: 1

The first slider works. but no carousel.
PS you can compile coffescript on the site js2.coffee

Answer 1

$slider = $ '.main-slider ul'
$partnersCarousel = $ '.partners ul'

  $slider.slick
    dots: true
    infinite: true
    fade: true
    speed: 500
    cssEase: 'linear'

  $partnersCarousel.slick
    dots: false
    arrows: false
    slidesToShow: 4
    slidesToScroll: 1

compiled:

var $partnersCarousel, $slider;

$slider = $('.main-slider ul');

$partnersCarousel = $('.partners ul');

$slider.slick({
  dots: true,
  infinite: true,
  fade: true,
  speed: 500,
  cssEase: 'linear'
});

$partnersCarousel.slick({
  dots: false,
  arrows: false,
  slidesToShow: 4,
  slidesToScroll: 1
});

Answer 2

littleguga thanks helped. But even I can not understand why my code did not work correctly? It seems that both codes are the same except for renaming the variable.