0

I've written a plain slider with a little of javascript.

Problem is I can only show a certain amount of thumbnails.

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

My 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%;
}

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

And here is a live preview of my webpage:

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

You can see that only 13 out of 16 thumbnails are shown and the rest show up in the next line. I've inserted borders for the 14th and 15th thumbnail. I want to align all my thumbnails in one line.

Thanks in advance!

4

1 回答 1

0

您的容器 div (boxes-slider) 太窄。您可以调整宽度或动态设置宽度，如：

$(函数(){

var new_width = 0;

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

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

});

于 2013-06-15T21:17:30.227 回答