Categories

.uiSlidebox()

Categories: UI

ep.uiSlidebox( options )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.slidebox

Description: Create a view of navigable slides.

  • ep.uiSlidebox( options )

    version added: 6.15.0

    options   A map of additional options pass to the method.

The ep.uiSliderbox() method creates a view of slides which are navigable with touch swipe gestures and clickable areas on the left and right side.

  • Create a simple slidebox with 3 slide and 2 content boxes per slide.

    HTML:
    <div id="slidebox">
      <ul>
        <li>
          <img alt="Bild 1" src="ep/ui/slideboxTest_Image1.jpg"/>
        </li>
        <li>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod,
            risus dictum vulputate varius, sapien elit feugiat massa, in feugiat lacus diam vel ipsum.
          </p>
        </li>
        <li>
          <p>
            Nulla lacinia felis in nulla auctor non condimentum sapien vestibulum. Donec quis ornare arcu.
            Nullam semper, nunc eget faucibus condimentum, velit massa pulvinar lorem, id dignissim lectus
            diam ac elit. Morbi mattis venenatis posuere. Nulla congue risus id orci vestibulum sed tempor
            dolor molestie.
          </p>
        </li>
        <li>
          <img alt="Bild 2" src="ep/ui/slideboxTest_Image2.jpg"/>
        </li>
        <li>
          <img alt="Bild 3" src="ep/ui/slideboxTest_Image3.jpg"/>
        </li>
      </ul>
    </div>
    
    Code:
    ep('#slidebox')
        .uiSlidebox({
            view: 2,
            padding: false,
            speed: 600
        });
    
    
  • view

    version added: 6.15.0

    A count of how many content box are displayed per slide view.

    Default: 2

  • speed

    version added: 6.15.0

    The animation time in seconds for the slide effect.

    Default: 400

  • padding

    version added: 6.15.0

    A boolean indication whether to add padding on the left and right.

    Default: true

  • arrow

    version added: 6.15.0

    A boolean indication whether to show arrows for previous and next available slides.

    Default: true

  • changeslide

    version added: 6.15.0

    This event is triggered when the slide change to an other.

  • goTo

    • .uiTooltip( 'goTo', slide )

      version added: 6.15.0

      slide   Number of the slide to go, accept also 'prev' and 'next'.

    Go to an specified slide.