How do you create a carousel?

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65670

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

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

  • Posts: 2334
  • Thank you received: 403
11 years 9 months ago #65779

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.

The following user(s) said Thank You: CassHW

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

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65800

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)

Attachments:

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

  • Posts: 81853
  • Thank you received: 13143
  • MODERATOR
11 years 9 months ago #65812

The problem is that some CSS of your template is interfering with the CSS of the slider. That's why it doesn't work properly.
You'll have to remove the CSS of your template which is interfering and that will solve the display issue of the carousel.

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

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65815

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

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

  • Posts: 2334
  • Thank you received: 403
11 years 9 months ago #65818

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

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

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65820

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

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

  • Posts: 2334
  • Thank you received: 403
11 years 9 months ago #65836

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;
}
If you disable it, the carousel looks good :)

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

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65861

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

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

  • Posts: 81853
  • Thank you received: 13143
  • MODERATOR
11 years 9 months ago #65945

It's this one:
horsewhispers.com.au/templates/evalor/in.../base.css?1333246376

If you don't know how to edit it, you should contact your template provider.

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

  • Posts: 80
  • Thank you received: 0
11 years 9 months ago #65961

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.

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

  • Posts: 2334
  • Thank you received: 403
11 years 9 months ago #66189

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

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

  • Posts: 80
  • Thank you received: 0
11 years 8 months ago #66191

great! how do I get my hand on it? :)

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

  • Posts: 2334
  • Thank you received: 403
11 years 8 months ago #66194

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
by
hikashop_main_carousel_div hikashop_subcontainer

Then edit the front_end.css file (via hikashop interface, System>configuration>display) and add these lines:
.hikashop_main_carousel_div ul li{
	padding: 0px !important;
	background: none !important;
}

It should avoid the kind of issues you encountered :)

Last edit: 11 years 8 months ago by Eliot.

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

  • Posts: 80
  • Thank you received: 0
11 years 8 months ago #66212

cool, I will
thanks a lot

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

Time to create page: 0.092 seconds
Powered by Kunena Forum