Пытаюсь сделать адаптивным следующий элемент:
Не хотелось делать длинную вертикальную портянку из восьми блоков, поэтому решил сделать слайдером использовав библиотеку peppermint. Разбил на два слайда: по 4 элемента в каждом.
На смартфонах и планшетах все супер! А вот большими столкнулся с проблемой. При ширине окна браузера более 1024px мне нужно отобразить все 8 элементов.
Решение придумал такое: 1) перенести 4 элемента из второго слайда в первый; 2) удалить второй слайд из DOM 3) все это должно происходить при разрешении > 1024px
но не знаю как реализовать, я в js пока не силен
HTML
<div class="peppermint" id="peppermint">
<figure>
<div>
<div>
<h3>Design quality</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div>
<h3>Built to last</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div>
<h3>Sign up & see why</h3>
<p>Lorem ipsum dolor sit.</p>
<a href="#">Get Started Now →</a>
</div>
</div>
</figure>
<figure>
<div>
<div>
<h3>Our clients</h3>
<p>Lorem ipsum dolor sit.</p>
<a href="#">Our clients →</a>
</div>
<div>
<h3>How to shoo great</h3>
<p>Lorem ipsum dolor sit.</p>
<a href="#">Find Out more →</a>
</div>
<div>
<h3>Perfect pictures</h3>
<p>Lorem ipsum dolor sit.</p>
<a href="#">Find Out more →</a>
</div>
<div>
<h3>Start somthing new</h3>
<p>Lorem ipsum dolor sit.</p>
<a href="#">Get Started Now →</a>
</div>
</div>
</figure>
</div>
CSS
.peppermint {
box-sizing: border-box;
width: 100%;
}
.peppermint__slide-container {
box-sizing: border-box;
width: 100%;
height: auto;
float: left;
}
.peppermint__slide-container_full {
width: 100%;
float: left;
}
.peppermint__element {
box-sizing: border-box;
width: 50%;
height: 180px;
float: left;
padding: 20px 15px;
color: white;
text-align: left;
}
JS
var slider = Peppermint(document.getElementById('peppermint'), {
dots: true,
slideshow: false,
disableIfOneSlide: true,
speed: 500,
slideshowInterval: 5000,
mouseDrag: true,
stopSlideshowAfterInteraction: true,
slidesContainer: undefined,
onSetup: function(n) {
console.log('Найдено слайдов: ' + n);
}
});