Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Dúvida no Ex. 1 da Aula 4 - Banner

Meu código está igual ao da explicação do vídeo mas meus slides não passam, estou postando aqui meu código para análise. blz.

<!DOCTYPE html>
<html>
<head>
    <title>Loja virtual</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/bootstrap.min.js"></script>
    <meta charset="UTF-8" name="viewport" content="width=device-width" />
    <style>
        .navbar-header button {
            color:#fff;
        }
        .fullscreen {
            width:100%;
        }
        main {
            padding-top:50px;
        }
    </style>
</head>
<body>
<header>
    <nav class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Caelum</a>    
            <button class="navbar-toggle" type="button" data-target=".navbar-collapse" data-toggle="collapse">Menu</button>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Novidades</a></li>
                <li><a href="#">Mais vendidos</a></li>
                <li>
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        Camisetas
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Masculinas</a></li>
                        <li><a href="#">Femininas</a></li>
                        <li><a href="#">Infantil</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-right navbar-form">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Digite a sua busca" />
                </div>
                <input type="submit" class="btn btn-default" value="buscar"/>
            </form>
        </div>
    </nav>
</header>
    <main>
        <div class="container-fluid">
            <div class="row">
                <div id="carousel-demo" class="carousel slide" data-ride="carousel" data-wrap="True" interval="50">
                      <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-demo" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-demo" data-slide-to="1"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="img/banner1.jpg" alt="Moda" class="fullscreen">
                                <div class="carousel-caption">
                                    <h3>Moda Adulto</h3>
                                    <p>Nova Coleção de Moda Adulto. Não Perca</p>
                                </div>
                        </div>
                        <div class="item">
                            <img src="img/banner2.jpg" alt="Moda Infantil" class="fullscreen">
                                <div class="carousel-caption">
                                    <h3>Moda Infantil</h3>
                                    <p>Nova Coleção de Moda Infantil. Não Perca</p>
                                </div>

                        </div>    
                    </div>

                    <!-- Controls -->
                    <a href="#carousel-demo" data-slide="prev" class="left carousel-control">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                    <a href="#carousel-demo" data-slide="next" class="right carousel-control">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </a>
                </div>    
            </div>
        </div>
        <div>
            <h3 class="text-center">Novidades</h3>
        </div>
        <div class="col-xl-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="img/camisa-azul.png" alt="camisa azul importada" />

                <div>
                    <h4>Camisa Azul Importada</h4>
                    <p>Camisa azul importada com preço acessivel e com pano de qualidade</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn btn-default">R$ 190,00</a>
                <a href="#" class="btn btn-primary">
                    <span class="glyphicon glyphicon-shopping-cart">
                    </span>
                    Comprar
                </a>
            </div>
        </div>

        <div class="col-xl-12 col-md-4 thumbnail text-center">
            <figure>
                <img src="img/camisa-rosa.png" alt="camisa rosa argentina" />

                <div>
                    <h4>Camisa Rosa Argentina</h4>
                    <p>Camisa rosa Argnetina com preço acessivel e com pano de qualidade</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn btn-default">R$ 210,00</a>
                <a href="#" class="btn btn-primary">
                    <span class="glyphicon glyphicon-shopping-cart">
                    </span>
                    Comprar
                </a>
            </div>
        </div>

        <div class="col-xl-12  col-md-4 thumbnail text-center">
            <figure>
                <img src="img/camisa-azul.png" alt="camisa azul importada" />

                <div>
                    <h4>Camisa Azul Nacional</h4>
                    <p>Camisa azul nacional com preço acessivel e bonita</p>
                </div>
            </figure>
            <div class="btn-group">
                <a href="#" class="btn btn-default">R$ 90,00</a>
                <a href="#" class="btn btn-primary">
                    <span class="glyphicon glyphicon-shopping-cart">
                    </span>
                    Comprar
                </a>
            </div>
        </div>        
    </main>
</body>
</html>
7 respostas
solução!

Olá João! O problema é que você não adicionou o Jquery em sua pagina. Ponha tanto o jquery quanto o bootstrap.js antes de terminar a sua tag </body> Ficando da seguinte forma:

....
     </main>
     <script src="js/jquery.min.js"></script>
     <script src="js/bootstrap.min.js"></script>
</body>

Para baixar o Jquery basta acessar o seguinte link: https://jquery.com/download/

Espero ter ajudado. Bons Estudos!

Blz. Funcionou perfeito. Obrigado pela ajuda. Só mais uma coisa essa informação deveria ser passada no video e na explicação. Mas tudo bem.

O professor mencionou baixar os arquivos jquery nas aulas ? NO meu nem o menu drop down funciona.

qual arquivo do jquery faço download?

Cristiana você faz o download no link que deixarei ao final. Quanto a qual você irá baixar aconselho a baixar o 1.x pois o 2.x não suporta Internet Explorer 6, 7, ou 8, logo caso você esteja usando um desses ou alguém que utilize seu projeto for utilizar com essas versões, ele não irá funcionar.

Download

é qual dele? Download the compressed, production jQuery 1.11.3

Download the uncompressed, development jQuery 1.11.3

Download the map file for jQuery 1.11.3

jQuery 1.11.3 release notes

baixei os dois primeiros, coloquei e não funcionou.

Você pode baixar tanto o compressed como o uncompressed. Se possivel abra um novo tópico de dúvida, pois fica mais facil de centralizar sua dúvida e ajudar