css - 如何防止多轮播中的图片相互重叠？

Question

我已经实现了一个 bootstrap4 多轮播。但是图像相互重叠，例如所有六个元素一次一次占据屏幕边缘到边缘。

我已经包含了 HTML、CSS 和 JS 文件。

<div class="row">
       <div class="MultiCarousel" data-items="1,3,5,6" data-slide="1"            id="MultiCarousel"  data-interval="1000">
        <div class="MultiCarousel-inner">
            <div class="item">
                <div class="pad15 pad">
                    <img src="files/products_02.jpg" alt="ball">
                    <p class="lead">Loreum Ipsum Loreum</p>
                    <p>₹ 6000</p>
                </div>
            </div>
            <div class="item">
                <div class="pad15">
                        <img src="files/products_03.gif" alt="ball">
                        <p class="lead">Loreum Ipsum Loreum</p>
                        <p>₹ 6000</p>
                    </div>
            </div>
            <div class="item">
                <div class="pad15">
                        <img src="files/products_04.gif" alt="ball">
                        <p class="lead">Loreum Ipsum Loreum</p>
                        <p>₹ 6000</p>
                    </div>
            </div>
            <div class="item">
                <div class="pad15">
                        <img src="files/products_05.gif" alt="ball">
                        <p class="lead">Loreum Ipsum Loreum</p>
                        <p>₹ 6000</p>
                    </div>
            </div>
            <div class="item">
                <div class="pad15">
                        <img src="bat4.jpeg" alt="ball">
                        <p class="lead">Loreum Ipsum Loreum</p>
                        <p>₹ 6000</p>
                    </div>
            </div>
            <div class="item">
                <div class="pad15">
                        <img src="ball1.jpeg" alt="ball">
                        <p class="lead">Loreum Ipsum Loreum</p>
                        <p>₹ 6000</p>
                    </div>
            </div>
        </div>
        <button class="btn btn-primary leftLst"><</button>
        <button class="btn btn-primary rightLst">></button>
    </div>
</div>

CSS:

        .MultiCarousel { float: left; overflow: hidden; padding: 15px;   width: 100%; position:relative; }
        .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:10px; margin:10px; background:#f1f1f1; color:#666;}
        .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
        .MultiCarousel .leftLst { left:0; }
        .MultiCarousel .rightLst { right:0; }

        .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#ccc; }

JS:

  $(document).ready(function () {
        var itemsMainDiv = ('.MultiCarousel');
        var itemsDiv = ('.MultiCarousel-inner');
        var itemWidth = "";

        $('.leftLst, .rightLst').click(function () {
            var condition = $(this).hasClass("leftLst");
            if (condition)
                click(0, this);
            else
                click(1, this)
        });

        ResCarouselSize();

        $(window).resize(function () {
            ResCarouselSize();
        });

        //this function define the size of the items
        function ResCarouselSize() {
            var incno = 0;
            var dataItems = ("data-items");
            var itemClass = ('.item');
            var id = 0;
            var btnParentSb = '';
            var itemsSplit = '';
            var sampwidth = $(itemsMainDiv).width();
            var bodyWidth = $('body').width();
            $(itemsDiv).each(function () {
                id = id + 1;
                var itemNumbers = $(this).find(itemClass).length;
                btnParentSb = $(this).parent().attr(dataItems);
                itemsSplit = btnParentSb.split(',');
                $(this).parent().attr("id", "MultiCarousel" + id);


                if (bodyWidth >= 1200) {
                    incno = itemsSplit[3];
                    itemWidth = sampwidth / incno;
                }
                else if (bodyWidth >= 992) {
                    incno = itemsSplit[2];
                    itemWidth = sampwidth / incno;
                }
                else if (bodyWidth >= 768) {
                    incno = itemsSplit[1];
                    itemWidth = sampwidth / incno;
                }
                else {
                    incno = itemsSplit[0];
                    itemWidth = sampwidth / incno;
                }
                $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
                $(this).find(itemClass).each(function () {
                    $(this).outerWidth(itemWidth);
                });

                $(".leftLst").addClass("over");
                $(".rightLst").removeClass("over");

            });
        }


        //this function used to move the items
        function ResCarousel(e, el, s) {
            var leftBtn = ('.leftLst');
            var rightBtn = ('.rightLst');
            var translateXval = '';
            var divStyle = $(el + ' ' + itemsDiv).css('transform');
            var values = divStyle.match(/-?[\d\.]+/g);
            var xds = Math.abs(values[4]);
            if (e == 0) {
                translateXval = parseInt(xds) - parseInt(itemWidth * s);
                $(el + ' ' + rightBtn).removeClass("over");

                if (translateXval <= itemWidth / 2) {
                    translateXval = 0;
                    $(el + ' ' + leftBtn).addClass("over");
                }
            }
            else if (e == 1) {
                var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
                translateXval = parseInt(xds) + parseInt(itemWidth * s);
                $(el + ' ' + leftBtn).removeClass("over");

                if (translateXval >= itemsCondition - itemWidth / 2) {
                    translateXval = itemsCondition;
                    $(el + ' ' + rightBtn).addClass("over");
                }
            }
            $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
        }

        //It is used to get some elements from btn
        function click(ell, ee) {
            var Parent = "#" + $(ee).parent().attr("id");
            var slide = $(Parent).attr("data-slide");
            ResCarousel(ell, Parent, slide);
        }

    });

我希望输出能够使所有图像占据其原始尺寸或至少具有响应性。此外，我希望一次只显示四张图像，而其余图像仅在按下左右箭头按钮时显示。现在所有六张图片同时显示。

Answer 1

在您的代码中应用以下 css。希望这有用。

.MultiCarousel .MultiCarousel-inner .item > div{overflow:hidden}
img { max-width:100%; }