逐项滚动轮播

Question

I have a carousel on my site. When I click the right or left arrow button, it scroll to the last or first item of the carousel. How can I scroll item by item when I click the right or left arrow buttons?

I'm using this code:

// scroll to left
$(rightPaddle).on('click', function() {
    $('.menu').animate({scrollLeft: '+=1000'}, 600);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.menu').animate({scrollLeft: '0'}, 600);
});

Here's a working example:

 // duration of scroll animation var scrollDuration = 300; // paddles var leftPaddle = document.getElementsByClassName('left-paddle'); var rightPaddle = document.getElementsByClassName('right-paddle'); // get items dimensions var itemsLength = $('.container-menu').length; var itemSize = $('.container-menu').outerWidth(true); // get some relevant size for the paddle triggering point var paddleMargin = 20; // get wrapper width var getMenuWrapperSize = function() { return $('.menu-wrapper').outerWidth(); } var menuWrapperSize = getMenuWrapperSize(); // the wrapper is responsive $(window).on('resize', function() { menuWrapperSize = getMenuWrapperSize(); }); // size of the visible part of the menu is equal as the wrapper size var menuVisibleSize = menuWrapperSize; // get total width of all menu items var getMenuSize = function() { return itemsLength * itemSize; }; var menuSize = getMenuSize(); // get how much of menu is invisible var menuInvisibleSize = menuSize - menuWrapperSize; // get how much have we scrolled to the left var getMenuPosition = function() { return $('.menu').scrollLeft(); }; // finally, what happens when we are actually scrolling the menu $('.menu').on('scroll', function() { // get how much of menu is invisible menuInvisibleSize = menuSize - menuWrapperSize; // get how much have we scrolled so far var menuPosition = getMenuPosition(); var menuEndOffset = menuInvisibleSize - paddleMargin; // show & hide the paddles // depending on scroll position if (menuPosition <= paddleMargin) { $(leftPaddle).addClass('hidden'); $(rightPaddle).removeClass('hidden'); } else if (menuPosition < menuEndOffset) { // show both paddles in the middle $(leftPaddle).removeClass('hidden'); $(rightPaddle).addClass('hidden'); } else if (menuPosition >= menuEndOffset) { $(leftPaddle).removeClass('hidden'); $(rightPaddle).addClass('hidden'); } }); // scroll to left $(rightPaddle).on('click', function() { $('.menu').animate({ scrollLeft: '+=1000' }, 600); }); // scroll to right $(leftPaddle).on('click', function() { $('.menu').animate({ scrollLeft: '0' }, 600); }); 

 body { margin: 100px } .menu-wrapper { position: relative; max-width: 1119px; height: 100%; margin: 0; } .menu { box-sizing: border-box; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; } .paddle { position: absolute; top: 0; bottom: 0; cursor: pointer; z-index: 999; width: 50px; height: 50px; border-radius: 50%; border: 0; background: white; box-shadow: 1px 1px 6px #d0d0d0; } .left-paddle { left: -24px; top: 92px; z-index: 9999; position: absolute; color: #e21b22; font-size: 20px; text-align: center; } .right-paddle { right: -24px; top: 92px; z-index: 9999; position: absolute; color: #e21b22; font-size: 20px; text-align: center; } .paddles .fas { margin: 0; } .hidden { display: none; } .container-menu { display: inline-block; width: 209px; margin-right: 11.7px; box-shadow: 0 0 10px #d4d4d4; border: 1px solid #E6E6E6; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: #FFF; } .menu-body { float: left; text-align: left; } .item-image { float: left; } .item-image img { width: 100%; float: left; } .item-info { float: left; padding: 10px 22px 15px; color: #737373; font-weight: 500; } .item-name h1 { margin: 0; padding: 0 0 6px; font-size: 15px; -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; display: -webkit-box!important; -o-line-clamp: 2; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; line-clamp: 2; white-space: normal; height: 40px; min-height: 40px; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 23px; font-weight: 500; } .item-description { margin: 8px 0; border-top: 1px solid #E6E6E6; font-weight: normal; } #ml-1 p { color: #717070; text-shadow: none; } .item-checkout { margin-bottom: 15px; font-size: 13px; font-family: Roboto; font-weight: 400; } .item-checkout i { color: #f4c150; font-size: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script> <div class='programacao-category'> <h3><i class='fas fa-laptop-code' /> Programação</h3> <div class='menu-wrapper'> <ul class='menu'> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 235,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-block'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Espanhola: Espanhol do Juan</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214) </div> <div class='item-price'>R$ 55,90</div> </div> </div> </div> </li> <li class='container-menu'> <div class='menu-block'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Italiana: Gente Italiana</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479) </div> <div class='item-price'>R$ 119,50</div> </div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 499,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Adobe Photoshop</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 25,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Violão - Você Pode Tocar</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 195,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Desenho Realista com Alexandre Porto</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 510,50</div> </div> </div> </li> </ul> <div class='paddles'> <button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button> <button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button> </div> </div> </div> 

View on CodePen

Answer 1

I recommend using the defined itemSize variable as the measure of how much to move the slider. Since the itemSize is the width of one item, the slider will scroll by that amount.

scrollLeft: '+=' + itemSize
scrollLeft: '-=' + itemSize

Also, I updated the logic that shows/hides the arrows. In your code, even if menuPosition < menuEndOffset , the "next" arrow is still hidden. I changed that.

... else if (menuPosition < menuEndOffset) {
  // show both paddles in the middle
  $(leftPaddle).removeClass('hidden');
  $(rightPaddle).removeClass('hidden');
} ...

Here's a working example:

 // duration of scroll animation var scrollDuration = 300; // paddles var leftPaddle = document.getElementsByClassName('left-paddle'); var rightPaddle = document.getElementsByClassName('right-paddle'); // get items dimensions var itemsLength = $('.container-menu').length; var itemSize = $('.container-menu').outerWidth(true); // get some relevant size for the paddle triggering point var paddleMargin = 20; // get wrapper width var getMenuWrapperSize = function() { return $('.menu-wrapper').outerWidth(); } var menuWrapperSize = getMenuWrapperSize(); // the wrapper is responsive $(window).on('resize', function() { menuWrapperSize = getMenuWrapperSize(); }); // size of the visible part of the menu is equal as the wrapper size var menuVisibleSize = menuWrapperSize; // get total width of all menu items var getMenuSize = function() { return itemsLength * itemSize; }; var menuSize = getMenuSize(); // get how much of menu is invisible var menuInvisibleSize = menuSize - menuWrapperSize; // get how much have we scrolled to the left var getMenuPosition = function() { return $('.menu').scrollLeft(); }; // finally, what happens when we are actually scrolling the menu $('.menu').on('scroll', function() { // get how much of menu is invisible menuInvisibleSize = menuSize - menuWrapperSize; // get how much have we scrolled so far var menuPosition = getMenuPosition(); var menuEndOffset = menuInvisibleSize - paddleMargin; // show & hide the paddles // depending on scroll position if (menuPosition <= paddleMargin) { $(leftPaddle).addClass('hidden'); $(rightPaddle).removeClass('hidden'); } else if (menuPosition < menuEndOffset) { // show both paddles in the middle $(leftPaddle).removeClass('hidden'); $(rightPaddle).removeClass('hidden'); } else if (menuPosition >= menuEndOffset) { $(leftPaddle).removeClass('hidden'); $(rightPaddle).addClass('hidden'); } }); // scroll to left $(rightPaddle).on('click', function() { $('.menu').animate({ scrollLeft: '+=' + itemSize }, 600); }); // scroll to right $(leftPaddle).on('click', function() { $('.menu').animate({ scrollLeft: '-=' + itemSize }, 600); }); 

 body { margin:0; } .menu-wrapper { position: relative; max-width: 1119px; height: 100%; margin: 0; } .menu { box-sizing: border-box; white-space: nowrap; overflow: hidden; margin: 0; padding: 0; } .paddle { position: absolute; top: 0; bottom: 0; cursor: pointer; z-index: 999; width: 50px; height: 50px; border-radius: 50%; border: 0; background: white; box-shadow: 1px 1px 6px #d0d0d0; } .left-paddle { left: -24px; top: 92px; z-index: 9999; position: absolute; color: #e21b22; font-size: 20px; text-align: center; } .right-paddle { right: -24px; top: 92px; z-index: 9999; position: absolute; color: #e21b22; font-size: 20px; text-align: center; } .paddles .fas { margin: 0; } .hidden { display: none; } .container-menu { display: inline-block; width: 209px; margin-right: 11.7px; box-shadow: 0 0 10px #d4d4d4; border: 1px solid #E6E6E6; overflow: hidden; border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; background: #FFF; } .menu-body { float: left; text-align: left; } .item-image { float: left; } .item-image img { width: 100%; float: left; } .item-info { float: left; padding: 10px 22px 15px; color: #737373; font-weight: 500; } .item-name h1 { margin: 0; padding: 0 0 6px; font-size: 15px; -webkit-line-clamp: 2; -moz-line-clamp: 2; -ms-line-clamp: 2; display: -webkit-box!important; -o-line-clamp: 2; -moz-box-orient: vertical; -ms-box-orient: vertical; -o-box-orient: vertical; box-orient: vertical; line-clamp: 2; white-space: normal; height: 40px; min-height: 40px; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 23px; font-weight: 500; } .item-description { margin: 8px 0; border-top: 1px solid #E6E6E6; font-weight: normal; } #ml-1 p { color: #717070; text-shadow: none; } .item-checkout { margin-bottom: 15px; font-size: 13px; font-family: Roboto; font-weight: 400; } .item-checkout i { color: #f4c150; font-size: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script> <div class='programacao-category'> <h3><i class='fas fa-laptop-code' /> Programação</h3> <div class='menu-wrapper'> <ul class='menu'> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 235,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-block'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Espanhola: Espanhol do Juan</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214) </div> <div class='item-price'>R$ 55,90</div> </div> </div> </div> </li> <li class='container-menu'> <div class='menu-block'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Língua Italiana: Gente Italiana</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479) </div> <div class='item-price'>R$ 119,50</div> </div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 499,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Adobe Photoshop</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 25,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Violão - Você Pode Tocar</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 195,90</div> </div> </div> </li> <li class='container-menu'> <div class='menu-body'> <div class='item-image'> <img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' /> </div> <div class='item-info'> <div class='item-name'> <h1>Curso de Desenho Realista com Alexandre Porto</h1> </div> <div class='item-description'> <p>por AmoCursos</p> </div> <div class='item-checkout'> <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479) </div> <div class='item-price'>R$ 510,50</div> </div> </div> </li> </ul> <div class='paddles'> <button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button> <button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button> </div> </div> </div>