第一个和最后一个元素的 jquery 滑块动画

Question

**I want a condition so that slider does not animate to left and right for first and last li.. Currently when you click left you will see the left part goes blank as it will animate the condition of left click and same for right li last child when it reaches there it will still slide to right creating blank space. Below is my code. **

 var container = $(".carousel_wrapper"); var runner = container.find('ul'); var liWidth = runner.find('li:first').outerWidth(); var itemsPerPage = 6; var noofitems = runner.find('li').length; runner.width(noofitems * liWidth); container.width(itemsPerPage*liWidth); $('.right').click(function() { $( runner ).animate({ "left": "-=16%" }, "fast" ); }); $('.left').click(function() { $(runner).animate({ "left": "+=16%" }, "fast" ); });

 ul,li{ margin:0px; padding:0px;} /********** Timings ***********/ .DivisonHeader1{ float:left; width: 50%; padding-right: 1%; position: relative;border-right:1px solid #ccc;} .DivisonHeader1.DivisionNew{ width: 40%;} .DivisonHeader2.DivisionNew{ width: 60%;} .DivisonHeader2{ float:left; width: 50%;padding:0 3%;} .bgSkyBlue{ background: #E7F5FF;font-family: "BentonSansMedium" !important; border-color: #000 !important; border-top: 1px solid #000;} .DivisonHeader1 .Tablehaed{ font-size: 13px; margin-bottom: 0px;} .DivisonHeader2 .Tablehaed{ margin-bottom: 0px;} .DivisonHeader1 .Tablehaed .VDname{ width: 35%; padding-left: 0px;} .DivisonHeader1 .Tablehaed .KPIname{ width: 20%; padding-right: 10px;} .DivisonHeader1 .Tablehaed .Type{ width: 15%; padding-right: 10px; text-align: center;} .DivisonHeader1 .Tablehaed .PStaff{ width: 30%; text-align: center;} .scrollpainPoint.BCValueDriver.TimingScreen .SymbolPlus{width: 3%} .scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading{width: 97%; border-bottom: none;} .scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading .Mainheadp1{width: 100%} .scrollpainPoint.BCValueDriver.TimingScreen .MainSubHeading .Mainheadp1 .Texttual{ margin-left: 5px; margin-top: 17px; font-size: 14px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck{ display: inline-block;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints.TimingCheckPoints{ display: inline-block; margin-top: 0px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints.TimingCheckPoints:last-child{ border: none;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc { display: inline-block; float: left; padding-bottom: 0px; border-bottom: 0px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div{ display: inline-block; float: left;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.BgImprovedRange{ padding: 0px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.Type{ padding-top: 23px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.KPIname{ padding-top: 23px;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.VDname{ padding: 5px 0;} .scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .SelectedVdHeads{ width: 30%;} .scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .improvedRange{ width: 100%;} .scrollpainPoint.BCValueDriver.TimingScreen .VD_cons .SelectedVdHeads .InputtextIR{ width: 50%; margin-right: 0px; float: left;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.InputtextIR{width: 50%; margin-right: 0px; float: left; background: #f2f2f2; border-right:3px solid #fff; padding: 28px 0;} .scrollpainPoint.BCValueDriver.TimingScreen .PointsCheck .CheckPoints .VdTableBc div.InputtextIR.darkerV{background: #eaeaea; border-right: 0px;} .TablehaedYear{ float:left; width: 100%; position: relative;} .TablehaedYear .yearsDiv{ width: 100%;font-family: "BentonSansMedium"; text-align: center;padding-bottom: 5px;margin-bottom: 5px;font-size: 14px; float:left;} .TablehaedYear.TableHeadYearDivs .Row1 .yearsDiv{ border-bottom: 0px solid #000;} .TablehaedYear.TableHeadYearDivs{ border-bottom: none;} .TablehaedYear.TableHeadYearDivs .Row1{ border-bottom: 1px solid #000; float:left; width: 100%;} .yearsDiv1 input{ width: 70%; margin: 0px auto; display: block; border: 1px solid #000; border-radius: 5px; text-align: center;} .TextValueDisplay{ float: left; width: 100%; text-align: center; text-transform: uppercase;} .YearsDivArea{ float: left; width: 100%; padding-top: 12px; font-size: 13px;z-index: 10; position: inherit; top: auto;} .YearsDivArea.TopAbs{ top: 275px;} .EditHeader{ position: relative; float: right; } .yearsDiv .YearHeader{ display: block; border-bottom:1px solid #000; padding: 2.5px 0; font-size: 15px; line-height: 17px;} .TablehaedYear.TableHeadDBT .yearsDiv .YearHeader{ border-width: 2px; line-height: 18px; font-size: 14px;} .TablehaedYear.TableHeadDBT .yearsDiv .yearsDiv1 .TextValueDisplay{ text-transform: lowercase;} .yearsDiv .YearHeader{margin-bottom: 41px;} .yearsDiv1{float: left;width: 100%;border-bottom: 1px solid #000;padding: 8px 0 9px 0;} .DivisonHeaaderPositionSet{ position: relative; float: left; width: 100%;} .TablehaedYear.owl-carousel .owl-nav .owl-prev{ position: absolute; left: -40px; top: 40%; background: url(../images/Slider_arrow_left1.png); height: 50px; background-repeat: no-repeat; background-size: contain; width: 50px;} .TablehaedYear.owl-carousel .owl-nav .owl-next{ position: absolute; right: -40px; top: 40%; background: url(../images/Slider_arrow_right1.png); height: 50px; background-repeat: no-repeat; background-size: contain; width:50px;} .ValueSpreads{ float: left; width: 100%;font-family: "BentonSansMedium"; font-size: 16px; margin-bottom: 20px;} .ValueSpreads span{font-family: "BentonSansReg";font-size: 15px;} .BenifitsCal{ float: left; width: 100%; padding: 10px 0; border-top: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea;margin-top: 20px;} .BenifitsCal .BenifitsHeading{ font-size: 16px;} .BenifitsCalNoPad.totalb .BenifitsHeading{ font-size: 15px; color: rgb(15,170,255);} .BenifitsCalNoPad.totalb .BenifitsDivison1 , .BenifitsCalNoPad.totalb .BenifitsDivison2{ font-size: 15px;font-family: "BentonSansMedium";} .BenifitsCalNoPad{ float: left; width: 100%; padding: 7px 0; border-bottom: 1px solid #ccc;} .BenifitsCalNoPad.totalb{ border-color:#000;} .BenifitsCalNoPad.reccuringb{ border-color:#949494; padding-left: 10px;} .BenifitsHeading{ float: left; width:40%;font-family: "BentonSansMedium"; padding-right: 20px;} .BenifitsCalNoPad.SimpleRightText .BenifitsHeading{ text-align: right;font-family: "BentonSansReg";} .BenifitsDivison{ float: left; width: 60%} .BenifitsDivison1, .BenifitsDivison2{ float: left; width: 50%; text-align: center;} .yearsDiv .YearHeader.NomargVS{ margin-bottom: 0px;} .yearsDiv1.TextBorderSimple{font-family: "BentonSansReg"; border-color:#ccc; } .pad-top30{ margin-top: 30px !important;border-top: 0px;} .scrollpainPoint.BCValueDriver.TimingScreen.BSTable .yearsDiv1{ padding: 7px 0;} .yearsDiv1.TextBorderSimple.pad-top30{font-family: "BentonSansMedium";border-color:#000; } .MtopPage{ margin-top: 75px !important;} .MtopPage1{ margin-top: 25px !important;} /*structure Change*/ .yearsDivHeaders ul{ float: left; width: 100%; border-bottom: 2px solid #000; padding-bottom: 5px; margin-bottom: 5px; font-family: "BentonSansMedium"; line-height: 16px;} .yearsDivHeaders ul li{ float: left; width: 100px; text-align: center;} .carousel_wrapper.yearsDivHeaders{ height: 24px;} .carousel_wrapper{ float: left; width: 100%; position: relative; height: 56px; overflow: hidden;} .carousel_wrapper ul{font-family: "BentonSansMedium";position: absolute; top:0px; overflow: hidden;} .carousel_wrapper li{ float: left; width: 100px;} .carousel_wrapper li span.TextValueDisplay{ text-transform: lowercase;} .carousel_wrapper li input{ width: 70%; margin: 0px auto; display: block; border: 1px solid #000; border-radius: 5px; text-align: center;} .FullRowAll{ border-bottom: 1px solid #ccc; float:left; width: 100%;} .NewimingHeadDivision .VD_cons{ border-bottom: 1px solid rgb(194,229,255);} .next{ float: right; position: relative;} .next a{ position: absolute; top:-200px; width: 53px; height: 52px; font-size: 0px; z-index: 100;} .next a.left{ left: 0px;background: url(../images/Slider_arrow_left1.png);} .next a.right{ right: -40px;background: url(../images/Slider_arrow_right1.png);}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="DivisonHeader2"> <div class="TablehaedYear"> <div class="carousel_wrapper yearsDivHeaders"> <ul> <li><span>Year 1</span> </li> <li><span>Year 2</span> </li> <li><span>Year 3</span> </li> <li><span>Year 4</span> </li> <li><span>Year 5</span> </li> <li><span>Year 6</span> </li> <li><span>Year 7</span> </li> <li><span>Year 8</span> </li> <li><span>Year 9</span> </li> <li><span>Year 10</span> </li> <li><span>Year 12</span> </li> <li><span>Year 13</span> </li> <li><span>Year 14</span> </li> </ul> </div> </div> </div> <div class="FullRowAll"> <div class="DivisonHeader2"> <div class="carousel_wrapper"> <ul> <li class="nooo"><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> <li><span class="TextValueDisplay">xx1</span> <input type="text" value="xx%"> </li> </ul> </div> </div> <div class="container"> <!---------Slide Arrows--------> <div class=" DivisonHeader2"> <a href="#" class="left">left</a> <a href="#" class="right">right</a> </div> </div> <!---------Slide Arrows-------->

Answer 1

instead of animating left animate the scrollLeft property:

jsFiddle demo with multiple carousels

 $(".carousel").each(function() { var $ul = $("ul", this), ul = $ul[0], $li = $ul.find("li"); $(".prev, .next", this).on("click", function(evt) { evt.preventDefault(); if($ul.is(":animated")) return; // Don't register clicks if it's animating var isNext = $(this).is(".next"), w = $li.width(); $ul.animate({scrollLeft: "+="+ (isNext ? w : -w) }, 320); }); });

 /*QuickReset*/ *{margin:0;box-sizing:border-box;} /* * CAROUSEL * Styles essential just for the carousel */ .carousel > ul{ padding: 0; list-style: none; overflow: hidden; white-space: nowrap; } .carousel > ul li{ display: inline-block; vertical-align: top; white-space: normal; margin-right: -4px; width: 16.666%; } /* your custom styles here */ .carousel > ul li{ text-align: center; } .carousel span.title{ display:block; border-bottom: 2px solid #000; padding: 3px 5px; } .carousel span.tag{ display:inline-block; border: 1px solid #000; border-radius:5px; padding: 3px 5px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="carousel"> <ul> <li><span class="title">Year 1</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 2</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 3</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 4</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 5</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 6</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 7</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 8</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 9</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 10</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 11</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 12</span>xx1<br><span class="tag">xx%</span></li> <li><span class="title">Year 13</span>xx1<br><span class="tag">xx%</span></li> </ul> <button class="prev">&larr;</button> <button class="next">&rarr;</button> </div>