How do you create a carousel?

Hello,
I'm trying to create a carousel with 1 row of products that slides (like on the demo site).
The products are from a category called specials.

I don't seem to be able to display all the products (more than 10) into 1 row. They get displayed over multiple rows and then the lot slides.

Could you please tell me the parameters I have to set? I am guessing it has something to do with the number of columns and products?

thanks

Hi there,

First of all you can take a look a the tutorial we wrot e about carousels on our demo website. I think you may found some interesting things about what you're trying to achieve .
Second, in your situation, since I'm not sure what you're talking about, posting a screenshot of your module configuration must be helpful. However, I think you just have to put the number of product displayed in the "Number of items" field and set the same number in the "Number of columns" field.

Well, I followed the instructions and this is not working.

I want to achieve the infinite slide in your tutorial.

However, I get something different (see screenshots)

that's not easy to do because I need to find which code interfere with the CSS

Try to use the "inspect element" option of you browser to see which css property is doing this.

yes, I am trying to find out that way but so far I don't know.
Do you want to have a go?
here is the link: horsewhispers.com.au/index.php/torsion-s...ion-saddles-in-stock
thx

It's this css which is screwing the carousel:

.tp_module ul li { 
list-style: disc outside none;
margin: 0px 0px 0px 1.4em;
padding: 3px 0px 3px 3px;
}

what CSS file is it in? I can't find it

ok, I'll have a look. But really, it would be nice if you built something that was not going to interfere with the template by using CSS IDs and styling them so the standard CSS for the template would ignore them. I know it's more work but long term it's better because you would have less support.
That CSS code is used by the template so I can't just disable it without breaking something!
I'll have to see what's involved.

You're right. We just added a css to class to avoid that kind of conflict with ul and li css properties

great! how do I get my hand on it?

It's a small fix but touching multiple files. You can either wait for an update or do it by yourself by doing these modifications:
Open carousel.php file in components\com_hikashop\views\product\tmpl and components\com_hikashop\views\category\tmpl and replace every occurence of

hikashop_subcontainer

hikashop_main_carousel_div hikashop_subcontainer

.hikashop_main_carousel_div ul li{
	padding: 0px !important;
	background: none !important;
}

cool, I will
thanks a lot