add CSS style to previous and current slide

sinzo.sakurata's Avatar

sinzo.sakurata

06 Oct, 2016 04:10 PM

Hi,
I want to create transition like this website - http://www.chris-wang.com/
you can see the left image transition.

My question is:
can I add css style to previous and current slide? so the html will look like this
<div class="rsContainer">
<div style="left: 0px; display: block; opacity: 1; transform: translate3d(0%, 0%, 0px);" class="rsSlide rsActiveSlide">1</div>
<div style="left: 0px; display: none; transform: translate3d(-100%, 0%, 0px);" class="rsSlide">2</div>
<div style="left: 0px; display: none; transform: translate3d(-100%, 0%, 0px);" class="rsSlide">3</div>
</div>

This is what I have done so far - http://projects.zetcut.com/procan/slider.html

Thanks

  1. Support Staff 1 Posted by Dmitry Semenov on 06 Oct, 2016 05:30 PM

    Dmitry Semenov's Avatar

    Hello,

    You may use events like rsBeforeMove or rsAfterSlideChange and apply class based on current index.

    Also, not sure if I understand what exactly effect you wish to achieve, as site that you linked creates the transition with two separate sliders overlaid on top of each other.

    Dmitry

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac