Как на одной странице использовать две карусели?

Question

[Андрей Sky]

На странице есть слайдер и карусель.
Как использовать на одной странице данную библиотеку kenwheeler.github.io/slick 2 раза?
Вод код который использую:

<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

Первый слайдер работает. а вот карусель нет.
P.S. скомпилировать coffescript можно на сайте js2.coffee

Answer 1

[littleguga]

$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

compilied:

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

[Андрей Sky]

littleguga спасибо помогло. Но чет не могу понять, почему мой код неправильно работал? Вроде оба кода такие же за исключением переименование переменной.

Comments

[littleguga]

У Вас селектор был с ">", надо без него

[Андрей Sky]

littleguga: А точно) Ночью уже мозг не работал) Спасибо за подсказку)

[littleguga]

Андрей Sky: понимаю, сам так часто торможу. Надо высыпаться. Удачи!