JQuery滑塊響應式設計故障

我在嘗試使我的JQuery滑塊響應時遇到問題（如果我調整窗口大小的一半被裁剪掉），事情是，使用視口和媒體查詢我網站上的其他所有內容都是響應式，只是滑塊不是。JQuery滑塊響應式設計故障

這裏是我的jsfiddle https://jsfiddle.net/Syystole/4r4qnojo/3/

HTML

<style> 
img {max-width: 100%} 
.side-by-side{ 
display: flex; 
} 
</style> 

<body> 
<div class="WrapperPage"> 

<section id="slider"> 
    <ul class="mySlide"> 
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/></li> 
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/></li> 
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image" /></li> 
    <li><img src="http://lorempixel.com/400/200/sports" alt="Slider Image" /></li> 
    </ul> 
<span class="button back">Back</span> 
<span class="button next">Next</span> 
</section> 

</div> 
</body> 
</html>

var sliderList; 
$(function() { 

    var sliderWrapper = $("#slider"); 
    sliderList = sliderWrapper.children("ul"); 
    var sliderItems = sliderList.children("li"); 
    var count = 1; 
    var sliderItems = $('ul.mySlide > li').length; 
    var sliderDuration = 1000; 
    var countLimitReached = ""; 


    function animateSlider(direction, duration, countLimitReached) { 
     if (direction === "+") { 
     count--; 
     if(countLimitReached == "start"){ 
     sliderList.animate({ 
      "margin-left": "-=2400px" 
     }, duration); 
     count = 4; 
     return; 
     } else 
     {  
     sliderList.animate({ 
      "margin-left": "+=800px" 
     }, duration); 
     } 
     } 

     else if (direction === "-") { 
     count++; 

     if(countLimitReached == "end"){ 
     sliderList.animate({ 
      "margin-left": "+=2400px" 
     }, duration); 
     count = 1; 
     return; 
     } else 
     { 
      sliderList.animate({ 
      "margin-left": "-=800px" 
      }, duration); 
     } 
     } 
    } 

    function checkCount(count, sliderItems){ 
    if(count === sliderItems){ 
     return "end"; 
    } 
    else if(count == 1){ 
    return "start"; 
    } 
    return ""; 
    } 

    $(".button").on('click', function() { 
     countLimitReached = checkCount(count, sliderItems); 
     if ($(this).hasClass("back")) { 
     animateSlider("+", sliderDuration, countLimitReached); 
     } else { 
     animateSlider("-", sliderDuration, countLimitReached); 
     } 
    countLimitReached = ""; 
    }); 
});

CSS

#slider { 
margin: 0 auto; 
width: 82%; 
overflow:hidden; 
} 

#slider ul { 
list-style: none; 
width: 3500px; 
margin: 0; 
padding: 0; 
} 

#slider li{ 
float: left; 
width: 800px; 
} 

img{ 
width:100%; 
} 

.button { 

font-family: Arial, sans-serif; 
font-size: 20px; 
display: block; 
padding: 20px; 
border: 1px solid #ccc; 
} 

.back { 
float: left; 
} 

.next { 
float: right; 
}

來源

2017-04-18 Syystole

我認爲你可以代替這個https://jsfiddle.net/tLhs1v59/ –

我想我的代碼來弄明白儘管使用你的代碼 – Syystole

我有一些改變你的滑塊，我希望這次對你有用。

$(function() { 
 

 
    var ul = $("#slider ul"); 
 
    var slide_count = ul.children().length; 
 
    var sliderDuration = 1000; 
 
    var slide_width_pc = 100.0/slide_count; 
 
    var slide_index = 0; 
 
    
 
    ul.find("li").each(function(indx) { 
 
    var left_percent = (slide_width_pc * indx) + "%"; 
 
    $(this).css({"left":left_percent}); 
 
    $(this).css({width:(100/slide_count) + "%"}); 
 
    }); 
 

 
    // Listen for click of prev button 
 
    $("#slider .prev").click(function() { 
 
    if(slide_index ==0){ 
 
    \t slide_index = slide_count; 
 
    } 
 
    slide(slide_index - 1); 
 
    }); 
 

 
    // Listen for click of next button 
 
    $("#slider .next").click(function() { 
 
    if((slide_count-1) == slide_index){ 
 
    \t slide_index = -1; 
 
    } 
 
    slide(slide_index + 1); 
 
    }); 
 

 
    function slide(new_slide_index) { 
 

 
    if(new_slide_index < 0 || new_slide_index >= slide_count) return; 
 

 
    var margin_left_pc = (new_slide_index * (-100)) + "%"; 
 

 
    ul.animate({"margin-left": margin_left_pc}, sliderDuration, function() { 
 

 
     slide_index = new_slide_index 
 

 
    }); 
 

 
    } 
 

 
});

#slider { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 

 
#slider ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    position: absolute; 
 
    width: 300%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#slider li { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 33.333333%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    border: none; 
 
} 
 

 
#slider li img { 
 
    border: none; 
 
    width: 100%; 
 
    min-height: 100%; 
 
} 
 

 
#slider button { 
 
    position: absolute; 
 
    display: block; 
 
    box-sizing: border-box; 
 
    border: none; 
 
    outline: none; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 20%; 
 
    background-color: rgba(0, 0, 0, 0.3); 
 
    color: #fff; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align:center; 
 
    opacity: 0; 
 
    z-index: 2; 
 
} 
 

 
#slider button.prev { 
 
    left: 0; 
 
} 
 

 
#slider button.next { 
 
    right: 0; 
 
} 
 

 
#slider button:hover, .slider button:active { 
 
    opacity: 1.0; 
 
} 
 

 
#slider .content { 
 
    z-index: 3; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 3em; 
 
    box-sizing: border-box; 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    color: #fff; 
 
    line-height: 3em; 
 
    padding: 0 1em; 
 
    font-size: 1.5em; 
 
} 
 

 
#slider .content a { 
 
    color: inherit; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="WrapperPage"> 
 

 
    <div id="slider"> 
 
    <ul class="mySlide"> 
 
    <li> 
 
     <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/> 
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/> 
 
    
 
    </li> 
 
    <li> 
 
     <img src="http://lorempixel.com/400/200/sports" alt="Slider Image"/> 
 
    </li> 
 
    
 
    </ul> 
 
    <button class="prev">prev</button> 
 
    <button class="next">next</button> 
 
</div> 
 

 
    </div> 
 

 
    </body>

來源

2017-04-19 10:16:59

JQuery滑塊響應式設計故障

回答

相關問題