app/template/lag/Block/update_itemSlider.twig line 1

Open in your IDE?
  1. {#
  3. #}
  5. {% set Products = StockUpdatedProduct() %}
  7.     <script>
  8.       $(function() {
  9.         // テキストスライダーの初期化時のイベント
  10.         $('.ec-updateItemRole__slider').on('init', function () {
  11.           // 最初のスライドに 'fade-in' クラスを適用
  12.           $('.slick-slide[data-slick-index="0"]').addClass('fade-in');
  13.         });
  15.         // テキストスライダーの設定（メインスライダーと同期）
  16.         $('.ec-updateItemRole__slider').slick({
  17.           autoplay: true,          // 自動再生
  18.           infinite: true,          // 無限ループ
  19.           slidesToShow: 1,         // 1つのスライドを表示
  20.           slidesToScroll: 1,       // スライドを1つずつスクロール
  21.           speed: 600,
  22.           autoplaySpeed: 5000,
  23.           arrows: true,
  24.           pauseOnFocus: false,
  25.           pauseOnHover: false,
  26.           pauseOnDotsHover: false,
  27.         })
  28.         .on({
  29.           beforeChange: function(event, slick, currentSlide, nextSlide) {
  30.             // 次のスライドに 'fade-in' クラスを追加
  31.             $(".ec-updateItemRole__list .slick-slide[data-slick-index='" + nextSlide + "']").addClass("fade-in");
  32.           },
  33.           afterChange: function(event, slick, currentSlide) {
  34.             // 現在のスライド以外のすべてのスライドから 'fade-in' クラスを削除
  35.             $(".ec-updateItemRole__list .slick-slide").not("[data-slick-index='" + currentSlide + "']").not(".slick-cloned").removeClass("fade-in");
  37.             // 現在のスライドにクラスを確実に追加
  38.            $(".ec-updateItemRole__list .slick-slide[data-slick-index='" + currentSlide + "']").addClass("fade-in");
  39.           }
  40.         });
  41.       });
  42.     </script>
  44. {% if Products|length > 0 %}
  45. <div class="ec-role">
  46.     <div class="ec-updateItemRole">
  48.         <div class="ec-updateItemRole__title">
  49.             - 更新があった商品 -
  50.         </div>
  52.         <div class="ec-updateItemRole__slider">
  53.             {% for Product in Products %}
  54.             <div class="ec-updateItemRole__listItem">
  55.                 <a href="{{ url('product_detail', {'id': Product.id}) }}">
  57.                     {% if Product.stock_find %}
  59.                         <div class="ec-updateItemRole__imageArea">
  60.                           <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  61.                         </div>
  62.                         <p class="ec-updateItemRole__listItemTitle">{{ Product.name }}</p>
  64.                         <p class="ec-updateItemRole__detailPrice">
  65.                         {% if Product.hasProductClass %}
  66.                             {% if Product.getPrice02Min == Product.getPrice02Max %}
  67.                                 {{ Product.getPrice02IncTaxMin|price }}
  68.                             {% else %}
  69.                                 {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
  70.                             {% endif %}
  71.                         {% else %}
  72.                             {{ Product.getPrice02IncTaxMin|price }}
  73.                         {% endif %}
  74.                         </p>
  75.                     {% else %}
  76.                         <div class="ec-updateItemRole__imageArea soldout">
  77.                           <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}">
  78.                         </div>
  79.                         <p class="ec-updateItemRole__listItemTitle">{{ Product.name }}</p>
  80.                         <p class="ec-updateItemRole__detailPrice soldout">SOLDOUT</p>
  81.                     {% endif %}
  83.                 </a>
  84.             </div>
  85.             {% endfor %}
  86.         </div>
  88.         <a class="ec-updateItemRole__moreBtn" href="{{ url('product_list') }}?orderby=4">一覧を見る</a>
  90.     </div>
  91. </div>
  92. {% endif %}