Page 1 of 1
[RESOLVED] CSS\JS Slider issue after fresh install on Ubuntu
Posted: Tue Oct 14, 2014 4:19 pm
by diongoile
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.
Re: CSS\JS Slider issue after fresh install on Ubuntu
Posted: Tue Oct 14, 2014 7:18 pm
by Chris_AXA
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.
Re: CSS\JS Slider issue after fresh install on Ubuntu
Posted: Tue Oct 14, 2014 11:58 pm
by diongoile
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;}
}
Re: [RESOLVED] CSS\JS Slider issue after fresh install on Ub
Posted: Thu Nov 06, 2014 1:58 am
by Qphoria
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;}