BRO
CALL ME
/ description
Be happy
There is no design without discipline. There is no discipline without intelligence.
/ cases
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 наших блоков, согласно описанию
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 шаблона