Switcher

Documentation and examples for how to use InPage's included Switcher component.

Switcher component

First slide

Lorem ipsum dolor sit amet.

Second img

Lorem ipsum dolor sit amet, consectetur adipisicing.

Third img

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga.

Fourth img

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, vitae, quam!

First img Second img Third img Fourth img 
<div class="switcher_sth">
  <div class="switcher_row_sth">
    <div class="switcherImgCol_sth">
      	<img src="..." alt="First slide">
    </div>
    <div class="switcherTextCol_sth">
        <p> Lorem ipsum dolor sit amet. </p>
    </div> 
  </div>
  <div class="switcher_row_sth">
    <div class="switcherImgCol_sth">
      	<img src="..." alt="Second img">
    </div>
    <div class="switcherTextCol_sth">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing. </p>
    </div> 
  </div>
  <div class="switcher_row_sth">
    <div class="switcherImgCol_sth">
      	<img src="..." alt="Third img">
    </div>
    <div class="switcherTextCol_sth">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga. </p>
    </div> 
  </div>
  <div class="switcher_row_sth">
    <div class="switcherImgCol_sth">
      	<img src="..." alt="Fourth img">
    </div>
    <div class="switcherTextCol_sth">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, vitae, quam! </p>
    </div> 
  </div>      
  <div class="switcher_nav_sth">
      <span data-toggle_sth="switcher">
        <img src="..." alt="First img">
      </span>
      <span data-toggle_sth="switcher">
        <img src="..." alt="Second img">
      </span>
      <span data-toggle_sth="switcher">
        <img src="..." alt="Third img">
      </span>
      <span data-toggle_sth="switcher">
        <img src="..." alt="Fourth img">
      </span>
  </div>
</div>