Сделать класс не .prod1 и .prod2, а просто .prod, добавить атрибут data-num и фсе:
$('.prod').click(function(){
var num = $(this).attr('data-num');
$('.product-'+num).addClass('hidden');
$('.product-md-'+num).removeClass('hidden');
});
bxSlider - точно можно.
Fotorama - тоже можно если переписать css и добавить немного jquery. По умолчанию там только верх и низ, но это не значит что нельзя.
если js - пугает - берите bxSlider, как посоветовал @webirus
Вот тут точно на bxSlider вертикальные миниатюры сделаны https://demo1-ru.webasyst.com/headphones/beats/1029/
У Вас все запросы идут через index.php, кроме папок (assets|js|images|css|fonts|img), так что все правильно работает. Либо добавьте еще одно исключение для *.html, либо положите его в одну из этих папок.
Просто не надо хранить html, храните данные, например в json в файлах или в mysql. И имейте HTML шаблон, который используется динамически при отображении данных. Доделали шаблон - все поменялось.
Вы читали доки? getbootstrap.com/javascript/#carousel-methods
Чем Вас не устраивают методы .carousel('prev') и .carousel('next'), только селектор будет не 1 как в примере, а несколько. Или через each написать. И вызывайте эти методы по клику на что угодно. Хоть на стрелки слайдеров, хоть на отдельные кнопки, хоть на логотип сайта.
А зачем считать длинну массива если все равно все перебираете? Запускаете 1 foreach в нем другой и проводите свои махинации.
Так же обратите внимание на array_diff_assoc и други функции работы с массивами. Например in_array и т.д.
Не совсем понимаю Вы сравниваете зависимо от ключей или нет?
В html5 появилось web storage (local storage), которое заменит кукисы, вот гайд: www.w3schools.com/html/html5_webstorage.asp
Прочитайте и Ваша проблема решится 2 строчками кода.
Формировать урл. В чем вопрос? Как работать с select? Тогда вот: www.webnotes.com.ua/index.php/archives/699
Или вопрос в контролере? Тогда при чем тут javascript?
Опишите с чем у Вас сложность. А то это не вопрос, а "сделайте за меня".