CODEWITHSUNDEEP
javascriptjquerycss
clestcruz
clestcruz

Reputation: 1111

prepend elements properly on a carousel loop

I'm trying to fix an issue wherein the element pops in from the last to first position when I'm triggering the previous button on my carousel to prepend the element. I made a loop so that when I hit trigger the slider will slide first then the last element on the carousel will move from the last position to the first position. Unfortunately the transition isn't smooth if you check the code below. jquery prepend has a small delay before moving the last element from the last position to the first position. Is there a proper way to implementing the loop.

(function ($) {
        'use strict';

        var carousel = {

            init : function() {

                var carouselWidth = 0,
                    itemListContainer = $('.item-list').width(),
                    itemList = $('.carousel .item-list ul li'),
                    containerWidth = $('.carousel .item-list').innerWidth(),
                    browserWidth = $(window).width(),
                    itemWidth = itemList.outerWidth( containerWidth / 3 ),
                    itemSize = itemWidth.outerWidth();


                //Set Container Width
                $('.carousel .item-list ul').children().each(function() {
                    carouselWidth += $(this).outerWidth(true);
                    $('.carousel .item-list ul').outerWidth(carouselWidth);
                });


                var offset = itemSize * 3;
              

               // function dynamicItemWidth() {
               //      if ( $('body') <= 1024 ) {
               //          itemWidth = itemList.width( itemListContainer / 5 );
               //      }

               //      if ( $('body') <= 480 ) {
               //          itemWidth = itemList.width( itemListContainer / 2 );
               //      }

               //      if ( $('body') <= 320 ) {
               //          itemWidth = itemList.width( itemListContainer / 1 );
               //      }

               //  }

                // var itemWidth = itemList.width( browserWidth / 5 ),
                //     itemSize = itemWidth.width();

                $('.carousel .item-list ul').prepend( $('.carousel .item-list ul li:last') );

                $('.carousel .item-list ul').css('left', '-' +  itemSize + 'px'  );


                $('.btns .next').click(function(){

                    var move = $('.carousel .item-list ul li').outerWidth();
                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) - move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').append( $('.carousel .item-list ul li:first') );
                            $('.carousel .item-list ul').css({'left' : '-' +  move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );                     }
                        });
                    }

                    animate( 1, 300 );

                });

                $('.btns .prev').click(function() {

                    var move = $('.carousel .item-list ul li').outerWidth();
                    var leftIndent = parseInt($('.carousel .item-list ul').css('left')) + move;

                    function animate( repeat, speed ) {
                        $('.carousel .item-list ul:not(:animated)').animate({'left' : leftIndent}, speed,function(){
                            $('.carousel .item-list ul').prepend($('.carousel .item-list ul li:last'));
                            $('.carousel .item-list ul').css({'left' : '-' + move + 'px'});

                            if ( repeat > 1 ) {
                                animate( ( repeat - 1 ), speed );
                            }
                        });
                    }

                    animate( 1, 300 );

                });

            }

        }

        $(document).ready(function(){
            carousel.init();
        });


        $(window).on('resize', function() {
            carousel.init();  
        })

    })(jQuery);
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
   display: block;
}

body {
   line-height: 1;
}

ol, ul {
   list-style: none;
}

blockquote, q {
   quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
   content: '';
   content: none;
}

table {
   border-collapse: collapse;
   border-spacing: 0;
}

* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

/* -- #Carousel -- */

.carousel {
   position: relative;
}

.carousel .item-list {
   max-width: 1366px;
   margin: 0 auto;
   border: 1px solid #000;
   box-sizing: content-box;
}

.carousel .item-list ul {
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   margin-bottom: 10px;
   position: relative;
   overflow: hidden;
}

.carousel .btns {
   width: 100%;
   z-index: 10;
   top: 50%;
}

.carousel .btns li {
   display: inline-block;
   cursor: pointer;
}

.carousel.-aim-partners {
   position: relative;
}

.carousel.-aim-partners .item-list {
   margin: 0 auto;
}

.carousel.-aim-partners .item-list ul li {
   float: left;
   width: 230px;
   height: 110px;
   margin-top: 10px;
   margin-bottom: 10px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   background-color: beige;
}

.carousel.-aim-partners .btns {
   width: 110%;
   left: -70px;
}

.carousel.-aim-partners .btns li {
   width: 35px;
   height: 40px;
}

.carousel.-aim-partners .btns li.prev {
   background: url("../images/carousel-icon-arrow.png") no-repeat 15px 0;
}

.carousel.-aim-partners .btns li.next {
   background: url("../images/carousel-icon-arrow.png") no-repeat -20px 0;
}

/* -- End Carousel -- */

/*# sourceMappingURL=style.css.map */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class='carousel -aim-partners'>

      <div class='item-list'>
          <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>
              <li>15</li>
              <li>16</li>             
              
          </ul>
      </div>


        <ul class="btns">
            <li class="prev">
                <i class="fa fa-angle-left" aria-hidden="true">prev</i>
            </li>
            <li class="next">
                <i class="fa fa-angle-right" aria-hidden="true">next</i>
            </li>
        </ul>

    </div>
</div>

Upvotes: 0

Views: 897

Answers (1)

Shalika Akalanka
Shalika Akalanka

Reputation: 179

Change the way you animate it can affect the view. Checkout this fiddle. I create a simple example with a different animation method.

$('.prev').click(function(){
  $('.slide li:last').css('width',0);
  $('.slide li:last').prependTo('.slide');
  $('.slide li:first').animate({width: '98px'});
});

Upvotes: 1

Related Questions