0

前回投稿したのですが、良い回答がいただけなかったので、再編集しました。
スニペットは拡大して確認していただけると幸いです。
まだ、スニペットでまだ表現できていない部分があるので合わせてわかる方ご教授お願いします。
1.スニペットでは<{section name=i loop=5}>が効いていません。本番環境ではループで画像を取得する処理が入っています。スニペットでsectionのループを動かすにはどうすれば良いでしょうか?

2.本番環境ではループは適切に動いておりますが、スニペットのようにスライド画像が少し下がっております。

ループ処理の部分をコメントアウトし、ループ処理(<{section name=i loop=5}>)上のコメントアウト部分を消すと正常に動きます。。。
ただ、本番環境では画像の枚数が商品によって変わるので、ループ処理をしないといけません。
loopで適切に画像は取れているのですが、表示の時にjqueryでスタイルが変更され画像の下部が切れてしまう現象が起きてます。
何か良い解決方法をご存知の方、ご教授よろしくお願いします。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>demo</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://gigaplus.makeshop.jp/kukunochi/demo/styledemo.css">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="canonical" href="http://kukunochi-online.com/html/page1.html">
<link rel="stylesheet" type="text/css" href="https://gigaplus.makeshop.jp/kukunochi/css/slider-pro6.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src='https://julian.com/research/velocity/build/jquery.velocity.min.js'></script>
<script type="text/javascript" src='https://julian.com/research/velocity/build/velocity.ui.js'></script>
<script type="text/javascript" src="https://gigaplus.makeshop.jp/kukunochi/js/jquery.sliderPro.js"></script>
<script type="text/javascript">
$( document ).ready(function( $ ) {
$( '#slider-pro-item' ).sliderPro({
    buttons: true, //スライダーのページャを表示する
    startSlide: 0, //最初のスライドを指定する
    arrows: true, //左右の矢印ボタンを表示する
    width: 640, //横幅を設定す
    height: 480, //高さを設定する
    autoplay: false, //自動再生の設定
    loop: true, //スライドをループさせる設定
    visibleSize: '100%', //前後のスライドを表示するかの設定
    forceSize: 'none'//スライダーの幅をブラウザ幅に設定する
});
});
</script>

</head>
<body>
<header class="header"> 
 <div class="cp_cont_leftnav">
    <div class="cp_offcm04">
        <input type="checkbox" id="cp_toggle04">
        <label for="cp_toggle04" class="cp_toggle04"><img class="menu_icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/pcMenu.jpg"></label>
        <div class="cp_menu_leftnav">
            <div class="drawer-menu-top">
                <div class="menu-search-wrap">
                    <label> 
                        <input type="text" data-id="" value="" placeholder="アイテムを検索" class="search-keyword">
                    </label>
                    <a href="" class="menu-search-btn search-url"><i class="material-icons">search</i></a>
                </div>
            </div>
            <ul class="menu">
               <li class="menu__item">
                    <div class='sidebar'> <a  href="http://kukunochi-online.com/view/category/all_items">ALL ITEM</a> </div>
                </li>
            <li class="menu__item">
              <a class="menu__item__link js-menu__item__link" href="">CATEGORY</a>
            </li>
            </ul>
            <ul class="menu-sub-wrap">
            </ul>
            <ul class="menu-sns">
            </ul>
        </div>
    </div>
</div>
      <a href="/">  <img class="header2__logo"></a>
          <div class="header2__navgroup2">
              <div class="header2__navitem2"><a >Home </a> </div>
              <div class="header2__navitem2"><a >News</a> </div>
              <div class="header2__navitem2">
                 <div class="overlay-navigation">
                           <nav role="navigation">
                               <ul>
                                <li>
                                 <div class="open-overlay">
                                     <div class="closex">x </div>
                                   </div>                                      
                                  <a href="" data-content="kukunochi original">ORIGINAL</a></li>
                                   <li><a href="" data-content="kukunochi and potter product">POTTER</a></li>
                                   <li><a href="" data-content="select pot">POT</a></li>
                                   <li><a href="" data-content="History">HISTORY</a></li>
                                   <li><a href="" data-content="What's new ?">NEWS</a></li>
                               </ul>
                           </nav>
                       </div>                       
                        <div class="open-overlay">
                           <span >Products</span> 
                        </div>
              </div>
              <div class="header2__navitem2"><a href= '' >AboutUs</a> </div>
              <div class="header2__navitem2"><a href= '' >FAQ</a></div>
              <div class="header2__navitem2"><a href= '' >UserGuide</a> </div>
          </div>

  <div class="header2__navgroup">
                <div class="menu-search-wrap-hd">
                    <label> 
                        <input type="text" data-id="<{$search_form.keyword_id}>" value="<{$search.keyword}>" placeholder="アイテムを検索" class="search-keyword">
                    </label>
                    <a href="<{$search_form.search_url}>" class="menu-search-btn-hd search-url"> <img src="https://gigaplus.makeshop.jp/kukunochi/img/header/search.jpg" class="sample3Img"></a>
                </div>
      <div class="header2__navitem"><a href="<{$url.logout}>">ログアウト</a><<a href='<{$url.member_entry}>'> 会員登録 </a> </div>
      </div>
    </div>
<div class="cp_cont_cart">
    <div class="cp_offcm01">
        <input type="checkbox" id="cp_toggle01" name="cp_toggle01">
        <label for="cp_toggle01" class="cp_toggle01"><img class="cart_icon" src="https://gigaplus.makeshop.jp/kukunochi/img/header/pcCart.jpg"><p class="cart-badge"></p></label>
        <div class="cp_menu_cart">
            <object data="<{$url.cart}>?embed" height="100%" style="overflow-x:hidden;" class="cart-object">
            現在表示できません
            </object>
        </div>
    </div>
</div>
<a href="<{$cart.order_url}>" id="checkout-url" style="display:none;"></a>
 </header>





<div class="wrap">
<div class="page-wrap">
    <div class="content-wrap breadcrumbs-wrap">
            <a href="<{$url.top}>">Top</a>
                <span>|<a href=""><'item'></a></span>
    </div>
    
    <section class="content-wrap">
        <p class="item-name">item name</p>
    </section>
    <section class="content-wrap item-wrap">
       <div class="item-image-main">
            <ul class="item-image-wrap">  
                <div id="slider-pro-item" class="slider-pro">
        <div class="sp-slides">
        <!--
            <div class="sp-slide">
              <img class="" src="https://gigaplus.makeshop.jp/kukunochi/img/sample.jpg" />
            </div>
            <div class="sp-slide">
              <img class="" src="https://gigaplus.makeshop.jp/kukunochi/img/sample.jpg" />
            </div>
            <div class="sp-slide">
              <img class="" src="https://gigaplus.makeshop.jp/kukunochi/img/sample.jpg" />
            </div>
        -->    

           <{section name=i loop=5}> 
                <div class="sp-slide">
                    <img class="" src='https://gigaplus.makeshop.jp/kukunochi/img/sample.jpg' alt="test">
                </div>
          <{/section}> 
        </div>


                </div>
           </ul>
        </div> 
        <div class="item-details-wrap">
            <div class="details-text-area">
                <p class="details-text">
                    item description
                </p>
            </div>
            <div class="details-options">
                <div class="makeshop-option-wrap">
                    <p class="item-price">price</p>
                    <p class="makeshop-option-label">数量</p>
                    <input type="number" data-id="<{$item.quantity_id}>" value="1" min="1" class="makeshop-option-input">
                </div>
            </div>
            <div class="item-detail-addcart">
                    <div class="item-detail-soldout"><span class="btn btn-cart">Sold Out</span></div>
            </div>
            <div class="details-text-area">
                <p class="details-text">
                </p>
            </div>
        </div>
    </section>
    <section class="content-wrap">
        <h2 class="content-title"><p class="white"> Recently viewed items</p></h2>
        <ul class="item-list-wrap">
            <li class="item-list-item">
                <a href="<{$recently_item.list[i].url}>">
                    <img src="https://gigaplus.makeshop.jp/kukunochi/img/sample.jpg" alt="">
                    <span class="item-title"><demo></span>
                    <span class="list-item-price">price</span>
                </a>
            </li>
        </ul>
    </section>
</div>
</div>
</body>
</html>

0

1 件の回答 1

1

自己解決しました。

$( document ).ready(function( $ ) {
$( '#slider-pro-item' ).sliderPro({
    width: 640, //横幅を設定す
    height: 480, //高さを設定
}

の部分を

$( document ).ready(function( $ ) {
$( '#slider-pro-item' ).sliderPro({
    width:  '100%', //横幅を設定す
    height: 480, //高さを設定
}

とすることでうまく表示できました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。