Customizing Responsive Carousel

-- HikaShop version -- : 3.4.0
-- Joomla version -- : 3.8.8

I'm trying to slightly change how the carousel displays its items.

Basically, the responsive features of the module works for us, for the most part. It properly shows the correct number of items in different screen sizes, and scrolls properly through them (3-in-a-row for desktops; 2-in-a-row for tablets/medium screens; 1 in small screens).

However, we'd like to change the number of items shown in small screens to 2-in-a-row. I was able to edit the CSS so it shows 2-in-a-row (changed the carousel item and carousel stage elements), but that ended up having extra "spaces" when scrolling through the carousel pages. I think this is from the scroll buttons still expecting the stage to be in the original width.

How do I properly customize the carousel module to properly reflect the 2-in-a-row behavior in small displays?

Hi Nicholas,

For some reason the carousel doesn't work in responsive mode for me. Why would this be? navlife.com.au

Thank you Nicolas, this solve the issue.

hi

i need to make my carousel display 2 columns on mobile

i saw this code and is different with the one posted here

if($options['dots']) {
		$options['responsive'] = '{0:{items:1, slideBy:1, dotsEach: 1}, 768:{items:2, slideBy:'.$slideByFor2.', dotsEach: '.$slideByFor2.'}, 992:{items:'.$products.', dotsEach: '.$products.'}}';
	} else {
		$options['responsive'] = '{0:{items:1, slideBy:1}, 768:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
	}