Post by diongoile » Tue Oct 14, 2014 4:19 pm

Hi there,

I am having a CSS or JS issue with the slideshow on Opencart 2.0 on a Ubuntu based linux installation I have recently done.

I do not have the issue on the same version in my WAMP test environment.

The issue is that the right hand arrow on the slider sits in the same position as the left had arrow when hovering over the slide show.

I have inspected the items CSS and have been unable to pinpoint the cause, it happens for all browsers.

Has anyone seen this issue before?

http://under50dollars.co.nz is the site currently, you will be able to see the issue on the homepage.

Thanks for your time.
Last edited by diongoile on Fri Oct 17, 2014 4:10 am, edited 1 time in total.

Newbie

Posts

Joined
Tue Oct 14, 2014 4:11 pm
Location - New Zealand

Post by Chris_AXA » Tue Oct 14, 2014 7:18 pm

Small issue.

It has to do with this Flexslider RTL CSS:

Code: Select all

.flexslider:hover .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-prev {right: 5px; left: auto;}
It should be:

Code: Select all

.flexslider:hover .flex-direction-nav .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-direction-nav .flex-prev {right: 5px; left: auto;}
But it flips both of the arrows so this should only be triggered if you have RTL active. So I assume there is a class missing that is applied to the Flexbox when RTL is active which then should be prefaced in this CSS. If you comment out all the CSS code beneath the /* Flexslider RTL */ it fixes it.

New member

Posts

Joined
Mon Sep 24, 2012 7:18 pm

Post by diongoile » Tue Oct 14, 2014 11:58 pm

Awesome thanks.

I am travelling for the next day and a half so I will update this with the result once I get back to Internet.

EDIT: Thanks Chris_AXA removing the below worked perfectly.

Code: Select all

/* Flexslider RTL */
.flex-direction-nav .flex-next {background-position: 0 0; left: -36px; right: auto;}
.flex-direction-nav .flex-prev {background-position: 100% 0; right: -36px; left: auto;}
.flexslider:hover .flex-next {left: 5px; right: auto;}
.flexslider:hover .flex-prev {right: 5px; left: auto;}
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {opacity: 1; right: 0; left: auto;}
  .flex-direction-nav .flex-next {opacity: 1; left: 0; right: auto;}
}

Newbie

Posts

Joined
Tue Oct 14, 2014 4:11 pm
Location - New Zealand

Post by Qphoria » Thu Nov 06, 2014 1:58 am

None of this worked properly for me.. the original recommendation made the arrow backwards. This is what worked for me:

1. EDIT: catalog/view/javascript/jquery/flexslider/flexslider.css

2. AT THE BOTTOM, ADD:

Code: Select all

.flexslider:hover .flex-direction-nav .flex-prev {left: 5px; right: auto;}
.flexslider:hover .flex-direction-nav .flex-next {right: 5px; left: auto;}
.flexslider .flex-direction-nav .flex-prev {left: -500px; right: auto;}
.flexslider .flex-direction-nav .flex-next {right: -500px; left: auto;}

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am
Who is online

Users browsing this forum: No registered users and 53 guests