0
Ich habe diese jquery Seite, wo ich Swiper-Bibliothek verwendet habe, um meine Inhalte durch Verschieben vertikal zu zeigen. Ich möchte zu einer bestimmten Folie gehen, indem ich auf einen beliebigen Link in der Seitenleiste klicke. Wenn ich nach oben oder unten blicke, wird die Seite nicht geblättert, aber wenn ich auf einen bestimmten Link im Fenster klicke, scrollt die Seite nach unten und ich kann nicht gleiten von dieser Folie.Swiper und Jquery: Gehen Sie zu bestimmten Folie von der Seitenwand
Gibt es einen Weg, nur die gewünschte Folie zu zeigen, ohne die Seite zu scrollen und die Kopfzeile und das Panel zu fixieren? Hier ist mein Code-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet"/>
<!--jquery mobile links -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div data-role="panel" id="mypanel" data-position="left" data-display="overlay" data-theme="a">
<ul data-role="listview">
<li><a href = "#link1">Slide 1</a></li>
<li><a href = "#link2">Slide 2</a></li>
<li><a href = '#link3'>Slide 3</a></li>
</ul>
</div>
<div data-role="header" data-theme="b" data-position="fixed" data-id="header">
<h1>Home</h1>
<a href="#mypanel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-grid ui-corner-all"></a>
</div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" id="link1">Slide 1</div>
<div class="swiper-slide" id="link2">Slide 2</div>
<div class="swiper-slide" id = 'link3'>Slide 3</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container',{
direction : 'vertical',
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
window.location.hash = target;
});
});
</script>
</body>
</html>