hallo,
ich komme leider immer noch nicht mit dem Bilder-swipen an der Smartphone Version meiner Seite weiter.
Ich habe eine einfache php-Seite die meine 20 Thumbnails anzeigt, in der Web-Version benutze ich Fancybox, das geht gut.
Bei der Mobilen Version sieht es schlecht aus und ist nicht schön zu nutzen, da die Fancybox da auch nur unwesentlich größer ist als der Thumb.
Welches Tool kann ich da am besten nutzen, oder selbst bauen, mein Swiper Beispiel im Code geht gut, ich habe aber die Bilder fest reingeschrieben,
es soll ja aber so sein, dass man auf irgendeines der 20 klickt, dann geht die Swipe-Seite mit genau dem geklickten auf und ich kann wie es auch Android
mit normalen Fotos macht in beide Richtungen in der Vollansicht der Bilder swipen.
<!-- Demo styles -->
<style>
html {
position: relative;
width: auto;
height: auto;
margin: auto;
}
body {
background-color: #000000;
width: 100%;
margin: auto;
margin-top: 20%;
padding: 2px;
}
.swiper-container {
margin: auto;
background: #000000;
}
.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;
}
img:not(#logo) {
max-width: 100%;
height: auto;
vertical-align: text-top;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="england/bild_01.jpg" /></div>
<div class="swiper-slide"><img src="england/bild_02.jpg" /></div>
<div class="swiper-slide"><img src="england/bild_03.jpg" /></div>
<div class="swiper-slide"><img src="england/bild_04.jpg" /></div>
<div class="swiper-slide"><img src="england/bild_05.jpg" /></div>
<div class="swiper-slide"><img src="england/bild_06.jpg" /></div>
</div>
</div>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<!-- Initialize Swiper var swiper = new Swiper('.swiper-container');-->
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
</body>
</html>danke an alle
Tino
