0

Нужно чтобы картинки были разными, а при разрешении меньше 768px стали точками.

И Почему-то текст с data-title не считывается

https://codepen.io/st-iv/pen/PKQWMJ

введите сюда описание изображения

введите сюда описание изображения

  customPaging : function(slider, i) {
  var title = $(slider.$slides[i]).data('title');
  return '<a class="pager__item"></a>';

1
  • jquery data это не аттрибут data-*, используйте $(slider.$slides[i]).attr('data-title') 20 авг 2017 в 9:33

1 ответ 1

2
  1. С чего вы взяли, что текст с data-title не считывается, Вы его просто не используете, пример использования

    return '<a class="pager__item">' + title +'</a>';

  1. Чтобы были картинки разные, обычно их урл используют в data-thumb, пример:

    < div data-thumb="007MS.png">< img src="Spr_3f_007.png">< /div>

  2. Чтобы при маленьких разрешениях они ставали точками, можно сделать так:

    customPaging : function(slider, i) {
            var thumb = $(slider.$slides[i]).data('thumb');
            return '<a class="dot-trumb"><img src="'+thumb+'"></a>';
        },
    @media (max-width:992px) {
    .dot-trumb img {
       display:none;
     }
    
    .dot-trumb {
      display:inline-block;
      width:15px;
      height: 15px;
      background: #333;
      border-radius: 10px;
    }

   //меняем цвет активного элемента
   .slick-active .dot-trumb { background: #777;}
    }

3
  • Супер! а как изменить цвет точки, если она активная?
    – stiv
    20 авг 2017 в 13:18
  • .slick-active .dot-trumb { background: #777;}
    – Alex
    20 авг 2017 в 14:05
  • пытаюсь сделать но почему то dots налазят друг на друга i.stack.imgur.com/hZsQ9.png хотя pager__item присваиваю margin всё равно налазят друг на друга
    – stiv
    20 авг 2017 в 16:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.