您的位置: 首页  >  技术问答  >  滑块的左右按钮，如Bootstrap旋转木马

滑块的左右按钮，如Bootstrap旋转木马

分类: 技术问答 • 2022-08-20 12:06:00
问题描述：

我想单击左右滑动我的图像。我为此使用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>
+0

根据你的链接的样式表，你使用的引导。你为什么不简化和使用[Bootstrap的传送带]（https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php）？ – jswebb

+0

好吧，你给了一个代码，但你的按钮在哪里？你有尝试过吗？ – pbenard

+0

我编辑我的代码。 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++; 
    } 

});
+0

感谢这个作品。只是我把==而不是！=如果条件。 –

+0

但问题是我想停止当我到达最后的div它停止移动 –

+0

@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}); 
});

相关推荐