NiceSnippets.com
Box or card design with image slider
Bootstrap 4 with card design with image slider. In this card design we use image with slider and also next previous button. and this image with slider box design is fully responsive. this card with image slider design can not take time in load.
We allows to free snippets of bootstrap 4 card slider , you can download full code of bootstrap 4 card carousel layout. Here in this post i will give you example of card slider css snippet and you will get simple code of html, css and jquery. In card slider bootstrap snippet i give you three tab with html, css and js, you can easily get code of box design with multiple image slider layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="offset-lg-4 col-lg-4 col-sm-6 col-12">
<div class="card">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://dummyimage.com/350x180/000/fff.png">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/350x180/000/fff.png">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://dummyimage.com/350x180/000/fff.png">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="card-block">
<h4 class="card-title text-info">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a href="#" class="btn btn-info">More Detail</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
body{
background:#B8860B;
}
.card-block{
padding: 20px;
}
