Adjust carousel on the offer list page

Fixes #596

oscar/static/oscar/js/oscar/ui.js

@@ -117,9 +117,14 @@ var oscar = (function(o, $) {
                 var gallery = $(this).parent('.rg-thumbs').length;
                 // Don't apply this to the gallery carousel
                 if (gallery <= 0) {
+                    var imageWidth = 175,
+                        minProducts = 4;
+                    if ($(this).hasClass('wide')) {
+                        minProducts = 5;
+                    }
                     $(this).elastislide({
-                        imageW: 175,
-                        minItems: 4,
+                        imageW: imageWidth,
+                        minItems: minProducts,
                         onClick: function() {return true;}
                     });
                 }

oscar/templates/oscar/offer/detail.html

@@ -43,7 +43,7 @@
 		<section>
 			<div class="mod">
 				{% include "partials/pagination.html" %}
-				<ol class="products four">
+				<ol class="products five">
 					{% for product in products %}
                     <li>{% render_product product %}</li>
 					{% endfor %}

oscar/templates/oscar/offer/list.html

@@ -25,26 +25,25 @@
         <p>{% trans "There are no site offers at the moment." %}</p>
     {% else %}
         {% for offer in offers %}
-        <div class="well">
-            <h4>{{ offer.name }}</h4>
-            {% if offer.description %}
-                <p>{{ offer.description|safe }}</p>
-            {% endif %}
-            {% if offer.has_products %}
-                <div class="es-carousel-wrapper">
-                    <div class="es-carousel">
-                        <ul class="products">
-                            {% for product in offer.products|slice:":12" %}
-                            <li>{% render_product product %}</li>
-                            {% endfor %}
-                        </ul>
-                    </div>
+        <h4>{{ offer.name }}</h4>
+        {% if offer.description %}
+            <p>{{ offer.description|safe }}</p>
+        {% endif %}
+        {% if offer.has_products %}
+            <div class="es-carousel-wrapper wide">
+                <div class="es-carousel">
+                    <ul class="products">
+                        {% for product in offer.products|slice:":12" %}
+                        <li>{% render_product product %}</li>
+                        {% endfor %}
+                    </ul>
                 </div>
-                <p>
-                    <a class="btn" href="{% url offer:detail offer.slug %}">{% trans "Browse products in offer" %}</a>
-                </p>
-            {% endif %}
-        </div>
+            </div>
+            <p>
+                <a class="btn" href="{% url offer:detail offer.slug %}">{% trans "Browse products in offer" %}</a>
+            </p>
+        {% endif %}
+        <hr/>
         {% endfor %}
     {% endif %}
 {% endblock content %}