0
私のモバイルjqueryイメージスワイプは正常に動作していますが、 画像をスワイプすると、3番目の画像は2番目の画像になり、2番目の画像は3番目の画像になります。Jqueryモバイルスワイプは正常に動作していますが、イメージは正常に変更されません
すべてが正常に動作しますが、最初のimage.1st第二第三をスワイプすることはできません後に第三の画像が来る
$(document).ready(function(){
var totalItems = $('.image_post li').length, currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
//code for opening image
$('.grid img').on('click', function() {
currentIndex = $('.grid img').index(this) + 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$(".image_post li").removeClass("activepostimg");
$('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
});
//code for next image
$('.buttons_next').on('click', function() {
if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
currentIndex++;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');
} else {
currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$(".image_post li").removeClass("activepostimg");
$('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
}
});
//code for previous
$('.buttons_prev').on('click', function() {
if ($('.image_post li.activepostimg').index() > 0) {
currentIndex--;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
} else {
currentIndex = $('.image_post li').length;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$(".image_post li").removeClass("activepostimg");
$('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
}
});
//swipe
$("li").swiperight(function() {
if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
currentIndex++;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');
} else {
currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$(".image_post li").removeClass("activepostimg");
$('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
}
});
$("li").swipeleft(function() {
if ($('.image_post li.activepostimg').index() > 0) {
currentIndex--;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
} else {
currentIndex = $('.image_post li').length;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
$(".image_post li").removeClass("activepostimg");
$('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
}
});
});
JS
<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.2.0/jquery.mobile-1.2.0.min.js"></script>
<div class="container-fluid">
<div class="col-md-12">
<div class="row">
<div class="gal">
<div class="grid">
<a data-toggle="modal" data-target=".bd-example-modal-lg">
<img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
</a>
</div>
<div class="grid">
<a data-toggle="modal" data-target=".bd-example-modal-lg">
<img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
</a>
</div>
<div class="grid">
<a data-toggle="modal" data-target=".bd-example-modal-lg">
<img class="zoom" src="https://i1.wp.com/demo.wpzoom.com/indigo/files/2013/04/volterman-smart-wallet-10.jpg?w=790&h=527&crop" alt="">
</a>
</div>
<!--Images modal-->
<div class="modal fade bd-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="modal-content">
<!--image viewer-->
<div class="row">
<!---Prev Button-->
<div class="col-1">
<a class="buttons_prev" href="#">
<i class="fa fa-angle-left fa-3x"></i>
</a>
</div>
<!---next button-->
<div class="col-1">
<a class="buttons_next" href="#">
<i class="fa fa-angle-right fa-3x"></i>
</a>
</div>
</div>
<!--- Image show-->
<div class="col-12">
<div class="image_post">
<ul align="center">
<li >
<img src="https://preview.ibb.co/i0PmHk/1.jpg"/>
<!--image wise details-->
<div class="col-12">
<h2 class="text-left">This is headingA</h2>
<h2 class="text-left">This is headingB</h2>
<p class="text-left">
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
</div>
</li>
<li>
<img src="https://preview.ibb.co/mysOxk/3.jpg"/>
<!--image wise details-->
<div class="col-12">
<h2 class="text-left">This is headingA</h2>
<h2 class="text-left">This is headingB</h2>
<p class="text-left">
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
</div>
</li>
<li>
<img src="https://i1.wp.com/demo.wpzoom.com/indigo/files/2013/04/volterman-smart-wallet-10.jpg?w=790&h=527&crop"/>
<!--image wise details-->
<div class="col-12">
<h2 class="text-left">This is headingA</h2>
<h2 class="text-left">This is headingB</h2>
<p class="text-left">
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
</p>
</div>
</li>
</ul>
</div>
<!--image counter-->
<div align="center" class="slide_image_counter text-center">
<a></a>
</div>
</div>
<!--Image viewer-->
</div>
</div>
</div>
<!--Images modal-->
</div>
</div>
</div>
</div>
CSS
.gal {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
display: block;
overflow: hidden;
}
.grid {
overflow: hidden;
margin-bottom: 15px;
}
.zoom {
cursor: pointer;
transition: all .5s ease;
transform-origin: center;
-webkit-backface-visibility: hidden;
}
.grid:hover .zoom {
transform: scale(1.2);
}
.gal img {
width: 100%;
padding: 0;
}
@media (max-width: 500px) {
.gal {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
outline: 0;
background-color:rgba(0, 0, 0,0.98);
width: 100%;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: transparent;
margin: auto;
padding: 0;
width: 100%;
}
/* The Close Button */
.close {
color: white;
position: absolute;
margin-top: -30px;
right: -180px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
/*image like menu*/
.image_post ul {
list-style-type: none;
}
.image_post ul li img{
width:100%;
height:400px;
}
.image_post ul li{
list-style-type: none;
position: relative;
display: none;
}
.image_post ul li.activepostimg{
list-style-type: none;
position: relative;
display: block;
}
/*image like menu*/
.buttons_prev,
.buttons_prev:hover
{
color: white;
text-decoration: none;
}
.buttons_next,
.buttons_next:hover
{
color: white;
text-decoration: none;
}
.buttons_prev i{
margin-top: 20vh;
}
.buttons_next i{
margin-top: 20vh;
}
.activepostimg h2{
color: white;
font-size: 18px;
font-weight: 300;
}
.activepostimg h2:nth-of-type(1){
padding-top: 60px;
}
.activepostimg p{
color: white;
font-weight: 200;
}
.slide_image_counter{
margin-top:-170px;
color: white;
}
.slide_image_counter a{
background-color:rgba(115, 115, 115, 0.5);
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
border-radius: 12px;
font-size: 12px;
}
.modal-lg {
max-width: 900px;
}
以下の私のコードを見つけますお手伝いください。