Tengo realizado un carousel
que me permite deslizar entre varios productos de manera horizontal e infinito o circular, además de eso cuando no existen más de 4 artículos los botones para deslizar de izquierda o derecha se ocultan, esta acción también no funciona dado a que a contabiliza todos los item
de la página.
Entonces, como puedo realizar a que estos comportamiento funcionen de manera individual por cada sección
de carousel
que se encuentra en la misma página, por ejemplo la página principal.
Los errores comunes, no me permite deslizar los productos en los otros carousel
no me oculta los botones en otras secciones que solo estén menos de 4 artículos, dado que solo esta validando o tomando en cuenta la primera sección del carousel
.
Este es mi código y, el código completo aquí https://jsfiddle.net/cdunbf4y/ dado a que SO me muestra un mensaje de error que he sobrepasado los 3000 caracteres.
var direction_slider = "up";
var current_step = 0;
var scroll_product = false;
var scroll = -1;
$(function(){
$(".carousels").each(function(){
var numItems = $(this).find("div.item").length;
if (numItems <= 4) {
$(this).find('.nav-btn').css('display','none');
}
});
$('.carousel-right').click(function() {
//.last().remove()
$('.item.product').last().insertBefore($('.item.product').first());
})
$('.carousel-left').click(function() {
$('.item.product').first().insertAfter($('.item.product').last());
})
// vars for clients list carousel
var $product_carousel = $('.slider');
var products = $product_carousel.children().length;
var product_width = (products * 140); // 140px width for each client item
$product_carousel.css('width',product_width);
var rotating = true;
//var product_speed = 1800;
//var see_products = setInterval(rotateClients, product_speed);
$(document).on({
mouseenter: function(){
rotating = false; // turn off rotation when hovering
},
mouseleave: function(){
rotating = true;
}
}, '.carousel');
/*SLIDER CON MOVIMIENTO SLIDER CAROUSEL ANIMADO
function rotateClients() {
if(rotating != false) {
if (direction_slider == "up") {
rotateClientsUp();
if (++current_step == $(".slider .item").length) direction_slider = "down";
} else {
rotateClientsDown();
if (--current_step == 0) direction_slider = "up";
}
}
}
function rotateClientsUp() {
var $last = $('.slider .item:last');
$last.remove().css("margin-left", "-140px");
$(".slider").prepend($last);
$last.animate({ 'margin-left': '0' }, 600);
}
function rotateClientsDown() {
var $first = $('.slider .item:first');
$first.animate({ 'margin-left': '-140px' }, 600, function() {
$first.remove().css({ 'margin-left': '0px' });
$('.slider .item:last').after($first);
});
}*/
$product_carousel.on("mousedown", function(e) {
scroll_product = true;
scroll = e.pageX;
event.preventDefault();
}).on("mouseup", function(e) {
scroll_product = false;
var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
var dir = scroll - e.pageX < 0 ? "up" : "down";
for (var x = 0; x < num; x++) {
var $first = $('.slider .item:first');
var $last = $('.slider .item:last');
if (dir == "up") {
$last.prependTo(".slider");
} else {
$first.appendTo(".slider");
}
}
$(".slider").css("transform", "translate(0, 0)")
}).on("mousemove", function(e) {
if (scroll_product) {
$(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
}
});
});
.relative {
position:relative;
}
.carousels {
width: 100%;
padding: 1em;
margin: 0 auto;
overflow: hidden;
max-width: 1400px;
margin-left: auto;
}
.slider {
display: grid;
grid-gap: 0.1rem;
width: 100% !important;
grid-auto-flow: column;
}
.carousel-left {
left: 10px;
}
.carousel-right {
right: 0px;
}
.nav-btn {
top: 25%;
width: 40px;
height: 45px;
z-index: 100;
cursor: pointer;
position: absolute;
border-radius: 8px;
background-color: white;
border: 1px solid #D5D9D9;
cursor: pointer;
text-align: center;
vertical-align: middle;
box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
}
.nav-btn:hover {
background-color: #F7FAFA;
}
.item {
width: 250px;
padding: 1em;
height: 300px;
margin: 0.5em;
display: inline-table;
border: 1px solid #ccc;
background-color: #fff;
}
.item.product .c-rating {
transform: scale(0.6);
}
.item.product .rating {
margin-bottom: .2rem;
}
.item.product .total-avg span {
margin-right: .4rem;
color: #be5a0e;
font-weight: 600;
}
.item.product .valuations {
margin-left: 5rem;
color: #73726c;
}
.item.product .valuations span {
font-size: .8em;
display: flex;
line-height: 1.5rem;
}
.thumbnails {
width: 70%;
margin: 0 auto;
}
.thumbnails img {
max-width: 100%;
max-height: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.topic-1 .price label {
text-decoration: line-through;
font-weight: 400;
margin-right: 6px;
color: #666;
font-size: 13px;
}
.topic-1 .price em {
font-style: normal;
font-size: 18px;
color: #17aa1c;
font-weight: 600;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="wrapp">
<div class="deals">
<div class="heading mini-title">
<h2>Nuevos productos</h2> <div class="rule"></div>
</div>
<div class="carousels relative">
<button class="carousel-left nav-btn"><i class="icon-arrow-left"><</i></button>
<button class="carousel-right nav-btn"><i class="icon-arrow-right">></i></button>
<div id="carousel" class="carousel">
<div class="slider">
<div class="item product category-info">
<div class="banner-info">
<a href="">
<h3>Shopping Guide for Trending Styles</h3>
<img src="https://img.alicdn.com/tfs/TB1ZXXNIgHqK1RjSZFkXXX.WFXa-300-320.jpg" style="width: 320px; height: 300px;">
<span>Source Now</span>
</a>
</div>
</div>
<div class="item product">
<a href="product/tu-producto-aqui-8">
<div class="thumbnails image">
<img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 8">
</div>
<div class="box topic-1">
<div class="heading ellipsis">
<h2>Tú producto aquí 8</h2>
</div>
<div class="price right">
<label></label>
<em class="item-price">$2,00</em>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="product/tu-producto-aqui-7">
<div class="thumbnails image">
<img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 7">
</div>
<div class="box topic-1">
<div class="heading ellipsis">
<h2>Tú producto aquí 7</h2>
</div>
<div class="price right">
<label></label>
<em class="item-price">$3,00</em>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="product/tu-producto-aqui-6">
<div class="thumbnails image">
<img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 6">
</div>
<div class="box topic-1">
<div class="heading ellipsis">
<h2>Tú producto aquí 6</h2>
</div>
<div class="price right">
<label></label>
<em class="item-price">$10,00</em>
</div>
</div>
</a>
</div>
<div class="item product">
<a href="product/tu-producto-aqui-5">
<div class="thumbnails image">
<img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 5">
</div>
<div class="box topic-1">
<div class="heading ellipsis">
<h2>Tú producto aquí 5</h2>
</div>
<div class="price right">
<label></label>
<em class="item-price">$45,00</em>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="wrapp">
<div class="deals">
<div class="carousels relative">
<button class="carousel-left nav-btn"><i class="icon-arrow-left"><</i></button>
<button class="carousel-right nav-btn"><i class="icon-arrow-right">></i></button>
<div id="carousel" class="carousel">
<div class="slider">
<div class="item ads-store">
<div class="adsowners">
<a href="">
<h4>¡Ofertas!</h4>
<h5>En la tienda Motorsykler</h5>
<img src="https://img.joomcdn.net/181508ee57b71b20f26b4a8a14a79f142b9165af_176_176.png">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>