Div顯示自己的一半兩次 - 使用swipe.js

Question

試圖找到一個滑塊庫，我不需要jQuery來操作。我按演示同一swipejs容器內不同寬度的兩個圖像，

<div id='mSwipe' style='background-color:#ffb6c1;width:300px;height:250px;position:relative; left:800px;' class='swipe'> 
    <div id="swipewrape" class='swipe-wrap'> 
    <div id="slideone" style="text-align:right;"><img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG"/></div> 
    <div id="slidetwo" style="text-align:right;"><img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg"/></div> 
    </div> 
</div> 
<div style='text-align:center;padding-top:20px;'> 
    <button onclick='state_change();mySwipe.prev()'>prev</button> 
    <button onclick='state_change();mySwipe.next()'>next</button> 
</div> 

<script> 
var state = 0; 
function state_change() //Dumb state change function 
{ 
    if(state) 
    { 
     state = 0; 
     document.getElementById('mSwipe').style.width = "300px"; 
    } 
    else 
    { 
    state = 1; 
    document.getElementById('mSwipe').style.width = "600px"; 

    } 
} 

我把一個簡單的小兩種狀態的狀態機來看看，如果我之前改變DIV寬度我可以做幻燈片效果踢英寸我把尺寸變化的回調方法包括在swipejs首先無濟於事。 我只是想改變div大小，每次我按下按鈕，使圖像進入它適合

在按鈕按下，div將調整大小的正確大小，但它似乎是大圖像（這是一堆餡餅），它會滑過並在滑動div中顯示一半大圖像兩次。我可以改回小圖像就好了

如果我打開我的鉻控制檯，完整的圖像顯示，並且我沒有更多的問題。

這是怎麼回事？

Answer 1

錐，

我已經改變了你的代碼一點點，創造了一個搗鼓你下面。 另外，如果您以後改變了對jQuery的看法，還可以在Javascript上註釋掉jQuery命令。

的JavaScript

// pure JS 
var elem = document.getElementById('slider'); 
window.mySwipe1 = Swipe(elem, { 
    // startSlide: 4, 
    // auto: 3000, 
    continuous: true, 
    // disableScroll: true, 
    // stopPropagation: true, 
    // callback: function(index, element) {}, 
    // transitionEnd: function(index, element) {} 
}); 
// with jQuery 
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe'); 

HTML

<div id='slider' class='swipe'> 
    <div class='swipe-wrap'> 
     <div> 
      <img src="http://www.totallygaming.com/sites/default/files/rotor/Commercial%20Intelligence.JPG" /> 
     </div> 
     <div> 
      <img src="http://in-formatio.com/wp-content/uploads/2012/02/ihop-free-pancake-day-20091-600x250.jpg" /> 
     </div> 
    </div> 
</div> 
<div style='text-align:center;padding-top:20px;'> 
    <button class='prev' onclick='mySwipe1.prev()'>prev</button> 
    <button class='next' onclick='mySwipe1.next()'>next</button> 
</div> 

CSS

.swipe { 
    overflow: hidden; 
    visibility: hidden; 
    position: relative; 
} 
.swipe-wrap { 
    overflow: hidden; 
    position: relative; 
} 
.swipe-wrap > div { 
    float:left; 
    width:100%; 
    position: relative; 
} 
.swipe-wrap > div > img { 
    margin:10%; 
    width:90%; 
} 
#slider { 
    height: auto; 
    width:50%; 
    left:200px; 
} 

EXAMPLE

編輯：更新日Ë小提琴，添加原始圖像尺寸

EXAMPLE 2