Question

我写了一个带有一点javascript的普通滑块。

问题是我只能显示一定数量的缩略图。

<div class="slider-container">


    <div class="footer-slider">
    <div class="left-arrow">

    </div>
    <div class="current-showing-boxes">
    <div class="boxes-slider">

    <div class="box1">
    <img src="images/thumbnails/ring1.png" alt="greek-jewellery-ring-1">
     </div>
             <div class="box2">
     <img src="images/thumbnails/ring2.png" alt="greek-jewellery-ring-2">
     </div>
      <div class="box3">
     <img src="images/thumbnails/ring3.png" alt="greek-jewellery-ring-3">
     </div>
      <div class="box4">
     <img src="images/thumbnails/ring4.png" alt="greek-jewellery-ring-4">
     </div>
     <div class="box5">
     <img src="images/thumbnails/ring5.png" alt="greek-jewellery-ring-5">
     </div>
      <div class="box6">
     <img src="images/thumbnails/ring6.png" alt="greek-jewellery-ring-6">
     </div>
      <div class="box7">
     <img src="images/thumbnails/ring7.png" alt="greek-jewellery-ring-7">
     </div>
       <div class="box8">
     <img src="images/thumbnails/ring8.png" alt="greek-jewellery-ring-8">
     </div>
       <div class="box9">
     <img src="images/thumbnails/ring9.png" alt="greek-jewellery-ring-9">
     </div>
       <div class="box10">
     <img src="images/thumbnails/ring10.png" alt="greek-jewellery-ring-10">
     </div>
       <div class="box11">
     <img src="images/thumbnails/ring11.png" alt="greek-jewellery-ring-11">
     </div>
       <div class="box12">
     <img src="images/thumbnails/ring12.png" alt="greek-jewellery-ring-12">
     </div>

        <div class="box13">
     <img src="images/thumbnails/ring13.png" alt="greek-jewellery-ring-13">
     </div>
       <div class="box14" style="border:1px solid green">
     <img src="images/thumbnails/ring14.png" alt="greek-jewellery-ring-12">
     </div>
       <div class="box15" style="border:1px solid white">
     <img src="images/thumbnails/ring15.png" alt="greek-jewellery-ring-12">
     </div>
       <div class="box16">
     <img src="images/thumbnails/ring16.png" alt="greek-jewellery-ring-12">
     </div>
    </div>
    </div>
    <div class="right-arrow">

    </div>
    </div>

    </div>

我的css：

.slider-container{

position:relative;
width:100%;
height:20%;
margin: 0 auto;
background-color: #776b63;
/*  border: 1px dashed orange;  */

}
.footer-slider {

width: 78%;
position:relative;
height:96%;
 /* border:1px dashed orange;  */
margin: 0 auto  ;
z-index:2;
 /* overflow: hidden;  */
}


.current-showing-boxes{

position:relative;
width: 100%;
height:100%;
overflow:hidden;
/*  border: 1px solid pink;  */ 
}

.boxes-slider{
width: 225%;
margin:1% auto;
position:relative;
/* border: 1px dashed red; */
height: 90%;
overflow: hidden; 

}
.box1,.box2,.box3,.box4,.box5,.box6,.box7,.box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15, .box16{

position: relative;
right:0px;
  border: 0px solid ; 
    cursor: pointer;
    float: left;
    height: 98%;
    margin-left: 0.4%;
    width: 6.8%;
    z-index: 10;


}

.box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover
, .box6:hover, .box7:hover, .box8:hover, .box9:hover, .box10:hover
, .box11:hover, .box12:hover,  .box13:hover, .box14:hover, .box15:hover, .box16:hover{
border : 1px solid #8a8a8a;

}


.box1 img,.box2 img,.box3 img,.box4 img,.box5 img,.box6 img,.box7 img,
.box8 img, .box9 img, .box10 img, .box11 img, .box12 img, .box13 img, .box14 img, .box15 img, .box16 img{
position:relative;
display:block;

margin:7% auto;
margin-top: 12%;
height: 60%;
}

我的Javascript / jquery：

$(document).ready(function()
{
$(".right-arrow").click(function(){
$(".box1").animate({right:"+=900px"},1200);
$(".box2").animate({right:"+=900px"},1250);
$(".box3").animate({right:"+=900px"},1300);
$(".box4").animate({right:"+=900px"},1500);
$(".box5").animate({right:"+=900px"},1550);
$(".box6").animate({right:"+=900px"},1600);
$(".box7").animate({right:"+=900px"},1700);
$(".box8").animate({right:"+=900px"},1800);
$(".box9").animate({right:"+=900px"},1900);
$(".box10").animate({right:"+=900px"},2000);
$(".box11").animate({right:"+=900px"},2100);
$(".box12").animate({right:"+=900px"},2200);
$(".box13").animate({right:"+=900px"},2200);
$(".box14").animate({right:"+=900px"},2200);
$(".box15").animate({right:"+=900px"},2200);
$(".box16").animate({right:"+=900px"},2200);
$(".box17").animate({right:"+=900px"},2200);

});
$(".left-arrow").click(function(){

$(".box17").animate({right:"-=900px"},1200);
$(".box16").animate({right:"-=900px"},1200);
$(".box15").animate({right:"-=900px"},1200);
$(".box14").animate({right:"-=900px"},1200);
$(".box13").animate({right:"-=900px"},1200);
$(".box12").animate({right:"-=900px"},1200);
$(".box11").animate({right:"-=900px"},1250);
$(".box10").animate({right:"-=900px"},1300);
$(".box9").animate({right:"-=900px"},1500);
$(".box8").animate({right:"-=900px"},1550);
$(".box7").animate({right:"-=900px"},1600);
$(".box6").animate({right:"-=900px"},1700);
$(".box5").animate({right:"-=900px"},1800);
$(".box4").animate({right:"-=900px"},1900);
$(".box3").animate({right:"-=900px"},2000);
$(".box2").animate({right:"-=900px"},2100);
$(".box1").animate({right:"-=900px"},2200);
});
});

以下是我的网页的实时预览：

http://hellenic-jewls.com/engagement-rings/

您可以看到，只显示了16个缩略图中的13个，其余缩略图显示在下一行中。我为第14和第15个缩略图插入了边框。我想将所有缩略图对齐一行。

提前致谢！

Answer 1

你的容器div（盒子滑块）太窄了。您可以调整宽度或动态设置宽度，如：

$（函数（）{

var new_width = 0;

$('div.boxes-slider > div').each(function)({
    new_width += $(this).width();
});

$(' div.boxes-slider').width( new_width );

}）;

无法在我的自定义滑块的一行中显示所有缩略图

1 个答案: