Image & Text / Image Only
Try now RISK-FREE for 30 days
Amazing support included! We'll help you get started in no time!
Amazing support included! We'll help you get started in no time!
See what makes this demo awesome
What to do
Try it on your phone at msc.li/25ie
Source

HTML

Copy to Clipboard
<ul id="demo" style="display:none">
    <li data-val="1">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="2">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="3">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="4">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="5">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="6">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="7">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="8">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="9">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="10">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="11">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="12">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="13">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="14">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="15">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="16">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="17">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="18">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="19">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="20">
      <img class="fruit" src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
</ul>

<button id="clear">Clear</button>
<button id="show">Show</button>

Javascript

Copy to Clipboard
$(function(){
    $('#demo').mobiscroll().image({
        theme: 'default',
        accent: ' ',
        lang: ' ',
        display: 'modal',
        animate: ' ',
        mode: 'scroller',
        labels: ['Select Favorite Fruit'],
        height: 40,
        fixedWidth: 200
    });    

    $('#show').click(function(){
        $('#demo').mobiscroll('show');
        return false;
    });

    $('#clear').click(function () {
        $('#demo' + '_dummy').val('');
        return false;
    });    
});