search

CSS-Tricks / AnythingSlider

A jQuery Slider plugin for anything.
http://css-tricks.github.io/AnythingSlider/
GNU Lesser General Public License v3.0
1.15k stars 380 forks source link

How to move the x of the captions? #523

Closed 3Necromancer closed 11 years ago

3Necromancer commented 11 years ago

Hi, awesome slider.

is there a way to re-position the x button closing the captions? i want it on the left side instead of the right, but it looks to be appended to the caption element, not sure how to move it.

thanks.

Mottie commented 11 years ago

Hi @3Necromancer!

If you look at the css for the captions, you will find this bit of code:

/* Caption close button */
 .caption-top .close, .caption-right .close,
 .caption-bottom .close, .caption-left .close {
  font-size: 80%;
  cursor: pointer;
  float: right;
  display: inline-block;
 }

Basically, change that to float: left or even switch to to position:absolute;left: 0; to move the close button. All of the HTML & CSS is customizable.

3Necromancer commented 11 years ago

thanks a lot! that was a quick one :)

i have another problem, not sure if i should open another issue or not... ive searched past reports, including https://github.com/CSS-Tricks/AnythingSlider/issues/239 but either it didn't help or there is more needed then just throwing it inside theme-minimalist-square.css

the slider is bugged in chrome, i have two issues with it 1) it wont slide back 2) when it slides forward, it shows the sliding effect (new slide comes in) and bounces back to the first slide. the navigation boxes show its on the next slide though. firefox works fine. its on RTL site. hope you can help me.

p.s. im working on a slider module for phpbb portal mod instead of the 'global announcements' module.

Mottie commented 11 years ago

It would help if you could share your initialization code. But maybe the best solution would be to just add that css without including the rtl class selector:

div.anythingSlider .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}

to make the slider work properly on RTL pages.

3Necromancer commented 11 years ago

added it just under .anythingSlider.rtl .anythingWindow { within theme-minimalist-square.css and fixed! thanks!