[Resolved] Products Slider from Module Manager Not Displaying Correctly

[Author]

Posts

[marcusC-4]

I am using the "Products Slider" module that I downloaded from this page: https://toolset.com/home/module-manager/ and the layout is not right. It shows the products stacked instead of side-by-side.

Here is a URL where you can view the slider: hidden link The password to view the page is GHE2017

I want to use the slider at the top of a custom Layout for WooCommerce archive pages, which you can see by going to the Shop page or any of the archive pages. They are linked to in the main nav menu.

It looks like this module uses Bootstrap 2 classes. Can it be updated to work with Bootstrap 3.0?

[Luo Yang]

Dear Marcus,

What do you means this:
It shows the products stacked instead of side-by-side.

I checked the problem page you mentioned above:
hidden link
There is a view in the top of above page, see screenshot: sliders.JPG, are we talking about this view?

There is only one item(image) in the sliders, are you going to display two or three items(images) in each slider?
For example:
Slider 1
-- Item A
-- Item B
-- Item B
Slider 2
-- Item C
-- Item D
-- Item E
...

If it is, please edit the view, in section "Pagination and Sliders Settings", option "Pagination options", choose "Display 3 items per page".

More help:
Views Pagination – Split Content into Pages
https://toolset.com/documentation/user-guides/views-pagination/

[Luo Yang]

Dear Marcus,

What do you means this:
It shows the products stacked instead of side-by-side.

I checked the problem page you mentioned above:
hidden link
There is a view in the top of above page, see screenshot: sliders.JPG, are we talking about this view?

There is only one item(image) in the sliders, are you going to display two or three items(images) in each slider?
For example:
Slider 1
-- Item A
-- Item B
-- Item B
Slider 2
-- Item C
-- Item D
-- Item E
...

If it is, please edit the view, in section "Pagination and Sliders Settings", option "Pagination options", choose "Display 3 items per page".

More help:
Views Pagination – Split Content into Pages
https://toolset.com/documentation/user-guides/views-pagination/

[marcusC-4]

Hi Luo,

Thanks for checking out the page, but I think you need to scroll down to see the other products on that slide. At the very bottom of the page, you will see a little green square. That is the "Next" button. Click on that & you will see that all 3 products slide at once.

Yes, the "Display 3 items per page." option is already selected. I downloaded the module referenced in my original post & have not made any changes to it other than adding an image to the loop.

If you Inspect Element on that slider, you will see Bootstrap 2 column classes. I was wondering if this is causing the issue & if there is a version of this module that is updated for Bootstrap 3.0?

[Luo Yang]

For the question:
I was wondering if this is causing the issue & if there is a version of this module that is updated for Bootstrap 3.0?
I assume we are talking about the CSS class "span3", yes it is outdated, if you are using Bootstrap V3 framework, it will cause the issue, and there isn't version of this module that is updated for Bootstrap 3.0, and I suggest you replace it with CSS class "col-sm-3", you should be able to find it in the sliders view and the content template.

[marcusC-4]

that’s what i wondered about. thanks for the reply. we’ve updated all the html to reflect bootstrap 3.0 classes.