"swiper - Slider -zoom"
Bootstrap 4.0.0 Snippet by jeevan123456

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/800/800/sports/1/">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/800/400/sports/2/">
</div>
</div>
<div class="swiper-slide">
<div class="swiper-zoom-container">
<img src="http://lorempixel.com/400/800/sports/3/">
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-white"></div>
<!-- Add Navigation -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
.swiper-container { width: 100%; height: 100%;}
.swiper-slide {overflow: hidden;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
var swiper = new Swiper('.swiper-container', {
zoom: true,
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System
Client or Partners Logo Slider
Timely Login slider
tabbed macbook mockup slider

Questions / Comments: