Егор Рублёв

Выступающий элемент с фикс. шириной - факт.
overflow-x: hidden для html и body не работает на мобильных при использовании вьюпорт.
Варианты решения:
1) Правильный - найти выступающий элемент и починить.
2) Костыль - задать overflow-x: hidden для отдельной секции, в которой имеется выступающий элемент.
P.S. Код не смотрел, поэтому, что именно выступает, не скажу.

Найти: '([^']*)', '([^']*)'
Заменить: engine: '\1', image: '\2'

В CSV и обработать регуляркой построчно. Можно просто в Notepad++ сделать ))

UPD#1:

1. Открываем файл CSV в Sublime Text
2. Жмем Ctrl+H
3. В верхнее поле вставляем эту регулярку:

([^;]*)?;([^;]*)?;([^;]*)?;([^;]*)?;([^;]*)?;([^;\r\n]*)?\n*

4. В нижнее поле вставляем эту регулярку:

\{\n\tmodel: '$1',\n\tyears: \[\{\n\t\tyear: '$2',\n\t\tengines: \[\n\t\t\t\{ engine: '$3', image: '$4', work: '$5', parts: '$6' \}\n\t\t\]\n\},\n

5. Выставляем опции как на скриншоте
6. Жмем кнопку "Replace All"
7. Получаем результат и радуемся ))

Принцип работы сетки бутстрапа - mobile first (сначала мобильный вид), от меньшего к большему.

По умолчанию все колонки - 100% ширины, что эквивалентно col-xs-12, который, собственно назначать и не требуется. Далее по нарастающей. Если нам нужно изменить сетку для small-экранов, мы применяем *-sm-* классы, для средних - *-md-*, для больших - *-lg-*, для оч больших - *-xl-*. При этом можно пропускать определенные классы, если для данного размера ничего менять не нужно, по сравнению с предыдущим меньшим. Т.е. если мы хотим на мобильнике все в одну колонку, на среднем экране - в две, а на максимальном - в четыре, то можем указать только два класса, пропустив xs, sm и lg: col-md-6 col-xl-3

thenewcode.com/819/A-Before-And-After-Image-Compar...
гуглить "image comparison slider"

Array(49).fill(0).map((v, i) => '.name' + (i + 1))

Safari не поддерживает arrow functions.

Смотря, как ты потом с ними будешь работать.

Если задача стоит только "удобно редактировать", то изобретать ничего не стоит. Просто записывай их в строку, как сейчас в примере.

В чем проблема, собственно? Может быть есть какой-то скрытый смысл, о котором ты не упоминаешь?

$( id).click( function() {
    $( this)
        .off( 'click')
        .on( 'hover', callback);
})

<script>
jQuery(document).ready(function($) {
	var a = $('.bxslider ul').attr('style');
	if (a == '-webkit-transform: translate3d(-11588px, 0px, 0px);') {

	};
});
</script>

Можно как-то так

var allValues = {
    1: {
        price: [2150,2200,2350,1600,1450,1500,1650,900],
        itogo: [1450,1500,1650,900,2150,2200,2350,1600]
    },
    2: {
        price: [1800,1850,2000,1250,1150,1200,1350,600],
        itogo: [2300,2400,2700,1200,3600,3700,4000,2500]
    },
    3: {
        price: [1617,1667,1817,1100,1017,1067,1217,467],
        itogo: [3050,3200,3650,1400,4850,5000,5450,3300]
    },
    4: {
        price: [1525,1575,1725,1025,950,1000,1150,400],
        itogo: [3800,4000,4600,1600,6100,6300,6900,4100]
    },
    5: {
        price: [1470,1520,1670,980,910,960,1110,360],
        itogo: [4550,4800,5550,1800,7350,7600,8350,4900]
    }
}

function setValues(allValues, i) {
    var currency = ' руб.'
    var valuesGroup = allValues[i]
    for (var n in valuesGroup.price) {
        $('#price' + n).html(valuesGroup.price[n] + currency)
    }
    for (var n in valuesGroup.itogo) {
        $('#itogo' + n).html(valuesGroup.itogo[n] + currency)
    }
}

setValues(allValues, 2)