2017-02-03 23 views
1

**スライダが最初と最後のliの左と右にアニメーションしないようにする条件が必要です。現在、左をクリックすると、左の部分が空白になります左クリックの状態をアニメートし、右の最後の子がそれに到達したときに同じ状態をアニメーションします。それでも、右にスライドして空白を作成します。以下は私のコードです。 **最初の要素と最後の要素のjqueryスライダアニメーション

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

+0

左/右ボタンが対応するエンドポイントに達すると、そのボタンは無効になりますか? –

+0

私はそれらを無効にすることはできません..彼らは常に表示されます..私はちょうど左/右の極端な位置に達すると滑り効果を無効にしたい。 jqueryの条件を追加する必要がありますか? –

+1

cssを見ていません。デモ目的のためのものです。私はjqueryコードが必要です。 –

答えて

1

の代わりscrollLeftプロパティをアニメーションleftアニメーション:

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>

+0

あなたの答えは本当に良いですが、私はただ1つの左ボタンで複数のカルーセルを持っています。 –

+0

@sahildhir心配はいりません。私のコードは複数のカルーセルを扱います。 (Thx btw :)) –

+0

私は複数のカルーセルが必要ですが、すべての左右のスライドの動きを処理するための1つのコントロールボタン[1つ前と1つ]のみです。 –

関連する問題