NiceSnippets.com
Bootstap 4 Full Screen Slider Using Superslides Plugin
We are giving you full screen slider demo in bootstrap 4 with superslides jquery. fullscreen responsive slider jquery free download. full screen auto slider. full screen banner slider. fullscreen slider with dots. fullscreen slider homepage.
We allows to free snippets of btn3d , you can download full code of bootstrap button shadow layout. Here in this post i will give you example of bootsnipp 3d buttons snippet and you will get simple code of html, css and jquery. In 3d buttons bootstrap snippet i give you three tab with html, css and js, you can easily get code of bootstrap embossed button layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superslides - A fullscreen slider for jQuery</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<link rel="stylesheet" href="superslides.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 m-0 p-0">
<div id="slides">
<div class="slides-container">
<img src="//nicesnippets.com/demo/fss-slider-1.jpg" alt="Cinelli">
<img src="//nicesnippets.com/demo/fss-slider-2.jpg" width="1024" height="682" alt="Surly">
<img src="//nicesnippets.com/demo/fss-slider-3.jpg" width="1024" height="683" alt="Cinelli">
<img src="//nicesnippets.com/demo/fss-slider-4.jpg" width="1024" height="685" alt="Affinity">
</div>
<nav class="slides-navigation">
<a href="#" class="next"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></a>
<a href="#" class="prev"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></a>
</nav>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/superslides/0.6.2/jquery.superslides.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
#slides {
position: relative;
}
#slides .slides-container {
display: none;
}
#slides .scrollable {
*zoom: 1;
position: relative;
top: 0;
left: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
}
#slides .scrollable:after {
content: "";
display: table;
clear: both;
}
.slides-navigation {
margin: 0 auto;
position: absolute;
z-index: 3;
top: 46%;
width: 100%;
}
.slides-navigation a {
position: absolute;
display: block;
}
.slides-navigation a.prev{
color:#fff;
font-size:50px;
left:30px;
text-decoration: none;
}
.slides-navigation a.next {
color:#fff;
font-size:50px;
right:30px;
text-decoration: none;
}
.slides-pagination {
position: absolute;
z-index: 3;
bottom: 0;
text-align: center;
width: 100%;
}
.slides-pagination a {
border: 2px solid #222;
border-radius: 15px;
width: 10px;
height: 10px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
/*background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=");*/
margin: 2px;
overflow: hidden;
text-indent: -100%;
}
.slides-pagination a.current {
background: #222;
}
$(function() {
$('#slides').superslides({
hashchange: true
});
});
