Carousel multiple：如何使箭头瞄准一组特定的幻灯片？

【问题标题】：Carousel multiple: How to make arrows target a specific set of slides?Carousel multiple：如何使箭头瞄准一组特定的幻灯片？
【发布时间】：2021-09-26 04:34:29
【问题描述】：

我正在尝试创建一个投资组合网站，该网站在同一页面上包含多个图像滑块。我让 HTML、CSS 和 jQuery 为单个滑块工作，但当我添加另一个滑块时——具有相同的类——事情变得很时髦。

我的问题：如何使左右箭头仅针对它们所连接的幻灯片？

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

我尝试在不同的位置使用“this”和“each”选择器，但没有成功。我是新手，所以我可能用错了。

/*$(".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());
        })*/

另一个问题是滑块mousedown, 'mousemove', mouseup 按下左按钮时，容器会移动所有项目，它不能单独工作，因为我希望它像按钮一样工作。

这是我的完整代码：

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>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>

【问题讨论】：

  • 通过查看您的代码，它非常适合 1 个轮播实例，例如有唯一标识符 #carousel-right 等等，如果您想支持多个实例，请尝试使用类跨度>
  • 您的代码似乎被过度向后设计。重新开始，从课堂开始。事实上，这是行不通的。
  • @johnSmith jsfiddle.net/o62fvhLd 我发现这个下拉菜单适用于多个菜单，例如在 id 的末尾应用一个数字：id="dropdown1 dropdown2 你不能使用类似的东西吗?还是只使用类会起作用？
  • @Derple 你不能用类似的东西吗？还是只使用类会起作用？
  • @Fernando 您可以使用类，但是当您识别特定元素（例如单个轮播）时，更传统的做法是给它们一个 ID，以便可以单独选择它们。如果您仍然想使用类来执行此操作，最好的方法是给每个轮播一个不同的类名。但这会使您的代码更难阅读，因为给定的类名是指 许多 元素还是仅指 一个 元素并不是很明显。

标签： jquery


【解决方案1】：

您的左/右按钮只需要更新即可。另外，你的第二个轮播有一个不必要的id="carousel"，第一个项目缺少类名product，所以我添加了它们。

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()
        let $product = $(this).next('.carousel').find('.item.product')
        $product.last().insertBefore($product.first());
    })
    $('.carousel-left').click(function() {
        let $product = $(this).next().next('.carousel').find('.item.product');
        $product.first().insertAfter($product.last());
    })

    // vars for clients list carousel
    var $product_carousel = $('.carousel');
    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 = $(this).find('.slider .item:first');
            var $last  = $(this).find('.slider .item:last');
            if (dir == "up") {
                $last.prependTo($(this).find(".slider"));
            } else {
                $first.appendTo($(this).find(".slider"));
            }
        }
        $(this).find(".slider").css("transform", "translate(0, 0)")
    }).on("mousemove", function(e) {
        if (scroll_product) {
            $(this).find(".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>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 class="carousel">
                    <div class="slider">
                        <div class="item product 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>

【讨论】：

  • 按钮工作得很好，唯一的细节是这个轮播还允许我通过按住鼠标左键从左到右移动，当以这种方式移动产品时，所有产品的所有产品页面上的轮播移动。
  • @Fernando 我已经更新了我的答案，以便它按照你想要的方式工作。问题是$product_carousel 选择了.slider 元素，而不是.carousel 元素，并且滚动代码使用了$('.slider)，这导致所有轮播都受到影响。我把它改成了$(this).find(".slider")，它只找到被选中的轮播。
  • 当我以这种方式移动产品时，该动作保持锁定状态，它保持活动状态并且产品在没有按下鼠标左键的情况下移动，该动作只有在我拖动或移动时才有效产品，但按住鼠标左键。请给我任何建议来避免这个问题？我保证不再打扰：/
  • 释放鼠标按钮时，scroll_product 似乎没有设置为 false。我不知道为什么会这样。
  • 谢谢，我也看不懂，但我还是喜欢我看到的，谢谢你的帮助。问候。
猜你喜欢
  • 1970-01-01
  • 2015-03-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-25
  • 1970-01-01
  • 1970-01-01
  • 2022-11-29
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode