Почему те же коды не работают на другой странице? - PullRequest
0 голосов
/ 28 апреля 2020

У меня проблема с кодированием. Мои коды карусели на http://www.nineyearstheatre.com/home.php не работают в версии "en" (http://www.nineyearstheatre.com/en/home.php). Я попытался устранить неполадки, вставив его построчно или без ссылок на изображения, создал новую тестовую страницу как в папке root, так и в папке en. Новая тестовая страница работает, если она находится в папке root, но не работает в папке en.

Что я вижу на странице внутри папки root

Что происходит в папке en на той же странице. Изображения в слайдере карусели стали растянутыми.

Я использую Safari. В Google Chrome отображение карусели не отображалось на странице "en", но оно работает на странице "root". На Mozilla Firefox работает папка en и root.

Кто-нибудь может мне помочь?

-Edited- Вот код

CSS:

.carousel-item > div {
float: left;
}
.carousel-by-item [class*="cloneditem-"] {
display: none;
}

Кузов

<section class="logo">  <h3>Our Partners</h3></section>

<style type="text/css" id="slider-css"></style>
<div class="spe-cor">
<div class="container">
    <div class="row">
        <div id="slider-1" class="carousel carousel-by-item slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/logo down white2(official).jpg" alt="First slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/80th CS Logo.jpg" alt="First slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Raffles_Studio_logo-2011.png" alt="First slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/BooksActually.png" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Woods in the Books.jpg" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/CBR LOGO (2016 ).jpg" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Hook-on-Books Logo.png" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Tolido's Logo.png" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/GoingOm.jpg" alt="Second slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/nac_eng_logo.tiff" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Arts Fund logo_colour.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/CMF_logo_rgb.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/PMC_logo_2000.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/HLF_logo.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Kwan Im Thong.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Binjaitree.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/MC logo.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/PA_PAssion_Cardface_Blank(F)edit.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/NTUC-01.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/kino.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/Whitewood-Logo-2X.png" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/SSLC.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/SCCC logo revamp_FA-FullColor.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/MAC_logo-big_black_2.jpg" alt="Third slide">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="col-lg-2 col-md-3 col-sm-4 col-4">
                        <img class="d-block img-fluid" src="images/Logos/HR Logo.jpg" alt="Third slide">
                    </div>
                </div>

            </div>
            <a class="carousel-control-prev" href="#slider-1" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#slider-1" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
 </div>
</div>

JS

function GetUnique(item) {
var outputArray = [];
var classes = temp_c = [];
var cols = ['col-md-1', 'col-md-2', 'col-md-3', 'col-md-4', 'col-md-6', 'col-md-12',
    'col-sm-1', 'col-sm-2', 'col-sm-3', 'col-sm-4', 'col-sm-6', 'col-sm-12',
    'col-lg-1', 'col-lg-2', 'col-lg-3', 'col-lg-4', 'col-lg-6', 'col-lg-12',
    'col-xs-1', 'col-xs-2', 'col-xs-3', 'col-xs-4', 'col-xs-6', 'col-xs-12',
    'col-xl-1', 'col-xl-2', 'col-xl-3', 'col-xl-4', 'col-xl-6', 'col-xl-12'];
$(item).each(function() {
    var temp = $(item + ' > div').attr('class').split(/\s+/);
    for (var i = 0; i < temp.length; i++) {
        classes.push(temp[i]);
    }
});
for (var i = 0; i < classes.length; i++) {
    temp_c = classes[i].split('-');
    if (temp_c.length == 2) {
        temp_c.push('');
        temp_c[2] = temp_c[1];
        temp_c[1] = 'xs';
        classes[i] = temp_c.join("-");
    }
    if ($.inArray(classes[i], outputArray) == -1) {
        if ($.inArray(classes[i], cols)) {
            outputArray.push(classes[i]);
        }
    }
}
return outputArray;
}

function setcss(cls, item, item_inner) {
var a = [];
var b = ['', '', '', '', '', ''];
var c = d = f = g = 0;
var e = ['xl', 'lg', 'md', 'sm', 'xs'];
var h = [1200, 992, 768, 567, 0];
var i = '';
var l = [];
for (var i = 0; i < cls.length; i++) {
    var temp = cls[i].split('-');
    if (temp.length == 3) {
      switch (temp[1]) {
        case 'xl':
            d = 0; break;
        case 'lg':
            d = 1; break;
        case 'md':
            d = 2; break;
        case 'sm':
            d = 3; break;
        case 'xs':
            d = 4; 
      }
      b[d] = temp[2]; 
    }
}
for (var j = 0; j < b.length; j++) {
    if (b[j] != '') {
        if (c == 0) {
            c = (12 / b[j]);
        }
        f = 12 / b[j];
        g = 100 / f;
        i = item_inner + " > .carousel-item.active.carousel-item-right," + item_inner + " > .carousel-item.carousel-item-next {-webkit-transform: translate3d(" + g + "%, 0, 0);transform: translate3d(" + g + ", 0, 0);left: 0;}" + item_inner + " > .carousel-item.active.carousel-item-left," + item_inner + " > .carousel-item.carousel-item-prev {-webkit-transform: translate3d(-" + g + "%, 0, 0);transform: translate3d(-" + g + "%, 0, 0);left: 0;}" + item_inner + " > .carousel-item.carousel-item-left, " + item_inner + " > .carousel-item.carousel-item-prev.carousel-item-right, " + item_inner + " > .carousel-item.active {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);left: 0;}";
        if (f > 1) {
            for (k = 0; k < (f - 1); k++) {
                l.push(item + " .cloneditem-" + k);
            }
            if (l.length) {
                i = i + l.join(',') + "{display: block;}";
            }
            l = [];
        }
        if (h[j] != 0) {
            i = "@media all and (min-width: " + h[j] + "px) and (transform-3d), all and (min-width:" + h[j] + "px) and (-webkit-transform-3d) {" + i + "}";
        }
        $('#slider-css').prepend(i);
    }
   }
$(item).each(function() {
    var itemToClone = $(this);
    for (var i = 0; i < (c - 1); i++) {
        itemToClone = itemToClone.next();
        if (!itemToClone.length) {
            itemToClone = $(this).siblings(':first');
        }
        itemToClone.children(':first-child').clone()
            .addClass("cloneditem-" + (i))
            .appendTo($(this));
    }
});
}


//Use Different Slider IDs for multiple slider
$(document).ready(function() {
var item = '#slider-1 .carousel-item';
var item_inner = "#slider-1 .carousel-inner";
classes = GetUnique(item);
setcss(classes, item, item_inner);


var item_1 = '#slider-2 .carousel-item';
var item_inner_1 = "#slider-2 .carousel-inner";
classes = GetUnique(item_1);
setcss(classes, item_1, item_inner_1);
});</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...