jQuery क्षैतिज स्क्रॉलिंग (क्लिक करें और एनिमेट करें)

Question

मेरे पास एक क्षैतिज रेखा में अनंतता के लिए तैरने वाली divs की एक श्रृंखला है। मेरे पास एक निश्चित चौड़ाई div कंटेनर है, अतिप्रवाह: छुपा हुआ। आखिरकार, मैं वस्तुओं के माध्यम से स्क्रॉल करने के लिए बाएं और दाएं भाग पर divs/बटन दबा देना चाहता हूं (बनाम स्क्रॉलबार का उपयोग कर)।

मुझे काम करने के लिए .animate() प्राप्त करने में परेशानी हो रही है। मैं चाहता हूं कि प्रत्येक क्लिक सूची में आइटम को स्थानांतरित करे।

यह अमेज़ॅन के समान काम करना चाहिए "जिन ग्राहकों ने यह आइटम खरीदा है, उन्होंने भी खरीदा" सूची है कि आप उसी तरीके से स्क्रॉल कर सकते हैं। मैं mousedown का उपयोग करने की कोशिश करने के लिए लुभाना था और इसे पकड़े हुए (सही स्क्रॉलिंग के समान) चलते हुए यह पहले आसान दृष्टिकोण करना चाहते हैं।

यहाँ बेला और कोड है:

http://jsfiddle.net/stfzy/16/

HTML:

<div id="container"> 
<div id="arrowL"> 
</div> 
<div id="arrowR"> 
</div> 
<div id="list-container"> 
    <div class='list'> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class='item'> 
     </div> 
     <div class="item"> 
     </div> 
    </div> 
</div> 

सीएसएस:

#container{ 
width:340px; 
    height:50px; 
} 

#list-container { 
overflow:hidden;  
width: 300px; 
float:left;  
} 

.list{ 
    background:grey; 
min-width:700px; 
    float:left; 
} 


#arrowR{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:right; 
    cursor:pointer; 
} 


#arrowL{ 
background:yellow; 
    width:20px; 
    height:50px; 
    float:left; 
    cursor:pointer; 
} 

.item{ 
    background:green; 
width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
} 

jQuery

$(document).ready(function() { 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'-=300px'}); 

    }); 

    $('div#arrowR').click(function(){ 

     $('div.item').animate({'left':'+=300px'}); 

    }); 

}); 

किसी भी और सभी मदद की सराहना की। धन्यवाद!

Answer 1

.item करने के लिए position:relative जोड़ें, ताकि जैसे:

.item{ 
    background:green; 
    width:140px; 
    height:40px; 
    margin:5px; 
    float:left; 
    position:relative; /* Put me here! */ 
} 

कार्य उदाहरण: http://jsfiddle.net/mattblancarte/stfzy/21/

अपने सेटअप में कुछ और कीड़े हैं, लेकिन यह आप unstuck पाने चाहिए। :)

संपादित ::

यहाँ बग जहां सूची भी दिशा में बहुत दूर स्लाइड हो जाएगा हल करने के लिए एक त्वरित समाधान है:

$(document).ready(function() { 

    var $item = $('div.item'), //Cache your DOM selector 
     visible = 2, //Set the number of items that will be visible 
     index = 0, //Starting index 
     endIndex = ($item.length/visible) - 1; //End index (NOTE:: Requires visible to be a factor of $item.length... You can improve this by rounding...) 

    $('div#arrowR').click(function(){ 
     if(index < endIndex){ 
      index++; 
      $item.animate({'left':'-=300px'}); 
     } 
    }); 

    $('div#arrowL').click(function(){ 
     if(index > 0){ 
      index--;    
      $item.animate({'left':'+=300px'}); 
     } 
    }); 

});