I am looking for some code related help about Carousel. Currently i have 6 related products under product page. but i need to show them as a sliding carousel in one row, with next and previous button (or arrow mark). Auto sliding is not necessary.
My related product code is below:
Code: Select all
<br>
{% if products %}
<h3>{{ text_related }}</h3>
<div class="row"> {% set i = 0 %}
{% for product in products %}
{% if column_left and column_right %}
{% set class = 'col-xs-8 col-sm-6' %}
{% elseif column_left or column_right %}
{% set class = 'col-xs-6 col-md-4' %}
{% else %}
{% set class = 'col-xs-6 col-sm-3' %}
{% endif %}
<div class="{{ class }}">
<div class="product-thumb transition">
<div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a></div>
<div class="caption">
<h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
{% if product.rating %}
<div class="rating"> {% for j in 1..5 %}
{% if product.rating < j %} <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span> {% else %} <span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span> {% endif %}
{% endfor %} </div>
{% endif %}
{% if product.price %}
<p class="price"> {% if not product.special %}
{{ product.price }}
{% else %} <span class="price-new">{{ product.special }}</span> <span class="price-old">{{ product.price }}</span> {% endif %}
{% if product.tax %} <span class="price-tax">{{ text_tax }} {{ product.tax }}</span> {% endif %} </p>
{% endif %} </div>
</div>
</div>
{% if column_left and column_right and (i + 1) % 2 == 0 %}
<div class="clearfix visible-md visible-sm"></div>
{% elseif column_left or column_right and (i + 1) % 3 == 0 %}
<div class="clearfix visible-md"></div>
{% elseif (i + 1) % 4 == 0 %}
<div class="clearfix visible-md"></div>
{% endif %}
{% set i = i + 1 %}
{% endfor %} </div>
{% endif %}
{% if tags %}
<p>{{ text_tags }}
{% for i in 0..tags|length %}
{% if i < (tags|length - 1) %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a>,
{% else %} <a href="{{ tags[i].href }}">{{ tags[i].tag }}</a> {% endif %}
{% endfor %} </p>
{% endif %}
<br>