0

Can anyone point me in the right direction.

How can I make the category image row on this page show the images as

  1. overflow-x: scroll
  2. show all images in the same size

dev url: https://xxx.dev/lege/baby.html

enter image description here

2 Answers 2

2

If you apply these 2 CSS you will look like this preview

enter image description here

Here is the CSS:

.inline-flex {
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    width: 100%;
}
.wrapper.inline-flex a {
    display: inline-block;
}

You can add parent class according to you....

Hope this will help!

2
0

To display images in a horizontal scroll bar in Magento 2, you can follow these steps:

  1. First, create a block in Magento that will display the images. You can do this by creating a new module or using an existing one.

  2. In your module's layout XML file, create a new container or referenceContainer and add the following attributes to it:

In this example, we have named our container "horizontal-scroll" and added a block of class "Vendor\Module\Block\Image" to it. You can name your block and class as per your requirements.

  1. Next, in your block class, you need to define the images that you want to display. You can retrieve the images from the database or any other source as per your requirements.

class Image extends \Magento\Framework\View\Element\Template { protected $_imageCollectionFactory;

public function __construct(
    \Magento\Framework\View\Element\Template\Context $context,
    \Vendor\Module\Model\ResourceModel\Image\CollectionFactory $imageCollectionFactory,
    array $data = []
) {
    parent::__construct($context, $data);
    $this->_imageCollectionFactory = $imageCollectionFactory;
}

public function getImageCollection()
{
    $imageCollection = $this->_imageCollectionFactory->create();
    return $imageCollection;
}

}

In this example, we have created a function called "getImageCollection" that retrieves the images from a collection factory. You can modify this function to retrieve images from any source as per your requirements.

  1. Finally, in your block template file, you need to loop through the images and display them in a horizontal scroll bar.

enter image description here

In this example, we have created a div with class "scroll-horizontal" and a ul with class "scroll-horizontal-list". We then loop through the images and display them in li elements within the ul. You can modify the HTML and CSS as per your requirements to customize the appearance of the horizontal scroll bar.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.