0

Colegas.

Tenho um slide feito em bootstrap, porém gostaria de colocar uma imagem sobre todos os slides, ou seja, conforme o slide passar, a imagem continuar sobre elas, sem mexer. O código que tenho é:

<header id="myCarousel" class="carousel slide">
 <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
<div class="carousel-inner">
<div class="item active">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>

Isso é possível?

1

1 Resposta 1

2

Você pode colocar a imagem fora da classe myCarousel (logo abaixo do fechamento da tag), criando outra div com a classe do botstrap "text-center" para alinhar.

Exemplo: http://jsfiddle.net/spz5yj6r/

2
  • Olá denis. Perfeito, mas como eu faria para colocar no lado esquerdo? Tentei colocar text-left, mas ele ficou fora do slide, grudado no canto esquerdo da tela.
    – user24136
    21/01/2016 às 13:01
  • 1
    COnsegui Denis. Diminui o width e funcionou. Obrigado!
    – user24136
    21/01/2016 às 13:04

Você deve fazer log-in para responder a esta pergunta.