Swipe

Vorab: Ich nutze Bootstrap und jQuery. Ich versuche ein <div> feld zu erstellen, gefüllt mit Bilder und Text, welches bei einem swipe komplett verschwindet und dafür an gleicher Stelle ein anderes div Feld mit zumindest Text eingeblendet wird. Hinzu kommt, dass ich das ganze gerne für mobile und desktop programmieren würde. In der desktop version soll anstelle des swipes ein button für links und rechts erscheinen.

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <style> .nav-tabs { height:40px; border-bottom: 2px solid #DDD; } .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover { border-width: 0; } .nav-tabs>li>a { border: none; color: #666; } .nav-tabs>li.active>a, .nav-tabs>li>a:hover { border: none; color: #4285F4 !important; background: transparent; } .nav-tabs>li>a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); } .nav-tabs>li.active>a::after, .nav-tabs>li:hover>a::after { transform: scale(1); } .tab-nav>li>a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; } .tab-pane { overflow:auto; height:300px; padding: 15px 0; } .tab-content { padding: 20px } .card { background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } body { background: #EDECEC; padding: 50px; cursor : url('http://res.cloudinary.com/wonkytech/image/upload/c_scale,w_28/v1496298479/circle-128_dumbjv.ico'), default; } #bild1{ float:left; margin:0 10px 0px 0; } #bild2{ float:right; } #fest1{ display:flex; } #bild3{ } </style> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card"> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"><img id="bild1" src="http://sebastian1012.bplaced.net/bilder/1301279032_RastaHomer-vi.jpg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recentl with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> <div role="tabpanel" class="tab-pane" id="profile"><img id="bild2" src="http://sebastian1012.bplaced.net/bilder/homer.jpeg">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's sLorem Ipsum is simply dummy text of the printing and typesettinLorem Ipsum is simply dummy text of the printLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.ing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.g industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.tandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div> <div role="tabpanel" class="tab-pane" id="messages"><div id="fest1"><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's sLorem Ipsum is simply dummy text of the printing and typesettinLorem Ipsum is simply dummy text of the printLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.ing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.g industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.tandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p><img id="bild3" src="http://sebastian1012.bplaced.net/bilder/homer.jpeg"></div></div> <div role="tabpanel" class="tab-pane" id="settings">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage..</div> </div> </div> </div> </div> </div> <script> $(".card").swipe( { swipeLeft:function(event, direction, distance, duration, fingerCount) { $(".nav-tabs li.active").next('li').find('a').tab('show'); }, swipeRight:function(event, direction, distance, duration, fingerCount) { $(".nav-tabs li.active").prev('li').find('a').tab('show'); }, }); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!