teotlu

Вам нужно что-нибудь такое?

Мне нравится вот этот.
Переход на слайд с нужным номером включается триггером события to.owl.carousel с нужными параметрами.

Можно как-то так.
Цикл for в этом коде инициирует предзагрузку изображений (но не откладывает появление первого изображения до загрузки всех изображений, этот вариант мне показался наилучшим).

Вы уж либо пишите всё на нативном js, либо на jQuery, зачем перемешивать $ и querySelectorAll?
Про проход по элементам в цикле в такой задаче я вообще молчу.
Попробуйте так:

var $links = $('.category a');

$links.on('mouseover', function(){
  $(this).closest('.category').find($links).css('background','url(/image/ico-catalog-bgr.png) repeat-x');
});

$links.on('mouseout', function(){
  $(this).closest('.category').find($links).css('background','');
});

> но теперь у меня есть несколько одинаковый #item
Так не должно быть, id элемента должен быть уникальным и не повторяться у других элементов страницы.

Вам как раз нужно задать уникальные id всем элементам и обратиться к нужному по id, чтобы удалить класс именно у него. А чтобы навесить одинаковые стили, используйте класс item, например.
Пример:

<div id="item1" class="item action"></div>
<div id="item2" class="item action"></div>
<div id="item3" class="item action"></div>

И удаление класса у нужного элемента:
$("#item3").removeClass("action");

Отличная библиотека

Зачем вам такое? Оно выглядит ужасно.
А сделать проще всего будет, как мне кажется, с помощью анимаций CSS и небольшого скрипта js, который задаёт им случайные значения.

На jQuery сделать, конечно, можно. На нём много чего можно сделать.
Но движок анимаций в jQuery оставляет желать лучшего, тогда неплохо бы использовать ещё velocity.js. Или, как я написал выше, анимации CSS.

Я бы вообще использовал для таких задач какой-нибудь фреймворк для работы с канвасом, типа LibCanvas, где уже предусмотрены такие моменты, буферизация и т.д.

Я правильно понимаю, что вам нужно что-то такое?
jsfiddle.net/egzpqoky

1) Есть такая волшебная кнопочка "код", вот здесь: joxi.ru/jMw8VP3JTJCFBVoFgUU , с ней намного проще было бы смотреть ваш код. Или хотя бы отступы добавьте.

2) В чём вопрос-то? Все используемые функции работают и в новой версии библиотеки, если что, можно свериться с разделом api.jquery.com/category/deprecated

3) А вообще для плавности лучше использовать свойство transform, оно поддерживается всеми современными браузерами: caniuse.com/#search=transform
Например, так:
jsfiddle.net/9ynswgn0

Стили внутри head, скрипты по возможности в конце body.

Объясню, почему: стили нам нужно загрузить раньше, чем весь остальной DOM, чтобы сразу отобразить все элементы правильно.

А скрипты не дают загрузиться остальным элементам страницы, пока не загрузятся сами. Если браузер натыкается на скрипт, он прекращает загрузку DOM до тех пор, пока не выполнит скрипт. Поэтому скрипты по возможности лучше засовывать вниз — тогда страница отобразится на экране раньше, визуально загрузка будет быстрее.

Никакого "в среднем" нет, файлов должно быть как можно меньше. Меньше файлов — меньше запросов к серверу. Поэтому стоит использовать или какой-нибудь упаковщик стилей-скриптов, который их минимизирует и сливает в один файл, или AMD-загрузчик, вроде RequireJS или чего-то такого.

jQuery тоже лучше подключать внизу, по описанным мною выше причинам. Но тогда нельзя будет писать всякие onClick="$('.blablabla').hide()", как многие часто делают. Впрочем, так всё равно лучше не делать.

Предполагаю, что придётся использовать событие onResize.
Как-то так (я так понимаю, data — это объект настроек карусели, туда запихнём индикатор инициализации карусели):

data.carouselInitialized = false;
$(window).on( "load.slider_portfolio resize.slider_portfolio", function(){
  if( $(window).width() > 700 ){
    if( !data.carouselInitialized ){
      $("carousel").carouFredSel(
         .........
      );
      data.carouselInitialized = true;
    }
  }else{
    $("carousel").triggerHandler("destroy"); // По идее, т.к. это просто триггер события, если карусель не создана, ошибки никакой быть не должно
    data.carouselInitialized = false;
  }
});

Приведённый мной код может не работать, потому что он написан, просто чтобы показать идею.
Вообще, лучше всего покопаться в API слайдера: docs.dev7studios.com/jquery-plugins/caroufredsel-a...

А ещё советую для таких вещей использовать карусели, предназначенные для адаптива, например, эту: owlcarousel.owlgraphic.com
Сразу множество проблем пропадёт.