DRBU Component Library

Trots 

<div class="js-trots trots">
    <div class="trots_treaders">
        <div class="trots_treads trots_treads_forwards">
            <div class="trots_inner">
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/375x338/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/337x374/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/342x357/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/332x351/4" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/342x312/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/326x366/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/369x341/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/369x375/4" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/373x346/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/363x317/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/346x378/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/308x380/4" />
            </div>
        </div>
        <div class="trots_treads trots_treads_backwards">
            <div class="trots_inner">
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/337x352/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/389x360/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/341x342/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/309x351/4" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/384x391/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/395x390/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/366x386/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/363x356/4" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/399x376/1" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/367x360/2" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/355x303/3" />
                <img class="trots_image" alt="" src="https://images.fastspot.com/framework/358x387/4" />
            </div>
        </div>
    </div>
</div>
 
<div class="js-trots trots">
	<div class="trots_treaders">
		<div class="trots_treads trots_treads_forwards">
			<div class="trots_inner">
				{% for item in items|batch(items|length / 2, '')|first %}
					<img class="trots_image" alt="" src="https://images.fastspot.com/framework/{{random(100) + 300}}x{{ random(100) + 300 }}/{{ item.image }}" />
				{% endfor %}
			</div>
		</div>
		<div class="trots_treads trots_treads_backwards">
			<div class="trots_inner">
				{% for item in items|batch(items|length / 2, '')|last %}
					<img class="trots_image" alt="" src="https://images.fastspot.com/framework/{{random(100) + 300}}x{{ random(100) + 300 }}/{{ item.image }}" />
				{% endfor %}
			</div>
		</div>
	</div>
</div>

No notes defined.