Slide CSS com margem grande
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á:
Imagem de como deveria ser o tamanho do espaço entre as imagens:
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 ajudaDiscussão (0)
Carregando comentários...