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.
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!
Ask a Question
Get help from others!
Recent Questions
- How can I transform graph image into a tikzpicture LaTeX code?
- How Do I Get The Ifruit App Off Of Gta 5 / Grand Theft Auto 5
- Iv’e designed a space elevator using a series of lasers. do you know anybody i could submit the designs too that could manufacture the concept and put it to use
- Need help finding a book. Female OP protagonist, magic
- Why is the WWF pending games (“Your turn”) area replaced w/ a column of “Bonus & Reward”gift boxes?
Recent Answers
- Joshua Engel on Why fry rice before boiling?
- Jon Church on Why fry rice before boiling?
- haakon.io on Why fry rice before boiling?
- Lex on Does Google Analytics track 404 page responses as valid page views?
- Peter Machado on Why fry rice before boiling?