Multiple images and custom separator

[Vyborg777]

Heed your help friends!
I need to have multiple images with buttons to switch among them.
Cant find the right plugin or code for this.

Example

Exact the same function.. how to achieve?

Thank you!

[Vyborg777]

ANY HELP WOULD BE APPRECIATED!

[nickMarz]

Hi, @Vyborg777, this is accomplishable now, you'd first need to build a slideshow with something like https://get.foundation/sites/docs/orbit.html

and then include the twentytwenty code of as the image in each slide:

<ul class="orbit-container">
  <li class="is-active orbit-slide">
    <figure class="orbit-figure">
      <div class="twentytwenty-container">
        <img src="img/1_1.jpg" />
        <img src="img/1_2.jpg" />
      </div>
      <figcaption class="orbit-caption">Space, the final frontier.</figcaption>
    </figure>
  </li>

AND then you'd need to attach event handlers to the slideshow buttons to retrigger twentytwenxzty on slide change.

$("#orbit .twentytwenty-container").twentytwenty();

$('.orbit-controls *, .orbit-bullets button').click(()=>{
  $("#orbit .twentytwenty-container").twentytwenty()
})

[nickMarz]

Also, you can customize any of the styles here: https://github.com/zurb/twentytwenty#build-with-scss