Вопросы Теги

Карусель для отображения полной ширины экрана только для маленьких экранов

Это можно сделать только с встроенными модулями довольно компактно, используя списки и интерпретации строк. Принимает список словарей всех одинаковых форматов ... 

def tableit(dictlist):
    lengths = [ max(map(lambda x:len(x.get(k)), dictlist) + [len(k)]) for k in dictlist[0].keys() ]
    lenstr = " | ".join("{:<%s}" % m for m in lengths)
    lenstr += "\n"

    outmsg = lenstr.format(*dictlist[0].keys())
    outmsg += "-" * (sum(lengths) + 3*len(lengths))
    outmsg += "\n"
    outmsg += "".join(
        lenstr.format(*v) for v in [ item.values() for item in dictlist ]
    )
    return outmsg
0
задан Chibles 24 March 2019 в 18:01
поделиться

2 ответа

Вы можете попробовать использовать комбинацию медиазапросов и правила !important. Предполагая, что 768px является вашей мобильной точкой останова: 

@media(max-width:768px){
  #catalogueCarousel {
    width: 100% !important;
  }
}

В качестве альтернативы вы можете использовать jQuery: 

function resizeCarousel() {
  if($window.width() < 768) {
    $('#catalogueCarousel')
      .removeClass('w-50')
      .addClass('w-100');
  } else {
    $('#catalogueCarousel')
      .removeClass('w-100')
      .addClass('w-50');
  }
}
resizeCarousel();
$window.resize(resizeCarousel);
0
ответ дан Marc Randall 24 March 2019 в 18:01
поделиться

Вам просто нужно добавить медиа-запрос для небольшого устройства. Добавьте ниже CSS в таблицу стилей, я надеюсь, что это решит вашу проблему. Спасибо 

@media only screen and (max-width: 768px) {
  #catalogueCarousel {
    width: 100% !important;
  }
}
0
ответ дан Hassan Siddiqui 24 March 2019 в 18:01
поделиться