Magento 2 thumnailスライダーが動作しないブートストラップ

Question

これは私が取り組んでいるsiteです。 左側がメインスライダー、右側がより多くのスライダーのサムネイルオプションです。これらのサムネイルを、フクロウのようなスライダーにするには、1020px以下にしてください。下のコードはmagento 2の投稿用です。ブートストラップサムネイルスライダを試してみました。ここにはlinkがあります。いつかMagentoのために働いていない

<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の機能を、あなたはjavascriptのコード