BRO
contacts
team
CALL ME
/ description
Be happy
There is no design without discipline. There is no discipline without intelligence.
/ cases
Brighton Beach
/ The high drama at the trial had kept the Edo gossip mill busy ever since. When Reiko and her escorts had taken Lady Mori and Ukon to the castle, Ukon had gone stark raving mad along the way.
Data
05.09.2021
The best ideas come as jokes. Make your thinking as funny as possible.
Title
Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.
Design creates culture. Culture shapes values. Values determine the future.
Как сделать
Фиксированное меню и активная вкладка
Слайдер со стрелками
Супер подробная инструкция с видосом на сайте Nolim.cc
Лень вникать в код и менять что-то вручную? Ребята все сделали за вас.
Инструкция
1. Создаем 2 блока. Первый с кнопками для слайдера, второй - сам слайдер.
2. В первом создаем кнопками наши стрелки, присваиваем классы arrow-left и arrow-right
3. Во втором блоке располагаем элементы со сдвигом вправо
4. В коде указываем значение сдвига для каждого разрешения экрана
5. Добавляем ID наших блоков, согласно описанию
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {

    // Укажи ID Zero блока cо скроллом и включи overflow: auto
    var blockScrollId = '#rec336509829';
    
    // Укажи ID Zero блока cо стрелками и добавь каждой класс arrow-left или arrow-right
    var blockArrowsId = '#rec336508636';
    
    var shiftSize;
    $(window).on('load resize', function(){
        
        if (window.matchMedia('(max-width: 480px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 320-480px
            shiftSize = '297px';
        }
        else if (window.matchMedia('(max-width: 640px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 481-640px
            shiftSize = '297px';
        }
        else if (window.matchMedia('(max-width: 960px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 641-960px
            shiftSize = '297px';
        }
        else if (window.matchMedia('(max-width: 1200px)').matches) {
            // Укажи величину сдвига при клике на стрелку для разрешения 961-1200px
            shiftSize = '297px';
        }
        else {
            // Укажи величину сдвига при клике на стрелку для разрешения больше 1200px
            shiftSize = '297px';
        }

    });
    
    
    $(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
    $(blockScrollId + ' .t396').css('overflow','hidden');
    
    new ScrollBooster({
        viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
        content:  $(blockScrollId + ' .scrollbooster-content')[0],
        scrollMode: 'native',
        pointerMode: 'mouse',
        bounce: false,
        onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
    });

    $(blockArrowsId + ' .arrow-left').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
    });

    $(blockArrowsId + ' .arrow-right').on('click', function(e) {
        e.preventDefault();
        $(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
    });

});
</script>

<style>
.scrollbooster-viewport {
    cursor: -webkit-grab;
    cursor: grab;
    padding-bottom: 30px;
    margin-bottom: -30px;
}
.scrollbooster-viewport:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
.scrollbooster-content {
    position: absolute;
    width: 100%;
    height: 100%;
}
.arrow-left,
.arrow-right {
    cursor: pointer;
}
</style>
ID шаблона
21617106
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона