Антон Усачев

event, slick – вспомогательные атрибуты. Предлагаю вешать на beforeChange.

$('.your-element').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  слайд.eq(nextSlide).меняем_контент_в_слайде
});

Подойдет любой плагин с подобным функционалом. Запрос "countdown timer js" поможет. В некоторых даже встроен именно такой дизайн. У большинства хорошо расписан API, в котором как раз и вводятся данные типа: считай от сегодняшнего дня до старта продаж, который состоится через месяц... И он считает. Диапазоны дат и прочие гибкости обычно присутствуют.

UPD: вот этот очень похож... точнее, именно он и есть...

Нужен скрипт для отслеживания мышки. И две картинки. Если правильно понял мысль, то подойдет что-то вроде этого.

У Bootstrap 4 карусели есть events, которые можно и нужно использовать. Чтобы лучше подстроить события под ваши нужды, читайте документацию, она в сети не прячется. Примерно так должно получиться:

$('.carousel').on('slide.bs.carousel', function(event) {
	var slideIndex = event.to, // индекс слайда, к которому переходим
		activeSlide = $('.slide').eq(slideIndex), // активный слайд
		myOuterElem = $('.my-outer-element'); // некий элемент вне карусели

	if(activeSlide.hasClass('night-bg')) {
		myOuterElem.addClass('my-new-class'); // добавляем класс к внешнему элементу если ночь
	} else
	if(activeSlide.hasClass('day-bg')) {
		myOuterElem.removeClass('my-new-class'); // убираем класс у внешнего элемента если день
	}
});

А почему бы не вынести все в отдельный файл и сократить код?

Конкретный пример:



Здесь я сделал через атрибут data, но можно данные брать и из объекта в переменной.

Обратиться только к ячейкам в первому ряду и...

table tr:first-child td {
	border-top: 1px solid #eee;
}

UPD: если вопрос про правый отступ в последней колонке, то можно схитрить. Цветом заливать див внутри ячеек, а последней в ряду давать правый паддинг:

table tr td {
	background: #fff;
}

table tr:first-child td {
	border-top: 1px solid #eee;
}

table tr td:last-child {
	padding-right: 40px;
}

table tr td div {
	width: 100%;
	height: 100%;
	background: #fceeff;
}

Можно воспользоваться тем же методом, что и для скрытия всех элементов кроме первых трех, только изменить диапазон. Или как предложено выше, действительно.

var $ul = $(this),
	$li = $ul.children(),
	liArray = [];

$li.slice(3).hide();

// вариант 1
liArray = $li.slice(0, 3);
// вариант 2
liArray = $li.filter(':visible');

Запоминать класс и контент в момент удаления случайного дива, затем давать это все новому диву.

Решается более четким позиционированием летящего блока в самом начале. Плюс position: fixed; для него решает.



UPD: попробуй поизменять ширину окна в полёте.

Один из самых популярных этот: клик. А так есть и еще варианты, можно искать аналоги.

Нужно перевести $header-grad в rgba и плясать от него. Сафари любой прозрачный градиент воспринимает как 0% черного (или белого? не помню). Короче, если, например, хотим сделать исчезающий красный, то пишем так:

elem {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
    /* ниже ваш цвет */
    background-image: linear-gradient(to bottom, rgba(55, 60, 70, 1), rgba(55, 60, 70, 0));
}