0

iSlider

コードでTouchSwipeを使用しています。#myimageflow div12 個の画像と 1 つの div を含む があります。

スワイプすると、画像だけをスワイプしたいのですが、div動かないでください。

$("#myImageFlow").swipe({
    swipe:function(event, direction, distance, duration, fingerCount) {
        if(direction == 'left') {
            my.MouseWheel.handle(-1);
        } else if (direction == 'right') {
            my.MouseWheel.handle(1);
        }
    }
});

HTML コード::

iSlider 

    <!-- CSS  -->
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    <link rel="stylesheet" href="css/iSlider.css" type="text/css" />


    <!-- JS  -->
    <!--<script type="text/javascript" src="js/iSlider.js"></script> -->
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <!--<script type="text/javascript" src="js/jquery-1.7.1.js"></script>-->
    <!--<script type="text/javascript" src="js/jquery.js"></script>-->
    <script type="text/javascript" src="js/jquery.ui.touch-punch.js"></script>
    <script type="text/javascript" src="js/jquery-css-transform.js"></script>   
    <script type="text/javascript" src="js/rotate3Di.js"></script>
    <script type="text/javascript" src="js/klass.min.js"></script>


    <script type="text/javascript">
    var imgArr = new Array();
    var imgFront=new Array();
    var i = 1;
    var n=0;
    var backimg=new Array();
    var frontimg=new Array();
    var clickEnabled = true;
  $(document).ready(function () {

  /*   Reading the data from XML file*/

        $.ajax({
            type: "GET",
            url: "photos.xml",
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var path = $(this).attr('path');
                    var width = $(this).attr('width');
                    var height = $(this).attr('height');
                    var id = $(this).attr('id');
                    var alt = $(this).attr('alt');
                    var longdesc = $(this).find('longdesc').text();
                    var description = $(this).find('desc').text();
                    $('#myImageFlow').append('<img src="'+path+'" id='+id+'  height="'+height+'"  width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
                    imgArr[i] = description;
                    imgFront[i]=longdesc;                   
                    backimg[i]=longdesc;
                    frontimg[i]=path;
                    i = i+1;

                });

            }
        });



  /* ===================================== */
  //$("#myImageFlow").show();
  $.getScript('js/iSlider.js');
  $.getScript('js/code.photoswipe.jquery-3.0.5.js');
  $.getScript('js/touchSwipe.js');  


        });

</head>
<body style="background-image:url('img/Mesh2.png');background-repeat:no-repeat; background-size: cover; width=:'100%'">
    <h1>iSlider</h1>

    <div id="header">

    </div>
    <div id="container">
    <div id="center" class="column">        


    <!-- This is all the XHTML ImageFlow needs -->
    <div id="myImageFlow" class="imageflow">
        <div id="front">Initialy This is Front  </div>
    </div>



</div>
    <div id="left" class="column">

    </div>
   <div id="right" class="column">

   </div>
   </div>
  <div id="footer">

  </div>


</body>
</html>
4

0 に答える 0