ブートストラップカルーセルのようなスライダの左のボタン

-1

私は画像をクリックすると左右にスライドしたいです。私はjqueryを使っています。しかし、問題は、私が右クリックし続けると、divが正しくなり、空白スペースが表示されることです。私は試しましたが、修正されません。私はjqueryの初心者です。ブートストラップカルーセルのようなスライダの左のボタン

<!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

：

は、これが私のソリューションです。なぜ[ブートストラップのカルーセル]（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

ありがとうございます。ちょうど私はif =の代わりに==を入れます。 –

しかし、問題は私が最後に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

ブートストラップカルーセルのようなスライダの左のボタン

答えて

関連する問題