如何使用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屏幕和(最小宽度：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) i。e。当屏幕超过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;
     }
}