Вывести карточки по 5 или 6 штук в одну строку

Расширяем возможности стандартного кол-ва карточек в строку
Пример работы скрипта
Карточки в 6 колонок
Карточки в 5 колонок
Quality
We are a leading firm in providing quality and value to our customers.
Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night.
Flexibility
This method allows us to achieve success in problems of all levels.
Experience
Each member of our team has at least 5 years of legal experience.
Presents
We like to make people happy. We ask our clients about their birthday and prepare cool presents.
Efficiency
We care about our clients' time. Just give us a call, and we will help you with all the questions.
Quality
We are a leading firm in providing quality and value to our customers.
Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night.
Flexibility
This method allows us to achieve success in problems of all levels.
Experience
Each member of our team has at least 5 years of legal experience.
Presents
We like to make people happy. We ask our clients about their birthday and prepare cool presents.
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу любой блок с несколькими карточками в строку, например, преимущества
    Скрипт работает практически со всеми блоками, где есть карточки в колонках, но рекомендуется применять его к блокам преимуществ, услуг и карточек, где есть 3 или 4 карточки в ряд
  • 2
    Установите скрипт на страницу в HTML-блок
    Скрипт должен быть установлен ниже блока попапа, в самом конце страницы, или в подвале
  • 3
    Добавьте класс uc-fivecols или uc-sixcols на нужные блоки, для вывода карточек в 5 или 6 колонок, соответственно
    Посмотреть как.
  • 4
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт
<style>
    .t-col_5-12 {
        max-width: 200px;
    }

    @media (max-width: 1200px) {
        .t-col_5-12 {
            max-width: 172px;
        }
    }

    @media (max-width: 960px) {
        .t-col_5-12 {
            max-width: 100%;
        }
    }
</style>
<script>
    setCustomCols('.uc-sixcols', 6);
    setCustomCols('.uc-fivecols', 5);

    function setCustomCols(id, cols = 5) {
        const $wrapper = $(id);

        let className = 't-col_5-12';
        if (cols === 6) {
            className = 't-col_2';
        }

        const $cols = $wrapper
            .find('.t491__col, .t502__col, .t503__col, .t850__col, .t851__col')
            .removeClass('t-col_12 t-col_6 t-col_4 t-col_3')
            .addClass(className);

        let $clear = $wrapper.find('.t-clear');

        $cols
            .filter((idx) => idx && !(idx % cols))
            .each(function() {
                $(this).before($clear.clone());
            });

        $clear.remove();

        if ($wrapper.find('.t850').length) {
            $cols.unwrap('.t850__row');
            for (let i = 0; i < $cols.length; i += cols) {
                $cols.slice(i, i + cols).wrapAll('<div class="t850__row"></div>');
            }
        }
    } // Инструкция по работе со скриптом https://trilda.ru/kak-sdelat-5-ili-6-kartochek-v-stroku
</script>
Вопросы и комментарии
Made on
Tilda