带引导程序的 Magento 2 缩略图滑块不起作用

Question

这是我正在处理的site。 左侧是主滑块，右侧是更多滑块的缩略图选项。我希望这些缩略图像1020px 下方的猫头鹰轮播一样位于滑块中。下面的代码适用于 magento 2 中的帖子。尝试使用引导缩略图滑块，这里是 link。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<a class="back_blog fa fa-chevron-left" onclick="history.go(-1); return false;"></a> <!--utkarsh 08-06-2017 back button-->
<?php
    $_post = $this->getPost();
    $_slider = $this->getSlider();
    $_postUrl = $_post->getPostUrl();
    $_postNameStripped = $block->stripTags($_post->getTitle(), null, true);

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $storemanager = $objectManager->get('Magento\Store\Model\StoreManagerInterface') ;
    // $baseurl = $storemanager->getStore()->getBaseUrl() ;
    $mediaurl   =   $storemanager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
?>



<div class="post-view">
    <div class="post-holder post-holder-<?php echo $_post->getId() ?>">
        <div class="post-header clearfix">
            <?php echo $this->getInfoHtml() ?>
        </div>

        <?php $count = 0; ?>
        <?php if ($_slider->getSize()): ?>
        <?php $count = 1; ?>
        <div class="row">
            <div class="col-md-18 col-lg-18 col-sm-24 col-xs-24">
                <div class="tab-content">
                <?php foreach ($_slider as $key => $slider): ?>
                <div role="tabpanel" class="tab-pane <?= $count==1?"active":"" ?>" id="tab<?=$key?>">
                    <div id="myCarousel<?=$key?>" class="carousel slide" data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                    <?php foreach (json_decode($slider->getSliderParams()) as $k => $image): ?>
                      <li data-target="#myCarousel<?=$key?>" data-slide-to="<?=($k-1)?>" class="<?= ($k-1)!=0?"":"active" ?>"></li>
                    <?php endforeach ?>
                    </ol>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                      <?php foreach (json_decode($slider->getSliderParams()) as $k => $image): ?>
                      <div class="item <?= $k!=1?"":"active" ?>">
                        <img src="<?php echo  $mediaurl."/".$image->image ?>" alt="Los Angeles" style="width:100%;" height="300">
                        <div class="carousel-caption">
                          <!-- <h3>Title</h3> -->
                          <p><?php echo $image->description1; ?></p>
                        </div>
                      </div>
                      <?php endforeach ?>
                      <?php $count++; ?>
                    </div>

                    <!-- Share button -->

                    <div id="share_me" style="top:13px;z-index:2;" class="share_me"><span class="icon-facebook fa fa-share-alt"></span>
                        <p id="sharers">
                            <a class="em-social-icon em-facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $_postUrl ?>&t=Homelot Fine Products" target="_blank"><button><span class="icon-facebook fa fa-facebook"></span></button></a>
                            <a class="em-social-icon em-facebook" href="https://pinterest.com/pin/create/button/?url=<?php echo $_postUrl ?>" target="_blank"><button><span class="icon-pinterest fa fa-pinterest-square"></span></button></a>
                        </p>
                    </div>

                    <!-- Left and right controls -->
                    <a class="left carousel-control" href="#myCarousel<?=$key?>" data-slide="prev">
                      <span class="sr-only"></span>
                    </a>
                    <a class="right carousel-control" href="#myCarousel<?=$key?>" data-slide="next">
                      <span class="sr-only"></span>
                    </a>
                    </div>
                </div>
                <?php endforeach ?>
                </div>
            </div>
            <?php $count = 1; ?>
                    <ul class="nav nav-tabs col-md-6 col-lg-6 col-sm-24 col-xs-24" role="tablist" id="tabsmenu" >
                    <?php foreach ($_slider as $key => $slider): ?>
                        <?php foreach (json_decode($slider->getSliderParams()) as $k => $image): ?>
                        <li role="presentation" class="<?= $count==1?"active":""?>">
                            <a href="#tab<?=$key?>" aria-controls="tab<?=$key?>" role="tab" data-toggle="tab"><img src="<?php echo  $mediaurl."/".$image->image ?>" width="100%" height="120px"/></a>
                        </li>
                        <?php break; ?>
                        <?php endforeach ?>
                    <?php $count++; ?>
                    <?php endforeach ?>
                    </ul>
        </div>
        <?php endif ?>

        <div style="clear: both;"></div>
        <div class="post-content">
            <div class="post-description">
                <?php echo $block->getContent() ?>
                <div class="clear"></div>
            </div>
        </div>
        <div class="post-bottom">
            <?php echo $this->getChildHtml('blog.post.bottom') ?>
        </div>
    </div>
</div>

<script>   
require(['jquery'], function($){ 

    function displayAllTabsMenu() {
            $("#tabsmenu li a").css('display','block'); 
    }
    $("#tabsmenu li a").click(function(){
        setTimeout(function() {
                displayAllTabsMenu(); 
        }, 0);
        // $("html, body").animate({ scrollTop: 0 }, "slow");
    });
});
</script>

Answer 1

jQuery 函数有时不适用于 magento，你试试 javascript 代码