jQuery Carousel Problem

[Michael1411]

Hallo zusammen,

ich bin gerade dabei ein jQuery Carousel zu erstellen und habe das Problem, dass dieses erst nach dem zweiten Klick auf die Buttons richtig funktioniert. Beim ersten Klick funzt es zwar auch, allerdings wird links das erste Bild nochmals angezeigt und beim Klick nach rechts, wird ein Bild übersprungen. Ab dem zweiten Klick funktioniert alles wunderbar. Ich finde einfach den Fehler nicht, hat jemand vielleicht eine Idee?

<div class="container">
    <div class="roster-left"><img src="./images/roster-left.png"></div>
    <div class="roster">
        <ul class="roster-content">
            <li><img src="./images/1.jpg" alt="Test"></li>
            <li><img src="./images/2.jpg" alt="Test"></li>
            <li><img src="./images/3.jpg" alt="Test"></li>
            <li><img src="./images/4.jpg" alt="Test"></li>
            <li><img src="./images/5.jpg" alt="Test"></li>
            <li><img src="./images/6.jpg" alt="Test"></li>
            <li><img src="./images/7.jpg" alt="Test"></li>
            <li><img src="./images/8.jpg" alt="Test"></li>
            <li><img src="./images/9.jpg" alt="Test"></li>
            <li><img src="./images/10.jpg" alt="Test"></li>
            <li><img src="./images/11.jpg" alt="Test"></li>
            <li><img src="./images/12.jpg" alt="Test"></li>
            <li><img src="./images/13.jpg" alt="Test"></li>
            <li><img src="./images/14.jpg" alt="Test"></li>
            <li><img src="./images/15.jpg" alt="Test"></li>
            <li><img src="./images/16.jpg" alt="Test"></li>
            <li><img src="./images/17.jpg" alt="Test"></li>
            <li><img src="./images/18.jpg" alt="Test"></li>
            <li><img src="./images/19.jpg" alt="Test"></li>
            <li><img src="./images/20.jpg" alt="Test"></li>
        </ul>       
    </div>
    <div class="roster-right"><img src="./images/roster-right.png"></div>
</div>

    .roster {
        height: 100px;
        width: 746px;
        overflow: hidden;
    }
    
    .roster-content {
        position: relative;
        width: 9999px;
        list-style: none;
    }
    
    .roster img {
        height: 90px;
        width: 116px;
    }
 
    .roster li {
        float: left;
        margin-right: 10px;
        width: 116px;
    }
    
    .roster, .roster-left, .roster-right {
        float: left;
    }
    
    .roster-left, .roster-right {
        cursor: pointer;
        cursor: hand;
    }

<script type="text/javascript">
    $(document).ready(function() {
        
        var speed = 500;
        var item_width = $('.roster-content li').outerWidth() + 10;
        var left_value = item_width * (-1);      
        
        $('.roster-content li:first').before($('.roster-content li:last'));
            
        $('.roster-content').each(function() {
            if($(this).children().length > 6) {
        
            $('.roster-right img').click(function(){
                
                var left_indent = parseInt($('.roster-content').css('left')) - item_width;
                
                $('.roster-content').animate({'left' : left_indent}, speed, function(){                         
                    $('.roster-content li:last').after($('.roster-content li:first')); 
                    $('.roster-content').css({'left' : left_value}); 
                });  
            });     

            $('.roster-left img').click(function(){
                
                var left_indent = parseInt($('.roster-content').css('left')) + item_width;
                             
                $('.roster-content').animate({'left' : left_indent}, speed, function(){                         
                    $('.roster-content li:first').before($('.roster-content li:last'));
                    $('.roster-content').css({'left' : left_value}); 
                });  
            });
        
            }
        });  
    });  
</script>

Vielen Dank im Voraus!

Gruss
Michael

 

[bdt600]

Crossposting!

 

[Michael1411]

Sorry, wusste nicht, dass man das nicht darf. Würde mich über Hilfe sehr freuen, da das Anliegen recht dringend ist...

 

[Michael1411]

Habe das Problem anders gelöst - vielen Dank!