【EC-CUBE 4】商品をスライダー（カルーセル）で表示する方法

<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Customize\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\Routing\Annotation\Route;
use Eccube\Controller\AbstractController;
use Eccube\Repository\ProductRepository;  // データベースのdtb_Productテーブルから情報を取得するためのリポジトリ。

class TopController extends AbstractController
{
    // ProductRepositoryのプロパティを宣言。
    /**
     * @var ProductRepository
     */
    protected $productRepository;

    // コンストラクタメソッド。このクラスがインスタンス化されるときに自動的に呼び出される。
    // ProductRepositoryを引数として受け取り、それをクラスのプロパティに格納する。
    /**
     * @param ProductRepository $productRepository
     */
    public function __construct(ProductRepository $productRepository) {
        $this->productRepository = $productRepository;
    }

    /**
     * @Route("/", name="homepage", methods={"GET"})
     * @Template("index.twig")
     */
    public function index()
    {
      // ProductRepositoryを使って、IDの大きい順（降順）に12件取得。
      $products = $this->productRepository->findby([], ['id' => 'DESC'], 12);

      // 取得した商品データをTwigテンプレートに渡す。
      return [
          'Products' => $products,
      ];
    }
}

<div class="ec-role">
    <div class="ec-newItemRole">
        <div class="ec-newItemRole__list">
            <div class="ec-newItemRole__listItem">
                <div class="ec-newItemRole__listItemHeading ec-secHeading--tandem">
                    <span class="ec-secHeading__en">{{ 'NEW ITEM'|trans }}</span>
                    <span class="ec-secHeading__line"></span>
                    <span class="ec-secHeading__ja">{{ '新着商品'|trans }}</span>
                    <a class="ec-inlineBtn--top" href="{{ url('product_list') }}">{{ 'more'|trans }}</a>
                </div>
            </div>
            {% for Product in Products %}
                <div class="ec-newItemRole__listItem">
                    <a href="{{ url('product_detail', {'id': Product.id}) }}">
                        <img src="{{ asset(Product.main_list_image|no_image_product, 'save_image') }}" alt="{{ Product.name }}">
                        <p class="ec-newItemRole__listItemTitle">{{ Product.name }}</p>
                        <p class="ec-newItemRole__listItemPrice">
                            {% if Product.hasProductClass %}
                                {% if Product.getPrice02Min == Product.getPrice02Max %}
                                    {{ Product.getPrice02IncTaxMin|price }}
                                {% else %}
                                    {{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}
                                {% endif %}
                            {% else %}
                                {{ Product.getPrice02IncTaxMin|price }}
                            {% endif %}
                        </p>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>