Woocommerceslider не будет загружен после открытия второго сайта - PullRequest
Новая
       5

Woocommerceslider не будет загружен после открытия второго сайта

0 голосов
/ 29 мая 2019

Я пытаюсь интегрировать "woocommerce" для слайдера.

Мой index.html ist: 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Website</title>
    <base href="/">

    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Bootstrap core CSS -->
    <link href="assets/startbootstrap/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="assets/startbootstrap/vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="assets/startbootstrap/vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- Custom styles for this template -->
    <link href="assets/startbootstrap/css/landing-page.min.css" rel="stylesheet">


    <!-- Syntax Highlighter -->
    <link href="assets/woocommerce/css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="assets/woocommerce/css/shThemeDefault.css" rel="stylesheet" type="text/css" />
    <!-- Demo CSS -->
    <link rel="stylesheet" href="assets/woocommerce/css/demo.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/woocommerce/flexslider.css" type="text/css" media="screen" />

    <!-- Modernizr -->
    <script src="assets/woocommerce/js/modernizr.js"></script>

    <style type="text/css">
        .flex-caption {
            width: 96%;
            padding: 2%;
            left: 0;
            bottom: 0;
            background: rgba(0,0,0,.5);
            color: #fff;
            text-shadow: 0 -1px 0 rgba(0,0,0,.3);
            font-size: 14px;
            line-height: 18px;
        }
        li.css a {
            border-radius: 0;
        }
    </style>

</head>

<body>

    <app-root></app-root>


    <!-- Bootstrap core JavaScript -->
    <script src="assets/startbootstrap/vendor/jquery/jquery.min.js"></script>
    <script src="assets/startbootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>




    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="assets/woocommerce/js/libs/jquery-1.7.min.js">\x3C/script>')</script>

    <!-- FlexSlider -->
    <script defer src="assets/woocommerce/jquery.flexslider.js"></script>

    <script type="text/javascript">
        $(function(){
            SyntaxHighlighter.all();
        });
        $(window).load(function(){
            $('.flexslider').flexslider({
                animation: "slide",
                start: function(slider){
                    $('body').removeClass('loading');
                }
            });
        });
    </script>

    <!-- Syntax Highlighter -->
    <script type="text/javascript" src="assets/woocommerce/js/shCore.js"></script>
    <script type="text/javascript" src="assets/woocommerce/js/shBrushXml.js"></script>
    <script type="text/javascript" src="assets/woocommerce/js/shBrushJScript.js"></script>

    <!-- Optional FlexSlider Additions -->
    <script src="assets/woocommerce/js/jquery.easing.js"></script>
    <script src="assets/woocommerce/js/jquery.mousewheel.js"></script>
    <script defer src="assets/woocommerce/js/demo.js"></script>



</body>

</html>

Это первый сайт, где я получаю некоторые результаты и использую для каждой карты слайдер для картинок: 

<section>
    <h1>Result</h1>
</section>
<section>
    <script type="text/javascript">
        $(function(){
            SyntaxHighlighter.all();
        });
        $(window).load(function(){
            $('#carousel').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                itemWidth: 210,
                itemMargin: 5,
                asNavFor: '#slider'
            });

            $('#slider').flexslider({
                animation: "slide",
                controlNav: false,
                animationLoop: false,
                slideshow: false,
                sync: "#carousel",
                start: function(slider){
                    $('body').removeClass('loading');
                }
            });
        });
    </script>
    <div class="card-deck">
        <div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let item of resultlist">
            <div class="card mb-4">

                <div class="flexslider">
                    <ul class="slides">
                        <li *ngFor="let image of item.media ">
                            <img src="{{ image.url }}/{{ image.filename }}" />
                        </li>
                    </ul>
                </div>
                <!--<img *ngFor="let image of item.media" class="card-img-top" src="{{ image.url }}/{{ image.filename }}" alt="Card image cap"> -->
                <div class="card-body">
                    <h5 class="card-title">{{ item.title }} {{ item.id }}</h5>
                    <p class="card-text">{{ item.shortdescription }}</p>
                    <a routerLink="/sedcard/{{ item.id }}" class="btn btn-primary">Mehr anzeigen</a>
                </div>
                <div class="card-footer">
                    <small class="text-muted">Last updated 3 mins ago</small>
                </div>
            </div>

        </div>
    </div>
</section>

И на второй странице я открываю слайдер так: 

<app-navigation></app-navigation>


    <section class="slider">
        <div id="slider" class="flexslider">
            <ul class="slides">
                <li *ngFor="let image of sedcard.media ">
                    <img src="{{ image.url }}/{{ image.filename }}" />
                </li>
            </ul>
        </div>

        <script type="text/javascript">
            $(function(){
                SyntaxHighlighter.all();
            });
            $(window).load(function(){
                $('#carousel').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    itemWidth: 210,
                    itemMargin: 5,
                    asNavFor: '#slider'
                });

                $('#slider').flexslider({
                    animation: "slide",
                    controlNav: false,
                    animationLoop: false,
                    slideshow: false,
                    sync: "#carousel",
                    start: function(slider){
                        $('body').removeClass('loading');
                    }
                });
            });
        </script>
    </section>

так что теперь у меня проблема, когда я открываю sedcard щелчком по ссылке на результат, тогда будет показана sedcard, все данные, а также изображения будут загружены, но слайдер не будет просматриваться.

Когда я перезагружаю URL-адрес с помощью Sedcard, этот одиночный слайдер будет просматриваться со всеми изображениями в нем. Но когда я нажимаю на Home-Link на sedcard, список результатов будет показан со всеми данными, но не с ползунками.

То же самое, когда я перезагружаюсь, а затем список результатов, тогда все ползунки будут загружены туда.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...