Customizing Responsive Carousel

  • Posts: 12
  • Thank you received: 0
  • Hikaserial Standard
7 months 2 weeks 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?

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

  • Posts: 64484
  • Thank you received: 9313
  • MODERATOR
7 months 2 weeks 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.'}}';

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

  • Posts: 51
  • Thank you received: 7
  • Hikashop Business
4 months 3 weeks 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: 64484
  • Thank you received: 9313
  • MODERATOR
4 months 3 weeks 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: 51
  • Thank you received: 7
  • Hikashop Business
4 months 3 weeks 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.

Time to create page: 0.088 seconds
Powered by Kunena Forum