Александр Алексеев

мне всегда помогал метод .stop() без аргументов но лучше конечно на цсс

.slider_wrap > .slider_item:nth-child(n+2) { display: none; }

скрываем все слайды кроме первого
при инициализированном слике этот селектор уже не будет работать

тот что умеет кешировать состояния фильтров
или к которому сам сможешь кеш написать

можно попробовать slick
разместить 3 штуки
2 для thumbs и им указать опцию asNavFor
а для третьего вывести все картинки из двух соурсов

[type=checkbox]:checked + .my_block {}
в этом вся магия

я ищу так
открываю в хроме мобильный вид
скроллю вправо и начинаю удалять блоки из верстки
как скролл пропадет так и понятно где проблема

в фаерфоксе есть встроеный инструмент - меню интсрументы - веб разработка - пипетка
для хрома есть плагины например colorzilla

если табов много то я обычно оборачиваю их в slick slider

сделать прозрачный бордер размером с тень
тень выводить псевдоэлементом
или наоборот сделать прозрачный псевдоэлемент размером с тень

не используйте left right (при таком подходе происходит рефлоу всей страницы на каждый пиксель анимации, при большом количестве элементов все начнет тормозить)
расположите все облака по центру и сместите отдельные с помощью transform: translateX(***px);
и анимируйте тоже transform

есть например такой компонент в бутстрапе (называется scrollspy) но можно наверное и отдельно найти или просто бутстрап закостомизить

к картинке
object-fit: cover

:before и :after дословно означают before и after content
у input нет контента, поэтому псевдоэлементы с ними не работают
оборачивайте и применяйте к обертке

Ориентироваться надо на вьюпорт устройства
Размеры вьюпортов можно узнать например на этом сайте viewportsizes.com

Я бы прислушался к предыдущему оратору и поставил 980 "как в бутстрапе" потому что бутстрап ориентирован не только на ipad и охватывает большинство устройтв

<form>
    <label>
        <div>Нравится</div>
        <div>+15</div>
        <input type="submit">
    </label>
</form>

добавлю что составные свойства лучше не использовать, например padding, background
вместо них использовать padding-left, padding-right, background-image, background-position

+ на том же гите навалом сборщиков писем, которые расставят все стили инлайново
здорово экономит время

можно попробовать отследить окончание анимации с помощью жиквери метода

.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    // тут пишем переход на новый слайд
});

дык они как раз без плагинов отлично стилизуются
вот грубый пример с двумя картинками

<label>
  <input type="checkbox">
  <img src="notchecked">
  <img src="checked">
</label>

[type=checkbox] {display: none}
[type=checkbox] + img { display: block;}
[type=checkbox] + img + img { display: none;}
[type=checkbox]:checked + img { display: none;}
[type=checkbox]:checked + img + img { display: block;}