JSFiddle - React, Tailwind, and code Playground

Testing Swiper

by Alex Stanese

HTML

<script src="https://dl.dropboxusercontent.com/u/89068397/idangerous.swiper-2.6.0.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/89068397/idangerous.swiper.css">
<body >

<!-- ******************************* PAGE 1 *************************************-->


<div data-role="page" id="page1">
    <button id="page2">page2</button>
</div>

<!-- ******************************* PAGE 2 *************************************-->

<div data-role="page" id="page2">

<!-- ********** slider *********** -->	

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
		<img class="image" id="img1" src="img/x_1.jpg">
		<img class="image" id="img2" src="img/x_2.jpg">
		<img class="image" id="img3" src="img/x_3.jpg">
      </div>
      <div class="swiper-slide">
        <img class="image" id="img4" src="img/x_4.jpg">
		<img class="image" id="img5" src="img/x_5.jpg">
		<img class="image" id="img6" src="img/x_6.jpg">
      </div>
      <div class="swiper-slide">
        <img class="image" id="img7" src="img/x_7.jpg">
		<img class="image" id="img8" src="img/x_8.jpg">
		<img class="image" id="img9" src="img/x_9.jpg">
      </div>
    </div>
  	<div class="pagination"> </div>
  </div>

</div>

CSS

/*//////////////////////////////////////////////////////////////////////////////////////*/

body, html{
	margin: 0;
	padding:0;
	position: absolute;
	background: black !important;   /*ca sa imi faca prima tranzitie neagra*/
	height:100%;
	width:100%;
}

/*.ui-page {
	-webkit-backface-visibility: hidden;
} */

.swiper-container {
	width: 100%;
	height: 20%;
	color: #fff;
	/*text-align: center;*/
	background-color: black;
	bottom:0;
	position: absolute;
	display:block;
	font-size: 0;
}
.swiper-wrapper{
	height:100%!important;
}
.swiper-slide{
	height:100%!important;
	background-image: url("../img/film_holes.svg");
	background-repeat: round;
	background-size: contain;
}


.pagination {
	position: absolute;
	z-index: 20;
	text-align:center;
	/*bottom: 16%;*/
	font-size: 0;
	bottom:-1px;
	left: 0;
	right: 0;
}
.swiper-pagination-switch {
	display: inline-block;
	/*width: 8px;*/
	/*width:31%;*/
	height: 4px;
	/*border-radius: 8px;*/
	background: #222;
	/*margin-right: 5px;*/
	/*opacity: 0.8;*/
	/*border: 1px solid #fff;*/
}
.swiper-visible-switch {
	background: #aaa;
}
.swiper-active-switch {
	background: #fff;
}

JavaScript

$(document).ready(
     function() {

    $("#page2").click(function() {
        $.mobile.changePage("#page2");
        // $("#photo").hide().delay(1000).fadeOut();
            // $("#photo").animate({opacity: 0.0}, 1);
    });  


//swiper iniialize
    var mySwiper;
    $('.swiper-container').height($.mobile.getScreenHeight() * .22);
    $('.swiper-container').width($(window).width());
    mySwiper = new Swiper('.swiper-container',{
        pagination: '.pagination',
        paginationClickable: false,
        momentumBounceRatio:1,
        resistance:'100%'       
    });

    

    $(document).on("pagebeforeshow","#page2",function(){
        mySwiper.swipeTo(0, 1, true);  
    });

     }
);