Dennis

Question

Вёрстка

Средний

Верстка блока «как мы работаем» со стрелками между элементами, как оптимальнее?

3 подписчика
более трёх лет назад
983 просмотра

3

ответа

Answer 1 · 2021-04-26 04:10:15

как-то так должно работать

function initSlider() {
new Swiper('.swiper', {
	loop: false,
	sped: 2400,
	navigation:{
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
	pagination: {
		el: '.swiper-pagination',
		clickable: true
	},
	breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 2,
      spaceBetween: 30
    },
    // when window width is >= 1920px
    1920: {
      slidesPerView: 1,
	    spaceBetween: 60,
	    autoplay:false,
    }
  }
	 
});
}


function detectDevice() {
	if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
    // true for mobile device
    initSlider();
    
	}else{
    // false for not mobile device
    
	}
}

detectDevice();

Answer 2 · 2020-12-19 23:26:35

как всегда есть несколько вариантов решения, один из них, поместить модальное окно внутрь overlay (затемнения), которому добавить

display: flex
align-items: center
justify-content: center

это не самый лучший вариант, но если модалка одна, и больше никакого динамического контента не предвидится, то можно. 2й вариант - описан в ответе выше. только вместо fixed можно absolute.

А чтобы скрыть прокрутку в функцию открытия нужно добавить
document.body.style.overflow = 'hidden'
А в функцию закрытия
document.body.style.overflow = 'auto'
Также можно эту конструкцию обернуть в переменную, чтобы не дублировать код, например так

const body = document.body
//open modal
body.style.overflow = 'hidden'

//close modal
body.style.overflow = 'auto'

Answer 3 · 2020-09-10 22:56:51

попробуй position: absolute для контейнера с кнопками

.buttons{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    padding: 15px;
    background-color: rgb(78, 76, 76);
}

Проверил, работает

Answer 4 · 2020-12-17 02:23:15

Лучше сделай img, в данном случае это изображение, скорее контентное, чем декоративное, поэтому псевдоэлемент не совсем подойдет. Оберни img и всю текстовую конструкцию справа в отдельные обертки, а дальше уже flexbox в помощь

Еще, как вариант, если таких блоков несколько, то соедини все подобные картинки в спрайт, добавь пустой тэг, например, span и с помощью css background добавь нужное изображение.

Answer 5 · 2020-12-03 22:38:13

В репозитории на Github необходимо создать новую ветку с именем 'gh-pages' . Перейти в Settings репозитория, пролистать страницу вниз до GitHub Pages и в настройках указать данную ветку.
И еще в gulpfile.js нужно прописать путь, где находится скомпилированный проект, примерно так

const gulp = require('gulp');
const ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
    return gulp.src('./dist/**/*')
        .pipe(ghPages());
});

где dist - это папка с готовой компиляцией проекта
И все заработает.

Dennis

Наибольший вклад в теги

JavaScript

HTML

CSS

Swiper

Canvas

WooСommerce

Лучшие ответы пользователя

Как отключить swiper слайдер на десктопе?

Как центрировать div в области просмотра страницы?

Не правильное расположение линии относительно курсора canvas?

Реализация блока?

Как сделать деплой собраного gulp-ом проект на гит?

Лучшие вопросы пользователя

Верстка блока «как мы работаем» со стрелками между элементами, как оптимальнее?

Как оптимальнее сверстать блок неправильной формы?

Войдите на сайт