@Zenko

Как в owl carousel добавить надпись?

Как в owl carousel добавить надпись на картинку чтобы при разных разрешениях экрана текст отображался фиксировано?
Вот мой код:
<div id="main-slider" class="owl-carousel owl-theme">
   					<div class="item"><img src="img/slide1.jpg" alt="Victory">
						<span class="slide-caption">
							Заголовок
						</span>
						<span class="slide-text">
							Текст
						</span>
   					</div>
</div>


#main-slider {				
			width: 100%;			
			.item {
				position: relative;	
					img{
	    			display: block;
	    			width: 100%;
	    			height: auto;
					}
				.slide-caption{
					color: $white-color;
					font-family: Myriad Pro;
					font-size: 62px;
					position: absolute;
					top: 67px;
					right: 849px;
				}
				.slide-text{
					line-height: 55px;				
					width: 42%;
					color: $white-color;
					font-family: Segoe UI;
					font-size: 57px;
					font-weight: bold;
					text-transform: uppercase;
					position: absolute;
					top: 124px;
					right: 317px;
				}
			}
		}
  • Вопрос задан
  • 3678 просмотров
Решения вопроса 1
@R3AD
#main-slider {				
      width: 100%;	
      }
      .item {
        position: relative;	
        }
          img{
      			display: block;
      			width: 100%;
      			height: auto;
          }
        .slide-caption{
          color: $white-color;
          font-family: Myriad Pro;
          font-size: 62px;
              display: block;
    left: 0;
    top: 0;
    position: absolute;
        }
        .slide-text{
          line-height: 55px;				
          width: 42%;
          color: $white-color;
          font-family: Segoe UI;
          font-size: 57px;
          font-weight: bold;
          text-transform: uppercase;
          position: absolute;
          top: 124px;
          right: 317px;
        }
      }
    }
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы