JSFiddle - React, Tailwind, and code Playground

Testing Swiper

by Alex Stanese

HTML

<link rel="stylesheet" href="https://dl.dropboxusercontent.com/u/89068397/idangerous.swiper.css">
<script src="https://dl.dropboxusercontent.com/u/89068397/swiper.js"></script>
<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="http://lorempixel.com/400/200/" />
                    <img class="image" id="img2" src="http://lorempixel.com/400/200/" />
                    <img class="image" id="img3" src="http://lorempixel.com/400/200/" />
                </div>
                <div class="swiper-slide">
                    <img class="image" id="img4" src="http://lorempixel.com/400/200/" />
                    <img class="image" id="img5" src="http://lorempixel.com/400/200/" />
                    <img class="image" id="img6" src="http://lorempixel.com/400/200/" />
                </div>
                <div class="swiper-slide">
                    <img class="image" id="img7" src="http://lorempixel.com/400/200/" />
                    <img class="image" id="img8" src="http://lorempixel.com/400/200/" />
                    <img class="image" id="img9" src="http://lorempixel.com/400/200/" />
                </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:80%!important;
}
.swiper-slide {
    height:100%!important;
    background-image: url("http://lorempixel.com/600/400/");
    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

$(function () {
    var mySwiper,
        mySwiperContainer = $('.swiper-container'),
        mySwiperOptions = {
            pagination: '.pagination',
            paginationClickable: false,
            momentumBounceRatio: 1,
            resistance: '100%',
            //slidesPerView: 'auto',
            resizeReInit: true
        },
        page2 = '#page2';

    mySwiperContainer.height($.mobile.getScreenHeight() * .22);
    mySwiperContainer.width($(window).width());
    mySwiper = new Swiper('.swiper-container', mySwiperOptions);

    $(page2).click(function () {
        setTimeout(function () {
            //mySwiper.activeIndex = 0;
            //mySwiper.startAutoplay();
            //mySwiper.swipeReset();
            //mySwiper.destroy();
            //mySwiper.reInit(true);
            //mySwiper.callPlugins('reInit');
            //mySwiper.callPlugins('swipeReset');
            mySwiper.swipeTo(0);
            //$.mobile.changePage(page2);
        }, 200);
        //mySwiper.swipeTo(0);
        //$.mobile.changePage(page2, {changeHash: true, reloadPage: false});
        $.mobile.changePage(page2);
        // $("#photo").hide().delay(1000).fadeOut();
        // $("#photo").animate({opacity: 0.0}, 1);
        //mySwiper.swipeTo(0);
        //mySwiper = new Swiper('.swiper-container', mySwiperOptions);
        //mySwiper.swipeTo(0);
        //mySwiper.Prev();
    });
});