0

Problemas em alinhar filmes/series

V
Vitorio Borges

Boa noite, tudo bem ?


Estou com um problema que não reconhece o carousel na mina pagina da netflix.


irei deixar toda a linha de codigo abaixo.


se estiver alguem que possa me ajudar irei ser muito grato.


--------------------------------------------------------------------------------

HTML


<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style/style.css">



 <!-------- owl css---------->

 <link rel="stylesheet" href="style/owl/owl.carousel.min.css">

 <link rel="stylesheet" href="style/owl/owl.theme.default.min.css">


    <title>NETFLIX CLONE</title>

</head>

<body>

    <header>

        <div class="container">

           <h2 class="logo">NETFLIX</h2>

           <nav>

               <a href="#">Inicio</a>

               <a href="#">Séries</a>

               <a href="#">Filmes</a>

               <a href="#">Documentários</a>

           </nav>

        </div>

    </header>


    <main>

        <div class="filme-principal">

            <div class="container">

                <h3 class="titulo">LUCIFER</h3>

                <p class="descricao">Entediado com a vida nas trevas, o diabo se muda para Los Angeles, abre um piano-bar e empresta sua sabedoria a uma investigadora de assassinatos. Assita agora a nova temporada de Lucifer que está imperdível</p>

                <div class="botões">

                <button role="button" class="botao">

                    <i class="fas fa-play"></i>

                    ASSISTIR AGORA

                </button>

                <button role="button" class="botao">

                    <i class="fas fa-info-circle"></i>

                    MAIS INFORMAÇÕES

                </button>

                </div>

            </div>

        </div>

    </main>


    <div class="carrosel-filmes">

        <div class="owl-carrousel owl-theme">

            <div class="item">

                <img class="box-filme" src="style/Image/mini1.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini2.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini3.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini4.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini5.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini6.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini7.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini8.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini9.jpg" alt="" class="src">

            </div>

            <div class="item">

                <img class="box-filme" src="style/Image/mini10.jpg" alt="" class="src">

            </div>

        </div>

    </div>


    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">

    <script src="js/owl/jquery.min.js"></script>

    <script src="js/owl/owl.carousel.min.js"></script>

    <script src="js/owl/setup.js"></script>


</body>

</html>

---------------------------------------------------------------------------------

CSS


:root{

    --vermelho:#E50914;

    --preta:#141414;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


/*elementos base*/


body {

    background: var(--preta);

    font-family: 'Times New Roman'Timesserif;

    color: white;

}


header .container{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: space-between;

}


header .logo{

    margin-left: 5px;

    color: var(--vermelho);

    font-family: 'arial black'Times;

    font-size: 40px;

}


header nav a{

    text-decoration: none;

    color: #aaa;

    margin-right: 10px;

}


header nav a:hover{

    color: #fff;

}


/*filme principal*/

.filme-principal{

    font-size: 16px;

    background: linear-gradient(rgba(0,0,0,.50),rgba(0,0,0,.50)100%), url('Image/capa-lucifer.jpg');


    height: 400px;

    background-size: cover;


    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

}


.filme-principal .descricao{

    margin-top: 10px;

    margin-bottom: 40px;

}


.titulo {

    margin-top: 15%;

    font-size: 40px;

    font-family: 'Trebuchet MS'Arialsans-serif;


}


.botao {

    background-color: rgba(0,0,0,.50);

    border: none;

    color: white;


    padding: 15px 30px;

    margin-right: 15px;

    font-size: 12px;


    cursor: pointer;

    transition: .3s ease all;

}


.botao:hover{

    background-color: white;

    color: black

}


.botao i{

    margin-right: 8px;

}


.filme-principal .container{

    margin-left: 10px;

    width: 73%;

}



.box-filme{

    height: 100%;

    width: 100%;

    display: block;

}

---------------------------------------------------------------------------------JavaScript


// iniciando o carrousel

$('.owl-carousel').owlCarousel({

    loop:true,

    margin:10,

    nav:false,

    dots:false,

    autoHeight: true,

    responsive:{

        0:{

            items:1

        },

        600:{

            items:3

        },

        1000:{

            items:5

        }

    }

});

---------------------------------------------------------------------------------

Muito obrigado pela atenção.


0
0

Comentários (6)

0
Fabio Flauzino

Fabio Flauzino

15/06/2021 21:44

Que bom que deu certo, sempre que puder e souber estarei disposto a ajudar.

0
V

Vitorio Borges

15/06/2021 21:38

Boa noite Fabio, tudo bem ?


cara muito obrigado mesmo nossa, fiquei tentando o dia inteiro fazer isso nossa. estou ate chorando de alegria nossa.


sem palavras, cara muito obrigado mesmo.


agora foi finalmente.

0
Fabio Flauzino

Fabio Flauzino

15/06/2021 21:11

Deu um trabalho mas achei o erro, copiei seu código e fiz algumas alterações.

Na verdade o erro esta dentro da tag HTML


A chamada esta "OWL-CARROSEL" quando na verdade é só com um R

<div class="owl-carousel owl-theme">


E está chamando sem um R

$('.owl-carousel').owlCarousel({


Olha o nome do arquivo que está chamando, na pasta, não é pra mudar esse e sim o da tag HTML div na classe

<script src="js/owl/owl.carousel.min.js"></script>


Muda essa parte que pode ser que de certo.

0
V

Vitorio Borges

15/06/2021 19:54

ja fiz a alteração e está dando na mesma


0
Vinicius Virtuoso

Vinicius Virtuoso

15/06/2021 19:39

Lembre-se o browser lê seus documentos de cima para baixo, ou seja se vc de chamar seu estilo antes dos estilos dos plugins, o que vc declarar no seu estilo será sobrescrevido pelos estilos dos plugins... Resumindo sempre chame seu estilo por ultimo.

0
Vinicius Virtuoso

Vinicius Virtuoso

15/06/2021 19:34

Você tem que chamar seu estilo por ultimo.


Assim:


 <!-------- owl css---------->

 <link rel="stylesheet" href="style/owl/owl.carousel.min.css">

 <link rel="stylesheet" href="style/owl/owl.theme.default.min.css">

<link rel="stylesheet" href="style/style.css">

None

Brasil