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,
        }
      }

但是我的问题是我想在图像底部添加这样的文本

sample image 我尝试使用@media屏幕和（最小宽度：1024像素）并使用此代码运行

.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;
     }
}

如何使用滑动滑块在图像底部添加文本

2 个答案: