"Bootstrap 4.1.1(CSS 3D Gallery Slider)"
Bootstrap 4.1.1 Snippet by ebubekirbastama

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--www.ebubekirbastama.com-->
<div id="css3dimageslider" class="transparency">
<ul>
<li> <img style="width: 100%;height: 100%" src="https://404store.com/2018/08/20/linux.png"> </li>
<li> <img style="width: 100%;height: 100%" src="https://404store.com/2018/08/12/solidworks-3d-cad-web-image.png"> </li>
<li> <img style="width: 100%;height: 100%" src="https://404store.com/2018/08/15/img_1508.png"> </li>
<li> <img style="width: 100%;height: 100%" src="https://404store.com/2018/04/12/ataturk_bayrak_02_tam35-blogspot-com.gif"> </li>
</ul>
</div>
<ul id="css3dimagePager">
<li class="list-group-item list-group-item-success">Güvenli İşletim Sistemi</li>
<li class="list-group-item list-group-item-danger">Solid Works</li>
<li class="list-group-item list-group-item-warning">Akıllı Ev sistemi</li>
<li class="list-group-item list-group-item-primary">Türkiye</li>
</ul>
<p id="css3dtransparency" class="active">Şeffaflığı Kapat</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
#css3dimagePager, #css3dtransparency {
text-align: center;
position: relative;
z-index: 11;
padding: 0 0 10px;
margin: 0;
}
#css3dimagePager li {
padding-right: 2em;
display: inline-block;
cursor: pointer;
}
#css3dimagePager li.active, #css3dtransparency.active {
font-weight: bold;
}
#css3dimageslider {
-webkit-perspective: 1000;
-moz-perspective: 1000px;
-ms-perspective: 1000;
perspective: 1000;
-webkit-perspective-origin: 50% 100px;
-moz-perspective-origin: 50% 100px;
-ms-perspective-origin: 50% 100px;
perspective-origin: 50% 100px;
margin: 40px auto 20px auto;
width: 100%;
height: 350px;
}
#css3dimageslider ul {
position: relative;
margin: 0 auto;
height: 281px;
width: 450px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
$("#css3dimagePager li").click(function(){
var rotateY = ($(this).index() * -90);
$("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});
$("#css3dimagePager li").removeClass("active");
$(this).addClass("active");
});
$("#css3dtransparency").click(function() {
$("#css3dimageslider").toggleClass("transparency");
$(this).toggleClass("active");
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: