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
      Ola pessoal!
      Td bem com vcs?
       
      Estou tentando fazer esse item ficar em css e naun estou conseguindo alguem pode me ajudar?
      <table width="75%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="15%" height="35"><b>Moda da Casa</b></td> <td width="55%" style="border-bottom: dotted; border-width: 1px 3px 3px 1px; border-color: black black #000000 #000000"></td> <td width="7%"><b>R$ 25,00</b></td> <td width="3%" rowspan="2" align="left"><img src="https://clipartart.com/images/delete-button-clipart.jpg" width="75px" heigth="50px"/></td> </tr> <tr> <td colspan="3" height="35"> <div class="label-float"> <input type="text" value="Molho de tomate, mussarela, calabresa ralada, catupiry, alho tostado, cebola, azeitonas e oregano." size="100%" placeholder="" required=""> </div> </td> </tr> </table> obrigado!
       
       
       
    • By Jack Oliveira
      Ola boa noite
       
      Galera preciso de uma ajuda de vocês aqui..
       
      Estou tentando deixa a imagem de fundo do header com uma mascara negra transparente porem fica até a logo do site transparente e com mascara branca
      que não é o meu objetivo..
       
      e deixa apenas a imagem de fundo transparente e negra
       
      Fiz no css da seguinte forma.
       
      <style> .bg-img{ background-image: url('assets/bg/banner-fundo.png'); background-size: cover; position:relative; background-color: rgba(242,17,125,0.91); filter:opacity(alpha=60); -moz-opacity:0.9; opacity:0.6; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.42), 0 0px 20px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); transition: 0.3s; } </style> A parte do html esta assim
       
      <header class="bg-img"> <div class="container"> <div class="row"> <div class="col-lg-2 col-md-4"> <a href="./" class="logo" style="border: 5px solid #ffffff; background-color: rgba(242,17,125,0.91)"> <img src="assets/logo/minha-logo.png" alt="" title=""> </a> </div> <div class="col-lg-9 col-md-8 dados"> <h1 id="wa7_font">Minha Empresa</h1> <h2 id="wa7_font">Minha Categoria</h2> <br> <div class="telefones"> <a href="tel:556699999999" class="fixo"> <i class="fas fa-phone-volume"></i> <span>(66) 9999-9999</span> </a> <a href="tel:5566999999999" class="celular"> <i class="fas fa-mobile-alt"></i> <span>(66) 9.9999-9999</span> </a> </div> <div class="endereco" id="wa7_font_letra"> <p> <i class="fas fa-map-marker-alt"></i> Rua: Palmas, 2345, Centro - Sorriso/MT </p> </div> </div> </div> </div> </header> Fico no guardo da ajuda ai
    • By Carcleo
      Estou a um tempo tentando criar um slider personalizado.
      De fato, eu até consegui e coloquei no codepen. https://codepen.io/carcleo/pen/yLVOxMv
       
      Mas uma implementação não estou conseguindo fazer.
       
      Nos sliders prontos que pegamos na web, ao redimencionar manualmente o navegador,   a UL que abriga as LI's com os Slides, se redimenciona junto e isso não acontece com o meu, Isto é, ao diminuir a janela do navegador, as imagens acompanham o tamanho das LIs, mas como não consigo redimencinar a UL junto os slides acabam se mostrando de forma errada. 
       
      Não consegui uma forma de fazer o CSS fazer esse serviço. Só consegui com JS.
       
      Se alguém puder ajudar?
       
      Obs.: não quero copiar da internet, meu objetivo é entender a logica da coisa
    • By PedroHRLeite
      Estou querendo deixar um rodapé fixo no topo a medida que o mesmo alcança o topo da página, porém estou encontrando dificuldades ao utilizar position: sticky, segue o código completo, se eu colocar a configuração de sticky na classe .side-column funciona bem, porém quero apenas no footer, alguém saber como resolver?
      <!DOCTYPE html> <html> <head> <style> .wideBody .side-column { float: right; order: 2; width: 300px; } .wideBody .side-column footer { position: sticky; position: -webkit-sticky; top: 0; } .wideBody .main-column { align-self: flex-start; float: left; width: 500px; border: 2px solid #4CAF50; } .resultados { border: 2px solid #4CAF50; margin-bottom:25px; position:relative; } footer { border: 2px solid #4CAF50; } </style> </head> <body class="wideBody"> <main> <div> <div class="main-column"> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> coluna principal<br /> </div> <aside class="side-column"> coluna auxiliar <div class="resultados"> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> 1 -> 2<br /> </div> <footer> rodape fixo </footer> </aside> </div> </main> </body> </html>  
    • By Vanderson Bilck Barbosa
      Boa tarde;
      Busco ajuda com um assunto não muito comum e que já esta me tirando o sono a 2 dias....
      Estou gerando PDFs com o DOMPDF, porém alguns itens que são cadastrados no banco via TextArea não se alinham conforme o restante dos demais.
       
      *** Ressalto que já tentei todas as formas de alinhamento CSS possíveis, tanto diretamente no item quanto no css integrado, limpei os itens no textarea (https://summernote.org/) que são adicionados automático (exemplo: <p></p> ).
       
      1 - Arquivo que busca o arquivo já renderizado .php.
      <?php
      use Dompdf\Dompdf;
      $dompdf = new Dompdf(["enable_remote" => true]);
      $dompdf->setPaper('A4', 'portrait');
      ob_start();
      require "views/adm/ordemdeproducao.php";
      $dompdf->loadHtml(ob_get_clean());
      $datagera = date('dmY-His');
      $dompdf->render();
      $dompdf->stream("OrdemProducao_$datagera.pdf", array("Attachment" => false));
       
      2 - trecho do Arquivo que é chamado pelo anterior
                                 <tr style="background-color: #FFFFFF;">
                                      <td>
                                          <table>
                                              <tr>
                                                  <td class="bglaranja1 th titReceita">
                                                      <b>RECEITA:</b> <i><?php echo $receita->gettitulo(); ?></i>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <thead>
                                                  <tr>
                                                      <th class="th" width="60">ITEM</th>
                                                      <th class="th">PRODUTO</th>
                                                      <th class="th" width="60">UN</th>
                                                      <th class="th" width="60">QTDE</th>
                                                  </tr>
                                              </thead>
                                              <tbody>
                                                  <?php
                                                  $receitaItem = new Receita();
                                                  $itensReceita = $receitaItem->getProdutoReceita(array($receita->gettoken()));
                                                  foreach ($itensReceita as $itemCalc) {
                                                  ?>
                                                      <tr class="small">
                                                          <td class="text-center td"><?php echo $itemCalc["id_produto"]; ?></td>
                                                          <td class="td"><?php echo $itemCalc["nome_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo $itemCalc["um_produto"]; ?></td>
                                                          <td class="text-center td"><?php echo number_format(intval($valueCardapio["quantidade"]) * floatval($itemCalc["quantidade"]), 0, '', '.'); ?></td>
                                                      </tr>
                                                  <?php } ?>
                                              </tbody>
                                          </table>
                                          <table style="background-color: #FFFFFF;">
                                              <tr>
                                                  <td class="td small" valign="top">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MATERIAIS DA RECEITA</b><br />
                                                          <?php echo $receita->getmateriais(); ?>  //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table>
                                              <tr>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF;">
                                                      <p style="left: 0; text-align: left; margin-left: 0; border: 1px solid #FF0000;">
                                                          <b>MODO DE PREPARO</b><br />
                                                          <?php echo $receita->getmodo_preparo(); ?> //item que não se alinha (left) como os demais
                                                      </p>
                                                  </td>
                                                  <td class="td small" valign="top" style="background-color: #FFFFFF; width: 160px;">
                                                      <b>FOTO DA RECEITA</b><br />
                                                      <?php if ($receita->gettoken_img() == null) { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/views/adm/res/img/noimage-300.jpg')"></div>
                                                      <?php } else { ?>
                                                          <div class="image_receita" style="background-image: url('<? echo $urlFora;?>/img/<?php echo $receita->gettoken_img(); ?>/0/1')"></div>
                                                      <?php } ?>
                                                  </td>
                                              </tr>
                                          </table>
                                          <table class="mb-1">
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tempo de Preparo:</b> <?php echo $receita->gettempo_preparo(); ?> Minutos</td>
                                                  <td class="td small">
                                                      <b>Rendimento:</b> <?php echo $receita->getrendimento(); ?>
                                                  </td>
                                              </tr>
                                              <tr>
                                                  <td class="td small">
                                                      <b>Tipo da Porção:</b>
                                                      <?php
                                                      $porcao = new Porcao();
                                                      $porcao->loadByIdAtivo($receita->gettb_porcao_id());
                                                      echo $porcao->getmedida_caseira();
                                                      ?>
                                                  </td>
                                                  <td class="td small">
                                                      <b>Medida da Porção (gramas): <?php echo $receita->getvalor_porcao(); ?></b>
                                                  </td>
                                              </tr>
                                          </table>
                                      </td>
                                  </tr>
       
      3 - arquivo gerado em pdf (Imagem Anexo) - Itens vermelhos, são os mesmos comentados no fonte acima //item que não se alinha (left) como os demais

       
×

Important Information

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