Как реализовать новости через вертикальный слайдер?

Question

[dmitriu256]

Как реализовать подобную карусель новостей? На Bootstrap.
1) С начала один слайд содержит три слайда. (полноэкранная версия)
2) Один слайд и в нем три слайда (блока) расположены вертикально (планшетная версия)
3) Каждый 1 блок=отдельный слайд - классический слайдер (мобильная версия)
Как правильно реализовать п. №2?

(полная версия)

(планшетная версия -- как добиться такого отображения)

(мобильная версия)

Реализовывал следующим образом:
Пробовал через слайдер Bootstrap-а не подходит, т.к. выводит по одному слайду--> нет возможности вывести сразу все три блока.

Пробовал через плагин owlCarousel --> через js настраивал плагин в итоге п.1 и п.3 полностью реализуем.
п. 2 -->изменял свойства animateOut : "slideOutUp"
animateIn : "slideInUp" - изменилось естественно только направление анимации, работает отдельно с каждым слайдом, но никак не работает, когда три слайда объединены в один.

$(document).ready(function() {
    $("#news-slider").owlCarousel({
        items : 3,
        itemsDesktop : [1200,3],
        itemsMobile : [320,1],
        pagination :true,
        autoPlay : true
    });
});

Заранее благодарен за ваши ответы!

Comments

[dmitriu256]

Макет взял от HTML академии и пытаюсь реализовать через Bootstrap.

Answer 1

[tyzberd]

1. попробовать kenwheeler.github.io/slick и slickSetOption
2. можно прописать условие на ширину экрана и запускать инициализацию с разными параметрами.
Так же в событие resize добавить условия
Там где 3 слайда вообще должна быть карусель, может она только на мобильных?

Comments

[dmitriu256]

Карусель только на мобильном, насколько верно мое решение? Немного не там написал ответ.

[tyzberd]

как то так https://codepen.io/anon/pen/rvdqzG

Answer 2

[dmitriu256]

Слайдер действительно только на мобильных, как реализовать в таком случае?
Представляю следующим образом, верно ли?
1)Обычный список ul>li>a(горизонтальное и вертикальное положение через флексы) для десктопа и планшета, а для мобильной версии списку ul просто присваиваем класс owlCarousel или slick.
2) Если использовать стандартную карусель от Бутстрапа

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="item active">
      <div class="news">

      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
    <div class="item">
      <img src="..." alt="...">
    </div>
  </div>
</div>