AnswerBun.com

Saber cuando el scroll llega al inicio o final del carousel con jquery

Stack Overflow en español Asked by Jorge Alonso on September 28, 2020

Tengo este código jquery:

var fila = $('.productos-recomendados .contenedor-carousel');
var flechaIzquierda = $('#flecha-izquierda');
var flechaDerecha = $('#flecha-derecha');

$(flechaDerecha).on("click", function(){    
     var scrollDer = fila.scrollLeft() + fila.width();
     fila.scrollLeft(scrollDer);
     
});

$(flechaIzquierda).on("click", function(){     
     var scrollIzq = fila.scrollLeft() - fila.width(); 
     fila.scrollLeft(scrollIzq);
});
    /* Carousel Productos y Categorias */
    
    .panel{
        width: 280px;
        height: 331px;
        overflow: hidden;
    }
    
    .a-carrito{
        color: #FF0000;
        text-decoration: none;
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: 230px;
        display: inline-block;
    }
    
    .producto .panel-body{
        margin-top: -20px;
    }
    
    .panel img{
        display: block;
        width: 140px;
        height: 210px; 
        margin: 0 auto;
    }
    
    .panel .p-precio{
        text-align: center;
        font-size: 20px;
        color: #3FDE20;
        margin-bottom: 2px;
    }
    
    .panel .p-producto{
        text-align: center;
        font-size: 25px;
    }
    
    .productos-recomendados .contenedor-principal{
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .productos-recomendados .contenedor-principal .flecha-izquierda,
    .productos-recomendados .contenedor-principal .flecha-derecha{
        position: absolute;
        border-radius: 50px;
        background-color: #000;
        font-size: 40px;
        height: 50px;
        top: 40%;
        line-height: 40px;
        width: 50px;
        color: #fff;
        cursor: pointer;
        z-index: 500;
        opacity: 0;
        transition: .2s ease all;
    }
    
    .productos-recomendados .contenedor-principal .flecha-izquierda{
        left: 0;
    }
    
    .productos-recomendados .contenedor-principal .flecha-derecha{
        right: 0;
    }
    
    /* ---- ----- ----- Carousel ----- ----- ----- */
    .productos-recomendados .contenedor-carousel{
        width: 100%;
        padding: 33px 0;
        overflow: hidden;
        scroll-behavior: smooth;
    }
    
    .productos-recomendados .contenedor-carousel .carousel{
        display: flex;
        flex-wrap: nowrap;
    }
    
    .productos-recomendados .contenedor-carousel .carousel .producto{
        min-width: 280px;
        margin-right: 8px;
        transition: .3s ease all;
        box-shadow: 5px 5px 10px rgba(0,0,0, .3);
        cursor: pointer;
    }
    
    .productos-recomendados .contenedor-carousel .carousel .producto.hover{
        transform: scale(1.2);
        transform-origin: center;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productos-recomendados">
      <h2 class="text-center">PRODUCTOS</h2>
      <p class="text-center">Este es nuestro catalogo de productos</p>
      <div class="contenedor-principal">
        <button role="button" id="flecha-izquierda" class="flecha-izquierda"><i class="fa fa-angle-left"></i></button>
        <div class="contenedor-carousel">
           <div class="carousel">
            <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal1.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div> 
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal2.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal3.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal4.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal5.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal6.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal7.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal8.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal</p>
              </div>
             </div>
            </div>
          </div>
        <button role="button" id="flecha-derecha" class="flecha-derecha"><i class="fa fa-angle-right"></i></button>
      </div>
    </div>

Estos códigos me ayudan a desplazar el carousel a la izquierda y derecha, lo que necesito es que cuando al dar click para que siga avanzando a la derecha se detecte que el scroll esta al final del carousel y se regrese al inicio, y cuando el scroll este en el inicio y se de click para que avance a la izquierda se regrese al final.

También tengo otro problema cuando muevo el scroll no hace el desplazamiento correctamente ya que al inicio del primer elemento y al final del ultimo elemento les deja un pequeño espacio, ojala que también pudieran ayudarme a corregir ese error.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

One Answer

Basicamende se debe detectar cuando el scroll alcanza el final del espacio disponible (scrollWidth) o el inicio del scroll (scrollLeft==0)

$(flechaDerecha).on("click", function(){    
     var scrollDer = fila.scrollLeft() + fila.width();
     if(fila.scrollLeft()+fila.width()/2>=fila[0].scrollWidth){
        scrollDer = fila[0].scrollWidth-fila.width();        
     }
     if(fila.scrollLeft()+fila.width()>=fila[0].scrollWidth){
        scrollDer = 0;        
     }
     fila.scrollLeft(scrollDer);
     
});

$(flechaIzquierda).on("click", function(){     
     var scrollIzq = fila.scrollLeft() - fila.width(); 
     if(fila.scrollLeft()<=fila.width()){
        scrollIzq=0;
     }
     if(fila.scrollLeft()<=0){
        scrollIzq=fila[0].scrollWidth-fila.width();
     }
     fila.scrollLeft(scrollIzq);
});

En el ejemplo, al detectar el final derecho, establece el scroll en 0. Y al detectar el inicio, establece el scroll al final (scrollWidth menos el ancho del item).

Las flechas no estan visibles

var fila = $('.productos-recomendados .contenedor-carousel');
var flechaIzquierda = $('#flecha-izquierda');
var flechaDerecha = $('#flecha-derecha');

$(flechaDerecha).on("click", function(){    
     var scrollDer = fila.scrollLeft() + fila.width();
     if(fila.scrollLeft()+fila.width()/2>=fila[0].scrollWidth){
        scrollDer = fila[0].scrollWidth-fila.width();        
     }
     if(fila.scrollLeft()+fila.width()>=fila[0].scrollWidth){
        scrollDer = 0;        
     }
     fila.scrollLeft(scrollDer);
     
});

$(flechaIzquierda).on("click", function(){     
     var scrollIzq = fila.scrollLeft() - fila.width(); 
     if(fila.scrollLeft()<=fila.width()){
        scrollIzq=0;
     }
     if(fila.scrollLeft()<=0){
        scrollIzq=fila[0].scrollWidth-fila.width();
     }
     fila.scrollLeft(scrollIzq);
});
/* Carousel Productos y Categorias */
    
    .panel{
        width: 280px;
        height: 331px;
        overflow: hidden;
    }
    
    .a-carrito{
        color: #FF0000;
        text-decoration: none;
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 0;
        margin-left: 230px;
        display: inline-block;
    }
    
    .producto .panel-body{
        margin-top: -20px;
    }
    
    .panel img{
        display: block;
        width: 140px;
        height: 210px; 
        margin: 0 auto;
    }
    
    .panel .p-precio{
        text-align: center;
        font-size: 20px;
        color: #3FDE20;
        margin-bottom: 2px;
    }
    
    .panel .p-producto{
        text-align: center;
        font-size: 25px;
    }
    
    .productos-recomendados .contenedor-principal{
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .productos-recomendados .contenedor-principal .flecha-izquierda,
    .productos-recomendados .contenedor-principal .flecha-derecha{
        position: absolute;
        border-radius: 50px;
        background-color: #000;
        font-size: 40px;
        height: 50px;
        top: 40%;
        line-height: 40px;
        width: 50px;
        color: #fff;
        cursor: pointer;
        z-index: 500;
        opacity: 0;
        transition: .2s ease all;
    }
    
    .productos-recomendados .contenedor-principal .flecha-izquierda{
        left: 0;
    }
    
    .productos-recomendados .contenedor-principal .flecha-derecha{
        right: 0;
    }
    
    /* ---- ----- ----- Carousel ----- ----- ----- */
    .productos-recomendados .contenedor-carousel{
        width: 100%;
        padding: 33px 0;
        overflow: hidden;
        scroll-behavior: smooth;
    }
    
    .productos-recomendados .contenedor-carousel .carousel{
        display: flex;
        flex-wrap: nowrap;
    }
    
    .productos-recomendados .contenedor-carousel .carousel .producto{
        min-width: 280px;
        margin-right: 8px;
        transition: .3s ease all;
        box-shadow: 5px 5px 10px rgba(0,0,0, .3);
        cursor: pointer;
    }
    
    .productos-recomendados .contenedor-carousel .carousel .producto.hover{
        transform: scale(1.2);
        transform-origin: center;
    }



.flecha-izquierda, .flecha-derecha{
  opacity: 1 !important;
  background-color: rgba(255,255,255,0.2) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productos-recomendados">
      <h2 class="text-center">PRODUCTOS</h2>
      <p class="text-center">Este es nuestro catalogo de productos</p>
      <div class="contenedor-principal">
        <button role="button" id="flecha-izquierda" class="flecha-izquierda"><i class="fa fa-angle-left"></i></button>
        <div class="contenedor-carousel">
           <div class="carousel">
            <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal1.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal1</p>
              </div>
             </div> 
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal2.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal2</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal3.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal3</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal4.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal4</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal5.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal5</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal6.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal6</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal7.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal7</p>
              </div>
             </div>
             <div class="panel panel-default producto">
              <a href="" class="a-carrito"><span class="fa fa-cart-plus"></span></a>
              <div class="panel-body">
               <img src="img/sal8.jpg">
               <p class="p-precio">$200.00</p>
               <p class="p-producto">PackEcoSal8</p>
              </div>
             </div>
            </div>
          </div>
        <button role="button" id="flecha-derecha" class="flecha-derecha"><i class="fa fa-angle-right"></i></button>
      </div>
    </div>

Answered by F.Igor on September 28, 2020

Add your own answers!

Related Questions

Input de imagen no me aparece en el formulario

0  Asked on December 25, 2021

 

Postman – Caracteres escape respuesta XML

1  Asked on December 25, 2021 by susacapuntas

         

Gulp-pug no funciona

3  Asked on December 23, 2021 by pablo-dominguez

     

actualizar una datatable en tiempo real laravel

1  Asked on December 23, 2021 by ramon-albares

   

¿Como puedo agregar ActionListener en este método?

2  Asked on December 23, 2021 by webrollandeveloper

   

¿Como recorrer un dataframe como una lista de listas?

2  Asked on December 23, 2021 by raimundovp

   

Sobre input en python

2  Asked on December 23, 2021

     

Convertir una variable double a float

1  Asked on December 22, 2021 by odoardo

   

Agrupar por fecha + Hora dinámico

2  Asked on December 22, 2021

   

Extraer enteros de una cadena JAVA

3  Asked on December 22, 2021 by johann-duran

         

¿Cómo puedo almacenar los datos de una API por líneas en Python?

0  Asked on December 22, 2021 by quique-fernandez

   

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP