Как добавить текст в нижней части изображения с помощью ползунка swiper

Question

Я хочу сделать слайдер для своего продукта с помощью http://idangero.us/swiper/, Я могу контролировать точку останова изображения с помощью этого кода в javascript

breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }

, но моя проблема заключается в том, когда я хочу добавить текст внижняя часть изображения вот так

пример изображения я пытаюсь использовать экран @media и (min-width: 1024px) и работать с этим кодом

.swiper-slide .title {
    position: absolute;
    top: 210px;
    left: 10px;
    color: white;
    font-weight: bold;
    font-size:12pt;
    font-family: 'Mark Bold' !important;
  }

, нотекст не реагирует, если я изменю ширину экрана, текст исчезнет, ​​

как решить эту проблему?у ползунка-переключателя есть код для добавления текста / подписи к изображению?

Answer 1

Это нормально! потому что вы положили @media screen and (min-width: 1024px) я. е. когда экран превышает 1024px отображает эту часть CSS. возможно, необходимо добавить другие элементы управления на устройствах

@media screen and (min-width: 992px)
@media screen and (min-width: 768px)
@media screen and (min-width: 576px)

и вы меняете код CSS

Answer 2

Попробуйте это для отзывчивого CSS

@media screen and (max-width:1024px){
    .swiper-slide .title {
       position: absolute;
       top: 210px;
       left: 10px;
       color: white;
       font-weight: bold;
       font-size:12pt;
       font-family: 'Mark Bold' !important;
     }
}

@media screen and (max-width:768px){
        .swiper-slide .title {
           position: absolute;
           top: 210px;
           left: 10px;
           color: white;
           font-weight: bold;
           font-size:12pt;
           font-family: 'Mark Bold' !important;
         }
    }

 @media screen and (max-width:640px){
    .swiper-slide .title {
       position: absolute;
       top: 210px;
       left: 10px;
       color: white;
       font-weight: bold;
       font-size:12pt;
       font-family: 'Mark Bold' !important;
     }
}

@media screen and (max-width:320px){
    .swiper-slide .title {
       position: absolute;
       top: 210px;
       left: 10px;
       color: white;
       font-weight: bold;
       font-size:12pt;
       font-family: 'Mark Bold' !important;
     }
}