滑塊的左右按鈕，如Bootstrap旋轉木馬

-1

我想單擊左右滑動我的圖像。我爲此使用jQuery。但問題是，當我繼續點擊正確的分區右轉和空白顯示。我嘗試過，但沒有修復。我是jquery的新手。滑塊的左右按鈕，如Bootstrap旋轉木馬

<!DOCTYPE html><html class=''> 
<head> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<style class="cp-pen-styles"> 
.row_outer { 
    *overflow-x: auto; 
    width: 100%; 
} 
.row__inner { 
    -webkit-transition: 450ms -webkit-transform; 
    transition: 450ms -webkit-transform; 
    transition: 450ms transform; 
    transition: 450ms transform, 450ms -webkit-transform; 
    font-size: 0; 
    white-space: nowrap; 
    margin: 70.3125px 0; 
    padding-bottom: 10px; 
} 
.tile { 
    position: relative; 
    display: inline-block; 
    width: 326px; 
    height: 192px; 
    margin-right: 10px; 
    font-size: 20px; 
    cursor: pointer; 
    -webkit-transition: 450ms all; 
    transition: 450ms all; 
    -webkit-transform-origin: center left; 
      transform-origin: center left; 
} 
.tile__img { 
    width: 326px; 
    height: 192px; 
    -o-object-fit: cover; 
    object-fit: cover; 
} 
.tile__details { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    top: 0; 
    font-size: 10px; 
    opacity: 0; 
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); 
    -webkit-transition: 450ms opacity; 
    transition: 450ms opacity; 
} 
.tile__details:after, 
.tile__details:before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    display: #000; 
} 
.tile__details:after { 
    margin-top: -25px; 
    margin-left: -25px; 
    width: 50px; 
    height: 50px; 
    border: 3px solid #ecf0f1; 
    line-height: 50px; 
    text-align: center; 
    border-radius: 100%; 
    background: rgba(0,0,0,0.5); 
    z-index: 1; 
} 
.tile__details:before { 
    content: '▶'; 
    left: 0; 
    width: 100%; 
    font-size: 30px; 
    margin-left: 7px; 
    margin-top: -18px; 
    text-align: center; 
    z-index: 2; 
    color: #fff; 
} 
.tile:hover .tile__details { 
    opacity: 1; 
} 
.tile__title { 
    position: absolute; 
    bottom: 0; 
    padding: 10px; 
    color: #fff; 
} 
.row__inner:hover { 
    -webkit-transform: translate3d(-72.5px, 0, 0); 
      transform: translate3d(-72.5px, 0, 0); 
} 
.row__inner:hover .tile { 
    opacity: 0.3; 
} 
.row__inner:hover .tile:hover { 
    -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
    opacity: 1; 
} 
.tile:hover ~ .tile { 
    -webkit-transform: translate3d(215px, 0, 0); 
      transform: translate3d(215px, 0, 0); 
} 

    .buttons{ 
     position: absolute;   
     width: 100%; 
     margin-right: 10px; 
     font-size: 20px; 
     margin-top: -190px; 
    } 

    .buttons button{   
     height: 100%; 
     padding: 7px 20px; 
     color: #fa8f33; 
     border: 1px solid 
    } 

    .left{ 
    float: left;  
    } 

    .right{ 
     float: right; 
    } 

/* Sweep To Right */ 
.hvr-sweep-to-right { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: perspective(1px) translateZ(0); 
    transform: perspective(1px) translateZ(0); 
    box-shadow: 0 0 1px transparent; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-sweep-to-right:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fa8f33; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transform-origin: 0 50%; 
    transform-origin: 0 50%; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active { 
    color: white; 
} 
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
} 

/* Sweep To Left */ 
.hvr-sweep-to-left { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: perspective(1px) translateZ(0); 
    transform: perspective(1px) translateZ(0); 
    box-shadow: 0 0 1px transparent; 
    position: relative; 
    -webkit-transition-property: color; 
    transition-property: color; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
} 
.hvr-sweep-to-left:before { 
    content: ""; 
    position: absolute; 
    z-index: -1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: #fa8f33; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transform-origin: 100% 50%; 
    transform-origin: 100% 50%; 
    -webkit-transition-property: transform; 
    transition-property: transform; 
    -webkit-transition-duration: 0.3s; 
    transition-duration: 0.3s; 
    -webkit-transition-timing-function: ease-out; 
    transition-timing-function: ease-out; 
} 
.hvr-sweep-to-left:hover, .hvr-sweep-to-left:focus, .hvr-sweep-to-left:active { 
    color: white; 
} 
.hvr-sweep-to-left:hover:before, .hvr-sweep-to-left:focus:before, .hvr-sweep-to-left:active:before { 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
}  

</style></head><body> 
<div class="contain"> 


    <div class="row_outer"> 
    <div class="row__inner"> 


     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img " src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 

     <div class="tile"> 
     <div class="tile__media"> 
      <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" /> 
     </div> 
     <div class="tile__details"> 
      <div class="tile__title"> 
      Top Gear 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

<div class="buttons"> 
     <button class="left hvr-sweep-to-left " id="left"><span><i class="fa fa-angle-double-left" aria-hidden="true"></i> 
</span></button> 
     <button href="" class="right hvr-sweep-to-right " id="right"><span><i class="fa fa-angle-double-right" aria-hidden="true"></i> 
</span></button> 
    </div> 


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


    $("#right").click(function() { 
     $(".tile").animate({ "left": "+=365px" }, "1000"); 
    }); 

    $("#left").click(function(){ 
     $(".tile").animate({ "left": "-=365px" }, "1000"); 
    }); 
    </script> 

</body></html>

來源

2017-07-07 Tausib Raut

根據你的鏈接的樣式表，你使用的引導。你爲什麼不簡化和使用[Bootstrap的傳送帶]（https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php）？ – jswebb

好吧，你給了一個代碼，但你的按鈕在哪裏？你有嘗試過嗎？ – pbenard

我編輯我的代碼。 PLZ看一次。 –

你可以看看這個jsfiddle link

var slideIndex = 1; 
var length = $(".tile").length; 

$("#right").click(function() { 
    if(slideIndex != 1){ 
    $(".tile").animate({ "left": "+=365px" }, "1000"); 
    slideIndex--; 
    }  
}); 

$("#left").click(function() { 
    if(slideIndex >= length-1){ 

    }else{ 
    $(".tile").animate({ "left": "-=365px" }, "1000"); 
    slideIndex++; 
    } 

});

來源

2017-07-08 10:24:06

感謝這個作品。只是我把==而不是！=如果條件。 –

但問題是我想停止當我到達最後的div它停止移動 –

@TausibRaut更新代碼請檢查 –

感謝每個人誰看進去。我解決了我的問題。

這是我的解決方案：

var $par = $('.row_outer').scrollLeft(546) ; 
$('.right, .left').click(function(e) { 
    e.preventDefault();      
    var n = $(this).hasClass("left") ? "+=182" : "-=182"; 
    $par.animate({scrollLeft: n}); 
});

來源

2017-07-08 10:58:36

滑塊的左右按鈕，如Bootstrap旋轉木馬

回答

相關問題