carrousel à l'aide de jQuery

Je sais il y a des plugins disponibles là-bas, mais je vais essayer de faire un de moi-même, mais avant que j'essaie de comprendre le concept de devenir une infinie/circulaire de carrousel. Voici mon jsfiddle jusqu'à présent.. http://jsfiddle.net/hbk35/KPKyz/3/

HTML:

    <div id="carousel_wrapper">
    <ul>
        <li>
            <div>0</div>
        </li>
        <li>
            <div>1</div>
        </li>
        <li>
            <div>2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div>4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div>6</div>
        </li>
        <li>
            <div>7</div>
        </li>
    </ul>
</div>
<br>
<div id="buttons">
    <button id="left">left</button>
    <button id="right">right</button>
</div>

JS:

var container = $("#carousel_wrapper");

var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;

runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);

$('#right').on('click',function(){
   runner.animate({scrollLeft: -liWidth},1000);
});


$('#left').on('click',function(){
    runner.animate({scrollLeft: liWidth},1000);
});

CSS:

div#carousel_wrapper{

    overflow:hidden;
    position:relative;
}

ul {
    padding:0px;
    margin:0px;
}
ul li {
    list-style:none;
    float:left;
}
ul li div {
    border:1px solid white;
    width:50px;
    height:50px;
    background-color:gray;
}

Je ne veux pas utiliser le clone et le détacher de la méthode. Est-il un autre moyen pour le faire?
Veuillez quelqu'un souhaite me guider où je fais erreur. Je suis novice sur un débordement de pile et javascript/jquery aussi..à essayer d'apprendre sur mon propre. Pardonnez-moi j'essaie depuis de mettre mon code sur la question, n'a pas pu obtenir propre et distincte comme les autres.

Merci!!

Nous avons besoin d'un reinventing-the-wheel tag sur DONC
Le code dans le violon ne correspond pas au code dans votre question.
merci!
toutes mes excuses. le violon est mis à jour. merci.
Vous êtes à la recherche pour mettre en œuvre le carrousel jquery cadre ou tout autre cadre

OriginalL'auteur harshes53 | 2014-02-27

Ici, vous allez à l'infini. Pourrait être fait avec moins de code pour vous.
http://jsfiddle.net/artuc/rGLsG/3/

HTML:

<a href="javascript:void(0);" class="btnPrevious">Previous</a>
<a href="javascript:void(0);" class="btnNext">Next</a>
<div class="carousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
    </ul>
</div>

CSS:

.carousel{
        padding-top: 20px;
        width: 357px;
        overflow: hidden;
        height: 50px;
        position: relative;
    }.carousel ul{
        position: relative;
        list-style: none;
        list-style-type: none;
        margin: 0;
        height: 50px;
        padding: 0;
    }.carousel ul li{
        position: absolute;
        height: 25px;
        width: 50px;
        float: left;
        margin-right: 1px;
        background: #f2f2f2;
        text-align: center;
        padding-top: 25px;
    }

JS:

$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
itemWidth = carousel.find('li:first').width()+1; //Including margin
//Set Carousel width so it won't wrap
carousel.width(itemWidth*carouselChild.length);
//Place the child elements to their original locations.
refreshChildPosition();
//Set the event handlers for buttons.
$('.btnNext').click(function(){
if(canClick){
canClick = false;
clickCount++;
//Animate the slider to left as item width 
carousel.stop(false, true).animate({
left : '-='+itemWidth
},300, function(){
//Find the first item and append it as the last item.
lastItem = carousel.find('li:first');
lastItem.remove().appendTo(carousel);
lastItem.css('left', ((carouselChild.length-1)*(itemWidth))+(clickCount*itemWidth));
canClick = true;
});
}
});
$('.btnPrevious').click(function(){
if(canClick){
canClick = false;
clickCount--;
//Find the first item and append it as the last item.
lastItem = carousel.find('li:last');
lastItem.remove().prependTo(carousel);
lastItem.css('left', itemWidth*clickCount);             
//Animate the slider to right as item width 
carousel.finish(true).animate({
left: '+='+itemWidth
},300, function(){
canClick = true;
});
}
});
function refreshChildPosition(){
carouselChild.each(function(){
$(this).css('left', itemWidth*carouselChild.index($(this)));
});
}
});

Il y avait un bug lorsque vous vite sur. Ajouté finish() la méthode JS fiddle: jsfiddle.net/artuc/rGLsG/2
fonctionne comme un charme! génial c'est ce que je cherchais... merci!! mais il y a un petit problème avec elle.. si vous continuez à appuyer sur le bouton suivant, vous trouverez un espace entre 1&2 li éléments.
Yep, ni animer, ni la finition semble fonctionner si vous cliquez sur vraiment rapide. J'ai mis en place une solution sale. Veuillez consulter les mises à jour de violon: jsfiddle.net/artuc/rGLsG/3 également supprimé une fonction inutile.
ouais je vois le problème avec la mise à jour de votre violon. si u-cliquez sur la gauche en continu et rapide, u verra le premier élément à ne pas y + quelques aléatoire de l'espace entre les deux. d'autre bouton précédent œuvres génial!! merci bien!
je pense que si nous pouvons fixer l'aléatoire de l'espace de problème!

OriginalL'auteur artuc

Ici, vous allez: http://jsfiddle.net/KPKyz/5/

var container = $("#carousel_wrapper");
var runner = container.find('ul');
var liWidth = runner.find('li:first').outerWidth();
var itemsPerPage = 3;
var noofitems = runner.find('li').length;
runner.width(noofitems * liWidth);
container.width(itemsPerPage*liWidth);
$('#right').click(function() {
$( runner  ).animate({ "left": "-=51px" }, "slow" );
});
$('#left').click(function() {
$( runner  ).animate({ "left": "+=51px" }, "slow" );
});

CSS

div#carousel_wrapper{
overflow:hidden;
position:relative;
width:500px;
height: 100px;
}
ul {
padding:0px;
margin:0px;
position: absolute;
top:50px;
left: 0px;
width:300px;
height: 50px;
overflow: hidden;
}
ul li {
list-style:none;
float:left;
}
ul li div {
border:1px solid white;
width:50px;
height:50px;
background-color:gray;
}

Merci, je cherchais quelque chose comme ça sans additinoal plugins
Oh..je pensais que vous étiez OP 😛 ...My bad
c'est génial. deux plus question. pourquoi je ne peux pas utiliser liWidth si je ne suis pas au courant de la largeur? comment puis-je faire circulaire/infini?? l'apprécier.
Oh...je n'ai pas su vous voulez circulaire...tenir sur
Ça va prendre du temps...mais c'est possible...je vais travailler un peu..

OriginalL'auteur Ani

Vous devez vous connecter pour publier un commentaire.