gh0sty

О боже)))
Дай линкам слева какой-нибудь href. По href-у реинитай слайдер. Но если у тебя будет 22 пункта, в каждом хотя бы 5 картинок и каждая весом мегабайт (что норма для 80% экрана fullhd) - только они будут весить 110мб. Это, учитывая 4g - куева туча времени загрузки. Ajax, бро, ajax...

Пробегайся по tbody tr и закидывай в словарь. Первый тег jQuery - поэтому, наверняка поймешь, что это each и push для готового словаря.

UPD:
Увидел, что все печально - поэтому ня:

var json_table = [];
$('#print-table tbody tr').slice(2).each(function() {
    var tds = $(this).children('td');
    json_table.push({
        name: tds[0].text(),
        rank: tds[1].text(),
        phone: tds[2].text(),
    });
});

Чет тип того, отдебажишь там, писал в слепую.

Не сильно шарю в js - но это типа примитивного ООП. Крч ты по let family = marry... временно создаешь 2 объекта у которых есть параметры name (но так-то это словарики). Далее ты первому объекту (словарю) устанавливаешь атрибут husband ссылающийся на весь объект (словарик) woman, и наоборот - во второй строчке функции. И возвращаешь father: первый объект (словарь) с записями name: John, wife: {...} и второй объект (словарь) с записями name: Ann, husband: {...}. И совмещаешь 2 объекта (словаря) в один объект (словарь) в переменной family. И теперь чтобы избежать рекурсии - я предположу, что в js присваивание - то же самое что и ссылка на объект.
И у тебя выйдет:

family = {
    father: {
        name: 'John',
        wife: // ссылка на объекто-словарь Ann-ы
    },
    mother: {
        name: 'Ann',
        husband: // ссылка на объекто-словарь John-а
    }
}

Хз как там с ООП в js, поэтому везде и указал словарь (мейби оно так и работает)

submit - автоматически отправляет тебя по ссылке заданной в форме. Отмени стандартное действие с помощью preventDefault и по событию, допустим success ответу - перенаправляй на нужную ссылку.

$('.fixed-form-magnet form').on('submit', function(e){
e.preventDefault();
...
success...
document.location.href = 'put_your_url_here';
...

Hint: checkValidity() на поля формы на всяк случай)))

Спасибо, Алексей Ярков !
Проблема скорее всего была в пересоздании инпута и повторном вызове change.
Т.к. не удавалось сделать промис - сначала создавался новый input, а потом повторно заменялся превьюхой.
(просто тупил XD)
Сделал через before.
Це код:

var files_uploaded = 0;
$("#add-image").on("change", function(e) {
    var files = e.target.files,
    filesLength = files.length;
    for (var i = 0; i < filesLength; i++) {
        var f = files[i];
        var fileReader = new FileReader();
        fileReader.onload = (function(e) {
            var file = e.target;
            var upl = $('#all-images .upload-image').parent(); //col с загрузчиком (все объекты в col обернуты)
            upl.css('display', 'none');
            files_uploaded += 1;
            var new_img = '<div class="col-12 col-md-6 col-lg-4 mb-3" style="height: 150px; display: none"><div class="uploaded-img"><span class="image-number customized customized-border-color">' + files_uploaded + '</span><i class="fas fa-times remove-image customized-color-h"></i><img src="' + file.result + '"/></div></div>';
            upl.before(new_img); //вставить перед загрузчиком
            $('#all-images .upload-image span').text(files_uploaded+1); //меняем циферку
            upl.prev().fadeIn(); //для красоты
            upl.fadeIn();
        });
        fileReader.readAsDataURL(f);
    }
});

Нашел решение. Как оказалось нельзя использовать colspan, если у тебя нет, как минимум, 2х строк thead, т.е. colspan применим только к complex header.
Фикс:

...
<thead class="bg text-white font-weight-bold">
    <tr class="d-none">
        <th></th>
        <th></th>
        <th></th>
        <th class="d-none d-md-table-cell"></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <th colspan="3">Объявление</th>
        <th class="d-none d-md-table-cell" data-toggle="tooltip" data-placement="top" title="Сортировать">Дата</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Статус</th>
        <th data-toggle="tooltip" data-placement="top" title="Сортировать">Цена</th>
    </tr>
</thead>
...

и еще 1 параметр к инициализации DataTable:

columnDefs: [
    { orderable: false, targets: [ 0, 1, 2 ] }
]

Пасибки WhiteBearDev, хоть я и не въехал сразу.

1 страница - 1 title. Иначе - никак.
Если очень сильно надо - создай 2 идентичные страницы, но это очень глупое решение.
Оптимально - написать эти страницы специализированно (т.е. различающиеся).
Если ты это из-за сео - то есть еще тег description, по нему ищут поисковики, или в title несколько ключевых слов.

Функции многоразовые.
Вызов функции - обращение вида generateChars();
Добавляешь какое-то событие и привязываешь вызов функции:

document.getElementById('button').addEventListener('click', function() {
    generateChars();
})

Тут по клику на элементом с id 'button'.

У тебя на codepen не подключен slick.
На опыте скажу, slick-slider - вещь очень гибкая и работает исключительно с блоками.
Т.е. ты верстаешь отдельный слайд как блок и кидаешь его в слик.
Нету никакого content и img (как я знаю).
Примерно так все должно выглядеть:

<div class="slider-name" style="width: 100%; height: 800px">
    <!-- cover - растянуть изображение, сохраняя пропорции, но с обрезанием -->
    <div style="width: 100%; height: 100%; background-image: url(path/to/image1.jpg); background-size: cover">
        Данные первого слайда
    </div>
    <div style="width: 100%; height: 100%; background-image: url(path/to/image2.jpg); background-size: cover">
        Данные второго слайда
    </div>
    <div style="width: 100%; height: 100%; background-image: url(path/to/image3.jpg); background-size: cover">
        Данные третьего слайда
    </div>
</div>