2

Есть сайт (адаптивный). У меня есть на странице в блоке контента 3 блока друг за другом (по типу новость с кратким содержанием, по нажатии на которую кидает на другую страницу, где эта новость открывается в полном обьъеме).

Я хочу сделать в адаптивке, чтобы эти блоки находились в слайдере (который был бы просто по центру страницы), и он пролистывал сам новости, а при нажатии повторялось тоже самое, что и выше.

Было бы просто, если бы слайдер был отдельным блоком, который можно none на обычном расширении и inline-block на мобильной версии. Но как быть, если мне нужно им обернуть блоки? Тогда все содержимое тоже скроется при none.

Может быть, это делается с помощью js?

10
  • помнится когда только начинал, мы дублировали такие блоки. Один для декстопа, второй для мобилки, скрываем тот или другой. Сейчас конечно, я бы обернул блоки в контейнер слайдера сразу, но слайдер инициализировал только на маленьком экране. Например, в слайдере slick есть breakpoint из коробки.
    – olegatro
    28 янв 2016 в 0:25
  • Или необходимо создать рядом такой слайдер с этими блоками внутри и скрыть его?
    – fisher
    28 янв 2016 в 0:25
  • breakpoint это что-то вроде запуска слайдера, на каком-то расширении, без скрытия содержимого?
    – fisher
    28 янв 2016 в 0:28
  • именно, посмотрите плагин, там есть блок responsive desing
    – olegatro
    28 янв 2016 в 0:30
  • Насколько я понял, это отображение количества слайдов внутри слайдера?
    – fisher
    28 янв 2016 в 0:35

1 ответ 1

2

В данной ситуации можно использовать любой слайдер, который вам понравится. Определяем размер экрана через $(window).width() и если размер нам подходит, инициализируем слайдер, например:

'use strict';
$(function () {
  var $window = $(window);
  var $slider = $('.js-slider');
  var hasInitSlider = false;

  function initSlider() {
    if ($window.width() < 400 && !hasInitSlider) {
      $slider.slick(); // слайдер slick
      hasInitSlider = true;
    } else if ($window.width() > 400 && hasInitSlider) {
      $slider.slick('unslick');
      hasInitSlider = false;
    }
  }

  initSlider();

  //дополнительно можно проверять на resize, но не обязательно.
  $window.on('resize', function () {
    initSlider();
  });
});

Пример решения

Пояснение:
1. Окно с блоками лучше расположить слева или справа, что бы удобнее можно было изменять размер окна. (кнопка Change View)
2. В примере используется шаблонизатор(jade) и препроцессор(stylus). Если с ними не знакомы, там есть кнопка View Compiled.

0

Ваш ответ

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

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