{"id":354833,"date":"2022-10-14T05:21:59","date_gmt":"2022-10-14T05:21:59","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=354833"},"modified":"2025-12-17T12:30:37","modified_gmt":"2025-12-17T12:30:37","slug":"create-custom-product-slider-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/","title":{"rendered":"Create Custom Product Slider in Magento 2"},"content":{"rendered":"\n

We\u2019ll explore how to create a custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table. <\/p>\n\n\n\n

Here we will use slick slider to show content. You can show your custom product collection anywhere on the page. You can provide the custom settings for the slick slider in the slick() as a json object.<\/p>\n\n\n\n

Here you can find the full configration that can be set in slick function.
https:\/\/www.npmjs.com\/package\/slick-slider<\/a><\/p>\n\n\n\n

For better understanding of creating module, You can create module as per the give instruction in following link
https:\/\/experienceleague.adobe.com\/docs\/commerce-learn\/tutorials\/frontend-development\/create-new-page.html<\/a>
Let’s suppose our vendor name is Vendor<\/strong> and Module name is Module<\/strong>.<\/p>\n\n\n\n

Note: <\/strong>This blog will work on magento 2.4.3 and later versions.<\/p>\n\n\n\n

Let’s create a controller for accessing the page on storefront. This will load the layout page and its required content.
Path:- app\/code\/Vendor\/Module\/Controller\/Index\/MyProdList.php<\/p>\n\n\n\n

<?php\nnamespace Vendor\\Module\\Controller\\Index;\n\nclass MyProdList extends \\Magento\\Framework\\App\\Action\\Action\n{\n\tprotected $_pageFactory;\n\n\tpublic function __construct(\n\t\t\\Magento\\Framework\\App\\Action\\Context $context,\n\t\t\\Magento\\Framework\\View\\Result\\PageFactory $pageFactory\n        )\n\t{\n\t\t$this->_pageFactory = $pageFactory;\n\t\treturn parent::__construct($context);\n\t}\n\n\tpublic function execute()\n\t{\n\t\treturn $this->_pageFactory->create();\n\t}\n}<\/pre>\n\n\n\n
This is our layout file. You can use 1 column, 2 columns etc as per your need. You can also use the following block in your existing page such as catalog category page, catalog product page, customer pages etc.
Path:- app\/code\/Vendor\/Module\/view\/frontend\/layout\/vendormod_index_myprodlist.xml<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n    <referenceContainer name="content">\n        <block class="Vendor\\Module\\Block\\ProductList" name="vendormod_index_myprodlist" template="Vendor_Module::index.phtml" \/>\n    <\/referenceContainer>\n<\/page><\/pre>\n\n\n\n
Here is our block which is responsible for getting product collection and required params for adding product to cart, getting form key, getting price renderer etc. This file extends the block \\Magento\\Catalog\\Block\\Product\\AbstractProduct. 
Path:- app\/code\/Vendor\/Module\/Block\/ProductList.php<\/p>\n\n\n\n
<?php\nnamespace Vendor\\Module\\Block;\nuse Magento\\Catalog\\Pricing\\Price\\FinalPrice;\nuse Magento\\Framework\\Pricing\\Render;\nuse Magento\\Framework\\App\\ActionInterface;\n\nclass ProductList extends \\Magento\\Catalog\\Block\\Product\\AbstractProduct\n{\n    \n    \/**\n     * @var \\Magento\\Framework\\Url\\Helper\\Data\n     *\/\n    protected $urlHelper;\n    \n    \/**\n     * @var \\Magento\\Catalog\\Model\\ProductFactory\n     *\/\n    protected $productFactory;\n\n    \/**\n     * @param Context $context\n     * @param \\Magento\\Framework\\Url\\Helper\\Data $urlHelper\n     * @param \\Magento\\Catalog\\Model\\ProductFactory $productloader\n     * @param array $data\n     *\/\n    public function __construct(\n        \\Magento\\Catalog\\Block\\Product\\Context $context,\n        \\Magento\\Framework\\Url\\Helper\\Data $urlHelper,\n        \\Magento\\Catalog\\Model\\ProductFactory $productloader,\n        \\Magento\\Framework\\Data\\Form\\FormKey $formKey,\n        array $data = []\n    ) {\n        $this->urlHelper = $urlHelper;\n        $this->productFactory = $productloader;\n        $this->formKey = $formKey;\n        parent::__construct($context, $data);\n    }\n    \/**\n     * Get form key\n     *\n     * @return string\n     *\/\n    public function getFormKey()\n    {\n        return $this->formKey->getFormKey();\n    }\n    \/**\n     * Load Products collection\n     *\n     * @return Product array\n     *\/\n    public function getLoadProducts()\n    {\n        $products = $this->productFactory->create()->getCollection()\n                    ->addAttributeToSelect(["name", "price", "image"])\n                    \/\/Custom filter on attributes\n                    \/\/category filter\n                    \/\/join with other table\n                    \/\/->addAttributeToFilter(IndustryType::PRODUCT_ATTRIBUTE_CODE, ["eq" => $attributeValue])\n                    ->addAttributeToFilter("visibility", ['neq' => 1]);\n        return $products;\n    }\n    \/**\n     * Load Product\n     *\n     * @return Product array\n     *\/\n    public function getLoadProduct($id)\n    {\n        return $this->productFactory->create()->load($id);\n    }\n    \n    \/**\n     * Get post parameters\n     *\n     * @param \\Magento\\Catalog\\Model\\Product $product\n     * @return array\n     *\/\n    public function getAddToCartPostParams(\\Magento\\Catalog\\Model\\Product $product)\n    {\n        $url = $this->getAddToCartUrl($product, ['_escape' => false]);\n        return [\n            'action' => $url,\n            'data' => [\n                'product' => (int) $product->getEntityId(),\n                ActionInterface::PARAM_NAME_URL_ENCODED =>\n                    $this->urlHelper->getEncodedUrl($url),\n            ]\n        ];\n    }\n    \/**\n     * Get product price.\n     *\n     * @param \\Magento\\Catalog\\Model\\Product $product\n     * @return string\n     *\/\n    public function getProductPrice(\\Magento\\Catalog\\Model\\Product $product)\n    {\n        $priceRender = $this->getPriceRender($product);\n        $price = '';\n        if ($priceRender) {\n            $price = $priceRender->render(\n                FinalPrice::PRICE_CODE,\n                $product,\n                [\n                    'include_container' => true,\n                    'display_minimal_price' => true,\n                    'zone' => Render::ZONE_ITEM_LIST,\n                    'list_category_page' => true\n                ]\n            );\n        }\n        return $price;\n    }\n\n    \/**\n     * Get price render\n     *\n     * @param \\Magento\\Catalog\\Model\\Product $product\n     * @return Render\n     *\/\n    protected function getPriceRender($product)\n    {\n        return $this->getLayout()->createBlock(\\Magento\\Framework\\Pricing\\Render::class, "product.price.render.default".$product->getSku())\n            ->setData('is_product_list', true);\n    }\n    \n}<\/pre>\n\n\n\n
This is our phtml file which represent the slider on page.  You can put the following code before, after or in the middle of the content.
Path:- app\/code\/Vendor\/Module\/view\/frontend\/templates\/index.phtml<\/p>\n\n\n\n
<?php\nuse Magento\\Framework\\App\\Action\\Action;\n$_productCollection = $block->getLoadProducts();\nif ($_productCollection->getSize() <= 0) {\n    return;   \n}\n?>\n<h2><center>Product list carousel<\/center><\/h2>\n<div class="container-">\n<?php $_helper = $this->helper('Magento\\Catalog\\Helper\\Output'); ?>\n<?php \n$viewMode = 'grid';\n$image = 'category_page_grid';\n$showDescription = false;\n$templateType = \\Magento\\Catalog\\Block\\Product\\ReviewRendererInterface::SHORT_VIEW;\n$pos = $block->getPositioned();\n$position = '';\n$formKey = $block->getFormKey();\n?>\n<style>\n    .products-grid .product-item-inner{\n        margin:unset;\n    }\n    <\/style>\n<?php $count = 1; ?>\n\t<div class="ind-container">\t\n        <div class=" products wrapper grid products-grid <?php \/* @escapeNotVerified *\/ echo $viewMode; ?> products-<?php \/* @escapeNotVerified *\/ echo $viewMode; ?>">\n            <?php $iterator = 1; ?>\n            <div class="products grid items product-items slick-carousel" >\n                <?php $prdCount = 0; ?>\n                <?php foreach($_productCollection as $_product): \n                    \n                    ?>\n                    <?php $_product = $block->getLoadProduct($_product->getEntityId()); ?>\n                    <div class="item product product-item">\n                        <div class="product-item-info item" data-container="product-grid">\n                            <?php\n                            $productImage = $block->getImage($_product, $image);\n                            if ($pos != null) {\n                                $position = ' style="left:' . $productImage->getWidth() . 'px;'\n                                    . 'top:' . $productImage->getHeight() . 'px;"';\n                            }\n                            ?>\n                            <?php \/\/ Product Image ?>\n                            <a href="<?php \/* @escapeNotVerified *\/ echo $_product->getProductUrl() ?>" class="product photo product-item-photo" tabindex="-1">\n                                <?php \/* @escapeNotVerified *\/ echo $productImage->toHtml(); ?>\n                                <div class="product-discount">\n                                    <?php $originalPrice = $_product->getPrice();\n                                        $finalPrice = $_product->getFinalPrice();\n                                        $discount = 0;\n                                        if($originalPrice > $finalPrice){\n                                            $discount = number_format(($originalPrice - $finalPrice) * 100 \/ $originalPrice,0);\n                                    ?>\n                                    <div class="price_section">\n                                        <span class=""><?= $discount.'% Off'; ?><\/span>\n                                    <\/div>                            \n                                    <?php } ?>\n                                    <a href="#" \n                                        class="action towishlist"\n                                        title="<?php echo $block->escapeHtml(__('Add to Wishlist')); ?>"\n                                        aria-label="<?php echo $block->escapeHtml(__('Add to Wishlist')); ?>"\n                                        data-post='<?php \/* @escapeNotVerified *\/ echo $block->getAddToWishlistParams($_product); ?>'\n                                        data-action="add-to-wishlist"\n                                        role="button">\n                                        <span><?php \/* @escapeNotVerified *\/ echo __('Add to Wishlist') ?><\/span>\n\t\t\t\t\t\t\t\t\t<\/a>\n                                <\/div>\n                            <\/a>\n                            <div class="product details product-item-details">\n                                <?php $_productNameStripped = $block->stripTags($_product->getName(), null, true); ?>\n                                <strong class="product name product-item-name">\n                                    <a class="product-item-link"\n                                        href="<?php \/* @escapeNotVerified *\/ echo $_product->getProductUrl() ?>">\n                                        <?php \/* @escapeNotVerified *\/ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>\n                                    <\/a>\n                                <\/strong>\n                                <?php \/* @escapeNotVerified *\/ echo $block->getProductPrice($_product);?>\n                                <?php \/* @escapeNotVerified *\/ echo $block->getReviewsSummaryHtml($_product, $templateType); ?>\n                                \n                                <div class="product-item-inner">\n                                    <div class="product actions product-item-actions"<?php \/* @escapeNotVerified *\/ echo strpos($pos, $viewMode . '-actions') ? $position : ''; ?>>\n                                            <div class="actions-primary"<?php \/* @escapeNotVerified *\/ echo strpos($pos, $viewMode . '-primary') ? $position : ''; ?>>\n                                                <?php if ($_product->isSaleable()): ?>\n                                                    <?php $postParams = $block->getAddToCartPostParams($_product); ?>\n                                                    <form data-role="tocart-form" \n                                                    data-product-sku="<?= $escaper->escapeHtml($_product->getSku()) ?>"\n                                                    action="<?= $escaper->escapeUrl($postParams['action']) ?>"\n                                                    method="post"\n                                                    >\n                                                    <input type="hidden"\n                                                    name="product"\n                                                    value="<?= \/* @noEscape *\/ $postParams['data']['product'] ?>">\n                                                    <input type="hidden"\n                                                    name="<?= \/* @noEscape *\/ Action::PARAM_NAME_URL_ENCODED ?>"\n                                                    value="<?=\n                                                    \/* @noEscape *\/ $postParams['data'][Action::PARAM_NAME_URL_ENCODED]\n                                                        ?>">\n                                                        <input type="hidden" name="form_key" value="<?= \/* @noEscape *\/ $formKey ?>">\n                                                        \n                                                        <button type="submit"\n                                                                title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"\n                                                                class="action tocart primary">\n                                                            <span><?php \/* @escapeNotVerified *\/ echo __('Add to Cart') ?><\/span>\n                                                        <\/button>\n                                                    <\/form>\n                                                <?php else: ?>\n                                                    <?php if ($_product->getIsSalable()): ?>\n                                                        <div class="stock available"><span><?php \/* @escapeNotVerified *\/ echo __('In stock') ?><\/span><\/div>\n                                                    <?php else: ?>\n                                                        <div class="stock unavailable"><span><?php \/* @escapeNotVerified *\/ echo __('Out of stock') ?><\/span><\/div>\n                                                    <?php endif; ?>\n                                                <?php endif; ?>\n                                            <\/div>\n                                            <!-- <div data-role="add-to-links" class="actions-secondary"<?php echo strpos($pos, $viewMode . '-secondary') ? $position : ''; ?>>\n                                                    \n                                                    <?php $compareHelper = $this->helper('Magento\\Catalog\\Helper\\Product\\Compare');\n                                                    ?>\n                                                    <a href="#" \n                                                        class="action tocompare"\n                                                        title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"\n                                                        aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"\n                                                        data-post='<?php \/* @escapeNotVerified *\/ echo $compareHelper->getPostDataParams($_product); ?>'\n                                                        role="button">\n                                                        <span><?php \/* @escapeNotVerified *\/ echo __('Add to Compare') ?><\/span>\n                                                    <\/a>\n                                            <\/div> -->\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                        <script type="text\/x-magento-init">\n                        {\n                            "[data-role=tocart-form], .form.map.checkout": {\n                                "catalogAddToCart": {\n                                    "product_sku": "<?= \/* @noEscape *\/ $_product->getSku() ?>"\n                                }\n                            }\n                        }\n                        <\/script>\n                    <\/div>\n                <?php endforeach; ?>\n            <\/div>\n        <\/div>\n\t<\/div>\n\t<?php $count++; ?> \n<script>\nrequire(['jquery', 'jquery\/ui', 'slick'], function($) {\n    $(document).ready(function() {\n        $(".slick-carousel").slick({\n            dots: true,\n            infinite: false,\n            slidesToShow: 4,\n            slidesToScroll: 1\n        });\n    });\n});\n<\/script><\/pre>\n\n\n\n
Output:- After creating all above files, Here is how the output would be shown.<\/p>\n\n\n\n
\"Screenshot-from-2022-10-13-20-54-13\"<\/figure>\n\n\n\n
Previous Blog https:\/\/webkul.com\/blog\/how-to-pass-data-using-js-widget-in-magento-2\/<\/a>

<\/p>\n","protected":false},"excerpt":{"rendered":"
We\u2019ll explore how to create a custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table. Here we will use slick slider to show content. You can show your custom product collection anywhere on […]<\/a><\/p>\n","protected":false},"author":440,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2383,1],"tags":[],"class_list":["post-354833","post","type-post","status-publish","format-standard","hentry","category-blog","category-uncategorized"],"yoast_head":"\nCreate Custom Product Slider in Magento 2<\/title>\n<meta name=\"description\" content=\"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create Custom Product Slider in Magento 2\" \/>\n<meta property=\"og:description\" content=\"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-14T05:21:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T12:30:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png\" \/>\n<meta name=\"author\" content=\"Amir Khan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Amir Khan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\"},\"author\":{\"name\":\"Amir Khan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f2493d3639b5e8c05ae4e9af5f71063a\"},\"headline\":\"Create Custom Product Slider in Magento 2\",\"datePublished\":\"2022-10-14T05:21:59+00:00\",\"dateModified\":\"2025-12-17T12:30:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\"},\"wordCount\":334,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png\",\"articleSection\":[\"blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\",\"name\":\"Create Custom Product Slider in Magento 2\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png\",\"datePublished\":\"2022-10-14T05:21:59+00:00\",\"dateModified\":\"2025-12-17T12:30:37+00:00\",\"description\":\"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13.png\",\"width\":1221,\"height\":586,\"caption\":\"Screenshot-from-2022-10-13-20-54-13\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create Custom Product Slider in Magento 2\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/f2493d3639b5e8c05ae4e9af5f71063a\",\"name\":\"Amir Khan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/da678755fca2993231591a761683dc95fcf81f335982ea5c1b38e9ccc1c6bc0c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/da678755fca2993231591a761683dc95fcf81f335982ea5c1b38e9ccc1c6bc0c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Amir Khan\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/amir-khan754\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create Custom Product Slider in Magento 2","description":"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"Create Custom Product Slider in Magento 2","og_description":"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.","og_url":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-10-14T05:21:59+00:00","article_modified_time":"2025-12-17T12:30:37+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png","type":"","width":"","height":""}],"author":"Amir Khan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Amir Khan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/"},"author":{"name":"Amir Khan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f2493d3639b5e8c05ae4e9af5f71063a"},"headline":"Create Custom Product Slider in Magento 2","datePublished":"2022-10-14T05:21:59+00:00","dateModified":"2025-12-17T12:30:37+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/"},"wordCount":334,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png","articleSection":["blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/","name":"Create Custom Product Slider in Magento 2","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13-1200x576.png","datePublished":"2022-10-14T05:21:59+00:00","dateModified":"2025-12-17T12:30:37+00:00","description":"Today we will learn how to create custom product slider in Magento 2. On the basis of your need, you can add your own condition such as product attribute filter, category filter, or join with any other table.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2022\/10\/Screenshot-from-2022-10-13-20-54-13.png","width":1221,"height":586,"caption":"Screenshot-from-2022-10-13-20-54-13"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-custom-product-slider-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create Custom Product Slider in Magento 2"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/f2493d3639b5e8c05ae4e9af5f71063a","name":"Amir Khan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/da678755fca2993231591a761683dc95fcf81f335982ea5c1b38e9ccc1c6bc0c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/da678755fca2993231591a761683dc95fcf81f335982ea5c1b38e9ccc1c6bc0c?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Amir Khan"},"url":"https:\/\/webkul.com\/blog\/author\/amir-khan754\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/354833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/440"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=354833"}],"version-history":[{"count":18,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/354833\/revisions"}],"predecessor-version":[{"id":517802,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/354833\/revisions\/517802"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=354833"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=354833"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=354833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}