2

Пытаюсь сделать адаптивным следующий элемент:

скриншот макета

Не хотелось делать длинную вертикальную портянку из восьми блоков, поэтому решил сделать слайдером использовав библиотеку 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 &rarr;</a>
            </div>
        </div>
    </figure>

    <figure>
        <div>
            <div> 
                <h3>Our clients</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Our clients &rarr;</a>
            </div>
            <div> 
                <h3>How to shoo great</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Find Out more &rarr;</a>
            </div>
            <div> 
                <h3>Perfect pictures</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Find Out more &rarr;</a>
            </div>
            <div>
                <h3>Start somthing new</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Get Started Now &rarr;</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);
    }
});

1 ответ 1

2

Тут все для примера. смотри сам куда перемещать что. 100 поменяй на 1024

    let slide1 = document.querySelector('#slideOne');
    let slide2 = document.querySelector('#slideTwo');
let childrens = Array.from(slide2.childNodes)
    if (window.matchMedia("(min-width: 500px)").matches) {
// перемещаем контент второго слайда в первый
      slide1.append.apply(slide1,childrens)
      slide2.remove()
    } else{
       slide2.append.apply(slide2,childrens)
       slide1.parentNode.insertBefore(slide2, slide1.nextSibling)
    }
.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;
}

/* общие слили для всех элементов слайдов (например padding) */
.peppermint__element {
    box-sizing: border-box;
    width: 50%;
    height: 180px;
    float: left;
    padding: 20px 15px;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    text-align: left;
  }
  
.peppermint__element > h3 {
padding: 0;
margin-top: 5%;
font-weight: lighter;
}
<div class="peppermint" id="peppermint">

        <figure id="slideOne">
            <div class="peppermint__slide-container">
            <div class="peppermint__element" id="peppermint__slide-one">
                <h3>Design quality</h3>
                <p>Lorem ipsum dolor sit amet consectetur.</p>
            </div>
            <div class="peppermint__element" id="peppermint__slide-two">
                <h3>Built to last</h3>
                <p>Lorem ipsum dolor sit amet consectetur.</p>
            </div>
            <div class="peppermint__element peppermint__element_full" id="peppermint__slide-three"> 
                <h3>Sign up & see why</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Get Started Now &rarr;</a>
            </div>
            </div>
        </figure>

        <figure id="slideTwo">
            <div class="peppermint__slide-container">
            <div class="peppermint__element js-clone" id="peppermint__slide-four"> 
                <h3>Our clients</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Our clients &rarr;</a>
            </div>
            <div class="peppermint__element" id="peppermint__slide-five"> 
                <h3>How to shoo great</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Find Out more &rarr;</a>
            </div>
            <div class="peppermint__element" id="peppermint__slide-six"> 
                <h3>Perfect pictures</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Find Out more &rarr;</a>
            </div>
            <div class="peppermint__element" id="peppermint__slide-seven">
                <h3>Start somthing new</h3>
                <p>Lorem ipsum dolor sit.</p>
                <a href="#">Get Started Now &rarr;</a>
            </div>
            </div>
        </figure>

    </div>

5
  • Сделал и поменял на 1024px, теперь все более менее хорошо. Вот результат. Но есть один нюанс, если окно браузера уменьшать до 1024px и ниже то предыдущее состояние не возвращается. Получается вот так !скриншот По идее при: if (window.matchMedia("(max-width: 1024px)").matches) должен обратно вернуться второй слайд вместе с 4 элементами. 23 дек 2018 в 13:21
  • .. так смотри.. все перемещено уже.. теперь получается что тебе нужно переместить вес обратно тоесть добавить к if else где перемечтить все блоки обратно 23 дек 2018 в 13:28
  • да, я понял что надо сделать !так. вроде все просто, но я в синтаксисе и методах js еще пока плохо понимаю. Если не трудно, подскажи как должна выглядеть строка, которая вернет все на исходную? 23 дек 2018 в 17:10
  • я немного переделал результат..но возможно придется добавить слушатель на ресайз. 23 дек 2018 в 18:10
  • Не помогло, ресайз не замечает пока не перезагрузить страницу. Но, спасибо за подсказку. Думаю слушатель поможет, буду пробовать... 23 дек 2018 в 18:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.