Skip to main content

Customizing Responsive Carousel

More
8 years 3 months ago #293384 by jtquinto
Customizing Responsive Carousel was created by jtquinto
-- 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.

More
8 years 3 months ago #293397 by nicolas
Replied by nicolas on topic Customizing Responsive Carousel
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:
Code:
$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:
Code:
$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.

More
8 years 4 weeks ago #297194 by olstadesigns
Replied by olstadesigns on topic Customizing Responsive Carousel
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.

More
8 years 4 weeks ago #297197 by nicolas
Replied by nicolas on topic Customizing Responsive Carousel
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.

More
8 years 4 weeks ago #297224 by olstadesigns
Replied by olstadesigns on topic Customizing Responsive Carousel
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.

More
5 years 9 months ago #326890 by ronron
Replied by ronron on topic Customizing Responsive Carousel
hi

i need to make my carousel display 2 columns on mobile

i saw this code and is different with the one posted here
Code:
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.

More
5 years 9 months ago #326894 by nicolas
Replied by nicolas on topic Customizing Responsive Carousel
Hi,

You still have the line:
Code:
$options['responsive'] = '{0:{items:1, slideBy:1}, 768:{items:2, slideBy:'.$slideByFor2.'}, 992:{items:'.$products.'}}';
there, that you can still change to:
Code:
$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.

More
2 years 6 months ago #359336 by Petike1007
Replied by Petike1007 on topic Customizing Responsive Carousel
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.

More
2 years 6 months ago #359339 by nicolas
Replied by nicolas on topic Customizing Responsive Carousel
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:
Code:
$options["breakpoints"] = "{0:{slidesPerView:1},768:{slidesPerView:" . $slideByFor2 . ", spaceBetween:" . $spaceBetween . "},992:{slidesPerView:" . $products . ", spaceBetween:" . $spaceBetween . "}}";
Instead, you could have:
Code:
$options["breakpoints"] = "{0:{slidesPerView:2, spaceBetween:" . $spaceBetween . "},992:{slidesPerView:" . $products . ", spaceBetween:" . $spaceBetween . "}}";

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

More
2 years 6 months ago #359349 by Petike1007
Replied by Petike1007 on topic Customizing Responsive Carousel
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.232 seconds
Powered by Kunena Forum