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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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