Customizing Responsive Carousel

  • Posts: 30
  • Thank you received: 2
5 years 6 months ago #293384

-- 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?

The following user(s) said Thank You: oxido

Please Log in or Create an account to join the conversation.

  • Posts: 80502
  • Thank you received: 12830
  • MODERATOR
5 years 6 months ago #293397

Hi,

The best is to edit the file "carousel" of the view "product" via the menu Display>Views.
There, you want to change that lin which controls how the carousel behaves for the different resolutions:

$options['responsive'] = '{0:{items:1, slideBy:1}, 768:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
The simplest I guess would be to change that code to:
$options['responsive'] = '{0:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';

The following user(s) said Thank You: oxido

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 9
5 years 3 months ago #297194

Hi Nicholas,

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


I can't change the direction of the wind, but I can adjust my sails to always reach my destination.

Please Log in or Create an account to join the conversation.

  • Posts: 80502
  • Thank you received: 12830
  • MODERATOR
5 years 3 months ago #297197

Hi,

It seems that you're using the legacy carousel system of HikaShop 2 there. And it isn't responsive.
Check that you have the "carousel legacy" setting turned off in the HikaShop configuration in order to use the new carousel system which is responsive.

The following user(s) said Thank You: olstadesigns

Please Log in or Create an account to join the conversation.

  • Posts: 56
  • Thank you received: 9
5 years 3 months ago #297224

Thank you Nicolas, this solve the issue.


I can't change the direction of the wind, but I can adjust my sails to always reach my destination.

Please Log in or Create an account to join the conversation.

  • Posts: 490
  • Thank you received: 2
3 years 6 days ago #326890

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.'}}';
	}

what should i edit here?

thanks

Please Log in or Create an account to join the conversation.

  • Posts: 80502
  • Thank you received: 12830
  • MODERATOR
3 years 6 days ago #326894

Hi,

You still have the line:

$options['responsive'] = '{0:{items:1, slideBy:1}, 768:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
there, that you can still change to:
$options['responsive'] = '{0:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
So it hasn't changed.

The following user(s) said Thank You: oxido

Please Log in or Create an account to join the conversation.

Time to create page: 0.083 seconds
Powered by Kunena Forum