Customizing Responsive Carousel

  • Posts: 30
  • Thank you received: 2
6 years 11 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: 83824
  • Thank you received: 13571
  • MODERATOR
6 years 11 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
6 years 8 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: 83824
  • Thank you received: 13571
  • MODERATOR
6 years 8 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
6 years 8 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
4 years 5 months 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: 83824
  • Thank you received: 13571
  • MODERATOR
4 years 5 months 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.

  • Posts: 75
  • Thank you received: 4
1 year 2 months ago #359336

I have the same issue, trying to show 3 in a row on mobile and 4 on tablet, 6 on desktop.
When i check with the display view files i can see there is a category / carousel.php -> category / carousel_swiper.php -> category / listing_slider_horizontal.php layout.
Not sure which one I should override, tried them, but nothing changed. (ver 5.0.2)

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

  • Posts: 83824
  • Thank you received: 13571
  • MODERATOR
1 year 2 months ago #359339

Hi,

With the new Swiper carousel introduced recently, it's indeed in the carousel_swiper view file that you want to make the change.
And the code to change there is:

    $options["breakpoints"] =
        "{0:{slidesPerView:1},768:{slidesPerView:" .
        $slideByFor2 .
        ", spaceBetween:" .
        $spaceBetween .
        "},992:{slidesPerView:" .
        $products .
        ", spaceBetween:" .
        $spaceBetween .
        "}}";
Instead, you could have:
    $options["breakpoints"] =
        "{0:{slidesPerView:2, spaceBetween:" .
        $spaceBetween .
        "},992:{slidesPerView:" .
        $products .
        ", spaceBetween:" .
        $spaceBetween .
        "}}";

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

  • Posts: 75
  • Thank you received: 4
1 year 2 months ago #359349

Thanks, I have tried to change the slidesperview option but looks like it doesn't work without the spacebetween.

Works now

The following user(s) said Thank You: nicolas

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

Time to create page: 0.104 seconds
Powered by Kunena Forum