Jump to content
ViniciusRamoa

Slide CSS com margem grande

Recommended Posts

Olá, estou criando um projeto no laravel e estou com um problema na parte de css, criei um slide "arrastavel" para ser exibida algumas imagens, mas a borda entre uma imagem e outra está grande demais

 

Imagem de como está:

 css1.png.1e6880ff97fd0b3e172fc0321b9e4cd1.png

 

 

Imagem de como deveria ser o tamanho do espaço entre as imagens:

457696775_Semttulo.png.2c72ca20f96751db5bd3de13da74aa5a.png

 

Código pag.blade.php:

@section('hotmanga')
@if (count($hotMangaList)>0)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
<link rel="stylesheet" type="text/css" href="swiper.min.css">
</head>
<body>

	<div class="swiper-container">
		<div class="swiper-wrapper">
	   	        @foreach ($hotMangaList as $manga)
       		<div class="swiper-slide">
      <li>
	      		<div class="imgBx" style="position: relative; z-index: 10; background: rgb(255, 255, 255) none repeat scroll 0% 0%;">
	      	 		<img src='{{HelperController::coverUrl("$manga->manga_slug/cover/cover_250x350.jpg")}}' alt='{{ $manga->manga_name }}' />
	      	 		 <div class="well">
                    	<p>
                        	<i class="fa fa-book"></i>
                        	{{ "#".$manga->chapter_number."  ".$manga->chapter_name }}
                   		</p>
               		 </div>
	      	    </div>
	      </li>
	      	</div>
	      	   @endforeach
	    </div>
	</div>
	    
 <!-- divisão -->
            


<script type="text/javascript" src="swiper.min.js"></script>

<script>
    var swiper = new Swiper('.swiper-container', {
      effect: 'coverflow',
      grabCursor: true,
      centeredSlides: true,
      slidesPerView: 'auto',
      coverflowEffect: {
        rotate: 7,
        stretch: 0,
        depth: 100,
        modifier: 1,
        slideShadows : true,
      },
      pagination: {
        el: '.swiper-pagination',
      },
    });
</script>

</body>
</html>

@endif
@stop

 

Código CSS do slide:


.swiper-container {
      width: 250px;
      height: 350px;
      padding-top: 20px;
      padding-bottom: 50px;
      position: left;
    }
.swiper-slide {
      background-position: center;
      background-size: cover;
      width: 250px;
      height: 350px;
      background: #2e7ab9;

    }

.swiper-slide .imgBx
{
    width: 250px;
    height: 350px;
    overflow: hidden;
}

.swiper-slide .imgBx img
{
    width: 250px;
    height: 350px;
}

.swiper-slide .details
{
    box-sizing: border-box;

  }

 

Código "limpo" onde o slide funciona normalmente:

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale-1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="swiper.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="imgBx">
                    <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg">
                </div>

            </div>

            <div class="swiper-slide">
                <div class="imgBx">
                    <img src="https://img.freepik.com/vetores-gratis/imagens-animadas-abstratas-neon-lines_23-2148344065.jpg?size=626&ext=jpg">
                </div>

            </div>

        </div>

        <!-- divisão -->

    </div>
    <div class="swiper-pagination"></div>
    </div>

    <script type="text/javascript" src="swiper.min.js"></script>

    <script>
        var swiper = new Swiper('.swiper-container', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            coverflowEffect: {
                rotate: 7,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: '.swiper-pagination',
            },
        });
    </script>

</body>

</html>

 

 

Obrigado pelo seu tempo e ajuda

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Boa Tarde, pessoal!
      Td bem com vcs?
      Olha eu ai novamente!
      Pesquisei e  fucei e nada, não consegui nada, não de ficar enchendo o saco de vcs, mas qnd a corda aperta, corro aqui para um help.
      Estou com um código que roda perfeitamente, mas qnd eu preciso de um posicionamento, naun vai.
       
      vejam na imagem abaixo para entender?
       
       
      Vejam que o valor e os outros item abaixo dele, dependendo da quantidade de texto ele fica em um ponto.
      Gostaria que ele ficasse, com muito ou pouco texto na posição da 3ª imagem.
      Será possivel isso ?
       
      meu codigo CSS:
      .banner img { max-width: 100% !important; height: 200px; } .container-cards { flex-wrap: wrap; display: inline-flex; width: 400px; align-items: center; justify-content: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #fcfcfc; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100%; height: 80px; border: 0px solid #AAAAAA; margin: 5px; background-color: #fcfcfc; -webkit-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); -moz-box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); box-shadow: 1px 3px 5px rgba(250, 242, 242, 0.77); } .box-image { width: 20%; align-items: center; display: flex; height: 100%; justify-content: left; border-right: 0px solid #AAAAAA; } .box-container .box-image img { width: 75px; height: 75px; } .box-container .box-content { align-items: left; display: flex; height: 75%; justify-content: left; flex-direction: column; padding: 10px; } .title { margin-bottom: 10px; font-size: 16px font-weight: bold; color: #000; } .description { font:80%/1 Arial; font-size: 14px; color: #8a8686; top: 50px; left: 50px; } Codigo HTML:
      <div class="box-container"> <section class=box-image>&nbsp; <img src="<?php echo $Foto_produto; ?>" style="border-radius:10px" width="250px" height="230px"/> </section> <section class="box-content"> <label class="title"> <div align="left"><b><?php echo strtoupper($Nome_produto); ?></b></div></label> <span class="description"><div align="left"><?php echo $Descricao_produto; ?></div></span> </section> <section class=box-image-2> <label class="title"><div align="center"><b><?php echo($Valor_produto) ?></b></div></label> <span class="description"> <div align="left"><br/> <input type="checkbox" name="sabor" id="evento_value2" value="<?php echo $Valor_produto; ?>"> <input type="hidden" name="vl_sabor" value="<?php echo $Valor_produto; ?>"> <SELECT name="qntdade" width="2"> <option value="1">1</option> <option value="2">2</option> </SELECT> </div></span> </section> </div> Desde ja muito obrigado!
    • By lezão
      Bom dia, meus amigos!
      Td bem com vcs?
      Estou precisando de mais uma ajudinha de vcs.
      Tenho um codigo aqui e não estou acertando a mão nele, estou apanhando desse tal de media queries rsrsrs.
      Vejam os exemplos de como estão os meus codigos:
       
      Gostaria que no Desktop ficasse como o Mobile, e os dois centralizado na pagina, notem que não estão.
       
      segue meu codigo:
      <style type="text/css"> /* My opinion */ body { background-image: url(imagens/slide_1.jpg); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /* Section clientes */ .container-cards { flex-wrap: wrap; display: inline-flex; width: 100%; align-items: center; } .box-container { /*border: 1px solid red;*/ display: flex; background: #FFFFFF; font:80%/1 Arial; font-size: 14px; border-radius: 5px; align-items: center; width: 100px; height: 120px; border: 2px solid #AAAAAA; margin: 10px; box-shadow: 0 0 10px #ddd; } .box-container .box-image img { width: 93px; height: 93px; text-align: center; } .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #000; } .description { font-size: 14px; color: #8a8686; } </style> </head> <body> <!--My option--> <div align="center"> <img src="imagens/logo.png" width="200px" height="192px"/></div> <br/> <div align="center"> <div class="container-cards"> <div class="box-container" onclick="location.href='cardapio_pizza.php'" style="cursor:pointer;" align="center"> <section class="box-image"> &nbsp;<img src="imagens/banner_pizzas.png"/><br/> <label class="title"><b>Pizzas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_pizza_cone.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_pizzas_cone.png"/><br/> <label class="title"><b>Pizzas no Cone</b></label> </section> </div> <div class="box-container" onclick="location.href=''" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_porcoes.png"/><br/> <label class="title"><b>Porções</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_lanches.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_lanches.png"/><br/> <label class="title"><b>Lanches</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_fritas.php'" style="cursor:pointer;"> <section class="box-image"> <img src="imagens/banner_cone_fritas.png"/><br/> <label class="title"><b>Cone de fritas</b></label> </section> </div> <div class="box-container" onclick="location.href='cardapio_refri.php'" style="cursor:pointer;"> <section class="box-image"> <div align="center"> <img src="imagens/banner_refri_sucos.png"/><br/> <label class="title"><b>Bebidas</b></label> </div> </section> </div> </div> <div align="center"> <font size="2" color="#FFFFFF" face="arial"> <p>Horário de atendimento:<br/>Segunda á Sexta das 19:00 as 22:00<br/>Sextas, Sábados e Domingos das 19:00 as 23:30</p> </font> </div>  
       
    • By Sapinn
      Como mudar o cor da letra de um active em um menu no boostrtrap
       
      <nav class="navbar navbar-expand-lg navbar-light bg-light">         <div class="container">           <a class="navbar-brand" href="#">             <img src="icone.png" height="60px" alt="Logo">           </a>           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">             <span class="navbar-toggler-icon"></span>           </button>                  <div class="collapse navbar-collapse d-lg-flex justify-content-end" id="navbarSupportedContent" style="font-size: 20px;">             <ul class="navbar-nav" >               <li class="nav-item active" >                 <a class="nav-link" href="#">Inicio</a>               </li>               <li class="nav-item" >                 <a class="nav-link" href="#">Login</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Aluno</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Professor</a>               </li>               <li class="nav-item">                 <a class="nav-link" href="#">Fale Conosco</a>               </li>             </ul>           </div>                </div>       </nav>  
    • By lezão
      Boa noite, meus amigos!
      Td bem com vcs?
       
      Olha eu novamente... rsrsrsrs......
       
      Meus Deus mas como é dificiiiiil esse tal de CSS, tentei fazer um curso online, o cara é muito doido, e quase me deixou doido tbm kkkkkkk, abandonei......kkk
       
      Galera estou tentando colocar linhas pontilhadas estilo cardápio.
       
      MODA DA CASA
      (Mussarela, provolone, parmesão e catupiry etc.)                          $0,00
      ...........................................................................................................................
       
      alguem pode me dar um help?
       
      obrigado!
       
       
    • By violin101
      Caros amigos, membros do grupo.
       
      saudações...
       
      Desculpa em recorrer ao auxílio dos amigos, mas estou com uma pequena dúvida, que não estou conseguindo resolver.
       
      Tenho um Slider onde mostro Empresa Parceiras. <<=== até aqui tudo bem.
       
      O problema é que não estou conseguindo incluir no slider os BUTTON's de Avançar e Recuar. Quando tento colocar os marcadores eles não ficam lado a lado.
       
      Abaixo posto o código.
      CSS está assim:
      <style> /* Slider */ .slick-slide { margin: 0px 20px; } .slick-slide img { max-width: 100%; } .slick-slider{ position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list{ position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus{ outline: none; } .slick-list.dragging{ cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track{ position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after{ clear: both; } .slick-loading .slick-track{ visibility: hidden; } .slick-slide{ display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img{ display: block; } .slick-slide.slick-loading img{ display: none; } .slick-slide.dragging img{ pointer-events: none; } .slick-initialized .slick-slide{ display: block; } .slick-loading .slick-slide{ visibility: hidden; } .slick-vertical .slick-slide{ display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden{ display: none; } </style>  
      O HTML está assim:
      <div class="container"> <h2>Empresas - Parceiras</h2> <section class="list-logos slide"> <div class="slide"><img src="https://s2.glbimg.com/PE9lTOWcKUlnHVGSjv_OqVcPM7w=/e.glbimg.com/og/ed/f/original/2019/10/25/cloud-blue-high-clouds-its-in-the-air-sky-air-2294671.jpg"></div> <div class="slide"><img src="https://conhecimentocientifico.r7.com/wp-content/uploads/2019/10/nuvens-como-sao-formadas-principais-tipos-e-caracteristicas-2.jpg"></div> <div class="slide"><img src="https://hardcore.com.br/wp-content/uploads/sites/2/2020/09/onda-do-bem.jpg"></div> <div class="slide"><img src="https://statig2.akamaized.net/bancodeimagens/3i/dv/7j/3idv7j5fqayakev9ltglmr97m.jpg"></div> <div class="slide"><img src="https://uploads.metropoles.com/wp-content/uploads/2020/01/15192306/mar-praia-600x400.jpg"></div> </section> </div> <div class="clearfix"></div>  
       
      O JS está assim:
      <script> $(document).ready(function(){ $('.list-logos').slick({ slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 1500, arrows: false, dots: true, pauseOnHover: false, responsive: [{ breakpoint: 768, settings: { slidesToShow: 4 } }, { breakpoint: 520, settings: { slidesToShow: 3 } }] }); }); </script>  
      Caros amigos, como consigo colocar os botões de Avançar e Recuar mais os indicadores abaixo das imagens ?
       
      Grato,
       
      Cesar

       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.