Карусель элемент CSS выравнивание - PullRequest
Новая
       0

Карусель элемент CSS выравнивание

0 голосов
/ 28 апреля 2020

У меня есть этот образец карусели, который прекрасно работает

enter image description here

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);
}
.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;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
        <div class="item">
            <div class="pad15">
                <p class="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
            </div>
        </div>
    </div>
    <button class="btn btn-primary leftLst"><</button>
    <button class="btn btn-primary rightLst">></button>
</div>

Но когда я заменяю жестко запрограммированный элемент на элемент Dynami c, используя Javascript / JQuery

  1. Элементы не являются встроенными
  2. Когда я изменяю его размер до меньшего размера экрана, элементы выравниваются назад
  3. Когда я изменяю его размер до размера рабочего стола элементы стали встроенными , но не выровненными

enter image description here

Это обработанный код html с использованием Javascript 

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);
}
.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;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel" data-interval="1000">
    <div class="MultiCarousel-inner">
        <div class="item" data-id="85" style="width: 220px;"><div class="lead">Avengers: Endgame (2019)</div></div><div class="item" data-id="86" style="width: 220px;"><div class="lead">Justice League (2017)</div></div><div class="item" data-id="87" style="width: 220px;"><div class="lead">Captain Marvel</div></div>
    </div>
    <button class="btn btn-primary leftLst"><</button>
    <button class="btn btn-primary rightLst">></button>
</div>

Динамически генерируемые html элементы внутри MultiCarousel-inner класса 

<div class="item" data-id="85" style="width: 220px;"><div class="lead">Avengers: Endgame (2019)</div></div><div class="item" data-id="86" style="width: 220px;"><div class="lead">Justice League (2017)</div></div><div class="item" data-id="87" style="width: 220px;"><div class="lead">Captain Marvel</div></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...