Условия использования:
Вы можете использовать все материалы, соблюдая условия использования бесплатного контента.

Инструкции
Все коды стилей ставятся в Администрирование > Свой стиль или HTML-верх между тегов <style>

Код:

<style>
тут коды
</style>

Код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

---

Скрипт
Скрипт устанавливаем в HTML-низ.

Вариант 1. Прокрутка останавливается при достижении конца:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Вариант 2. Прокрутка по кругу:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

---

Настройки стиля
1. Ставим форумы в строчку
Для начала нужно поставить коды, которые позволят "превратить" категорию в слайдер

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

2. Блочная верстка форумов
Затем надо сделать блочную верстку форумов на главной, чтобы поправить отображение форумов, задать их ширину и т.д.

Подробнее о блочной верстке форумов вы можете почитать тут: Стиль разделов форума на главной (MyBB) [Герда]
Там вы найдете ответы на все вопросы про "Украшательства" форумов и как расставить контент ячеек внутри форума-блока.

Вот код, который необходимо поставить для форумов

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

3. Добавляем в категории стрелки

Стрелки вставляются через селекторы .catleft и .catright в заголовках категорий. Если они у вас задействованы (для иконок, картинок или еще чего-то), надо будет что-то придумать.
Также многие стили по умолчанию скрывают catright и catleft. На всякий случай я постаралась подобрать такой код, чтобы они точно отобразились. Но если пользуетесь функцией "Свой стиль", лучше убедиться, что у вас просто нет кодов, скрывающих этот селектор (или найти и удалить их).

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

---

Настройки скрипта

var leftMargin = 40;

отступ блока с форумом

var blockWidth = 600;

полная ширина блока (включая отступ)

Изменение начального слайда
Если нужно поменять начальную позицию слайдера для определенных категорий, сожно добавлять такие строки в конец скрипта:

$('.category-10')[0].dataset.start = 1;

Красное - селектор конкретной категории. Как узнать кникальный селектор можно посмотреть здесь: Дизайн отдельных категорий и заголовков категорий
Синее - номер форума, на котором должен открыться слайдер, нумерация начинается с 0
После них скрипту придется нужно переместиться в новое положение слайдов, поэтому добавляем после наших кодов:

Код:

$('.category').each(function() {
  $(this).find('tbody tr').first().css('margin-left', (leftMargin - $(this)[0].dataset.start * blockWidth) + 'px');
});