Daniel_Defo

$(".rev_slider").on('afterChange', function (event, slick, currentSlide) {
$(".cp").text(currentSlide<10?`0${currentSlide+1}`:currentSlide+1);
});

Как вариант разместить все в одном блоке, в десктопе сделать картинку абсолютно позиционированной прижатой к левому краю с процентной шириной, а на мобильных убрать.
https://jsfiddle.net/oqy87z10/1/

$body  .= "Content-Type:".$file_type." ";
    $body .= "Content-Type: application/octet-stream; name=\"" . $file_name . "\"" . $eol;

Так и должно быть или один из Content-Type всё же лишний?

Если вам нужен клик только по родителю (не по ребенку), то у события есть свойство target - тот элемент, на который кликнули
https://jsfiddle.net/touhpkw1/

https://jqueryvalidation.org/validate/ submitHandler вам в помощь

https://jsfiddle.net/akobcbkz/

Все очень просто! Сделай 2 вида стилей с классом list и без него

<div class="item list">
  ...
</div>

И по клику по кнопке JS-ом убирай или добавляй стиль. И будет переключаться
Смотри пример тут:

Двигайся в сторону ui-slider и jquery.
Самый простой пример из гугла
jsfiddle.net/22u4orc0/11

Воспользуйтесь range slider. Вот например демо:
jsfiddle.net/IonDen/wsk7y08a - оттолкнитесь отсюда, добавьте свой дизайн.

https://jsfiddle.net/ppmugw7y/1/

Поиграйтесь с параметром skew(). Сразу уточню, если вы поворачиваете блок на какой-то градус, дочерний блок вам нужно будет поворачивать на противоположный градус. В коде вы это увидите.

pointer-events: none;

Сделай бордеру этот стиль

Мне в таких случаях помогает этот сайт, так как на нём быстрее чем в ручную.