[html]<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/40249.css">
<div id="port-block1" class="free">
<a class="tip" id="cover" title="Слайдер форумов в категориях">
<div id="icon"></div>
<img src="https://forumuploads.ru/uploads/0007/e3/f7/2/151331.gif" class="postimg">
</a>
<div id="cover-block">
Дата: 30.09.2020<br>
Автор: <a href="/profile.php?id=6774" target="_blank">satsana</a><br>
Бесплатный скрипт<br>
Описание: Превращение категорий в горизонтальный слайдер для форумов.
</div>
</div>
<style>
.punbb .topicpost .post-content .spoiler-box {
border: 1px solid #26af33;
background-color: rgba(38,175,51,0.1);
}
.punbb .post-content .spoiler-box > div:hover {background-color: rgba(38,175,51,0.6);}
.punbb .post-content .spoiler-box > div {background-color: rgba(38,175,51,0.3);}
.post-content .spoiler-box > div.visible {background-color: rgba(38,175,51,0.8); color: #fff !important;}
#pun .punbb .post-content hr {border: 3px solid #279933;}
.post-content td {background-color: rgb(0,0,0,0.5) !important;}
.visible .quote-box {background-color: rgba(0,0,0,0.5);}
</style>[/html]
Все коды стилей ставятся в Администрирование > Свой стиль или 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'); });
