#StackBounty: #jquery Carousel multiple: How to make arrows target a specific set of slides?

Bounty: 100

I am trying to create a portfolio site that contains multiple image sliders on the same page. I had the HTML, CSS & jQuery working for a single slider, but as soon as I added another–with the same classes–things got funky.

My question: how can I make the left & right arrows only target the slides that they are connected to?

$('.carousel-right').click(function() {
    $('.item.product').last().insertBefore($('.item.product').first());
})
$('.carousel-left').click(function() {
    $('.item.product').first().insertAfter($('.item.product').last());
})

I’ve tried using the "this" and "each" selectors in different spots, but no luck. I am new at this, so I could have been using them wrong.

/*$(".carousels .carousel-right").each(function(){
    $('.carousel-right').click(function() {
        $(this).find('.item.product').last().insertBefore($('.item.product').first());
    });
});*/

    /*$(this).on("click", '.carousel-right', function(){
        $(this).find('.item.product').last().insertBefore($('.item.product').first());
        //$(this).find('.item.product').last().insertBefore(.find('.item.product').first());
        //$(this).find('.item.product').last().insertBefore($('.item.product').first());
    });*/
/*$('.carousel-right').click(function() {
            $(this).find('.item.product').last().insertBefore($('.item.product').first());
        })*/

Another problem is that the slider mousedown, ‘mousemove’, mouseup when pressing the left button the container moves all the items and it does not work individually as I want it to work like the buttons.

This is my complete code:

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;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
    <div id="wrapp">
        <div class="deals">
            <div class="heading mini-title">
                <h2>New Product</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 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>Product 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>Product 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>Product 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>Product 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="wrapp2">
        <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>¡Oferts!</h4>
                                    <h5>In the store MSShop</h5>
                                    <img src="https://img.joomcdn.net/181508ee57b71b20f26b4a8a14a79f142b9165af_176_176.png">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <div id="wrapp3">
        <div class="deals">
            <div class="heading mini-title">
                <h2>New Product</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 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>Product 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>Product 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>Product 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>Product 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>


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.