mobifyjs Scaled Transitions carousel layout not working with single m-item element

I'm using the carousel plugin with the Scaled Transitions layout (https://www.mobify.com/mobifyjs/modules/carousel-examples/), and generate m-item objects dynamically using angularJS.

Whenever I apply filters in angular, to limit the amount of elements (m-items), I noticed that the carousel is not displaying an image when there is only one m-item element.

Is this a bug? Of can it be solved by configuration?

Aug 29 '14 11:08 jwamsterdam

No one who could help me with this issue? Or did I post in the wrong github topic?

Sep 09 '14 09:09 jwamsterdam

Hey @jwamsterdam you might want to try our updated Scooch module:

http://github.com/mobify/scooch

It replaces the old Carousel plugin. Most likely, you'll need to re-initialize the carousel after you dynamically change the number of items contained it in.

Sep 09 '14 17:09 johnboxall

Hi @johnboxall thnx for your reply, but even with scooch, I have the same issue.

Limiting the m-items to only one instance hides the image..

<!-- the viewport -->
<div class="m-scooch m-scaled m-center">
  <!-- the slider -->
  <div class="m-scooch-inner">
    <!-- the items -->
    <div class="m-item m-active">
      <img src="image.jpg">
    </div>
  </div>
</div>

Sep 09 '14 20:09 jwamsterdam

@jwamsterdam can you point me to a public page showing an example?

Here is a page with just one item in the carousel:

http://mobifyjohn.s3.amazonaws.com/mobifyjs-279/index.html

Sep 09 '14 23:09 johnboxall

Hi @johnboxall ,

for now, I am unable to post to a webspace, so perhaps you could copy paste the below code to a html doc, and see what I mean. (there are no local files required in the below code).

btw. The second issue I have is that although I use m-center, the image is not centered..

<!DOCTYPE html>
<html>
<head>
<!-- include scooch.css -->
<link rel="stylesheet" href="https://cdn.mobify.com/modules/scooch/0.3.3/scooch.min.css">
<link rel="stylesheet" href="https://cdn.mobify.com/modules/scooch/0.3.3/scooch-style.min.css">
</head>
<body>
Multiple elements

<!-- the viewport -->
<div class=" m-scooch m-scaled m-center">
  <!-- the slider -->
  <div class="m-scooch-inner">
    <!-- the items -->
    <div class="m-item m-active">
      <img src="https://mobify.github.io/static/img/scooch/scooch_1.jpg">
    </div>
    <div class="m-item">
      <img src="https://mobify.github.io/static/img/scooch/scooch_1.jpg">
    </div>
    <div class="m-item">
      <img src="https://mobify.github.io/static/img/scooch/scooch_1.jpg">
    </div>
  </div>
  <!-- the controls -->
  <div class="m-scooch-controls m-scooch-bulleted">
    <a href="#" data-m-slide="prev">Previous</a>
    <a href="#" data-m-slide="1" class="m-active">1</a>
    <a href="#" data-m-slide="2">2</a>
    <a href="#" data-m-slide="3">3</a>
    <a href="#" data-m-slide="next">Next</a>
  </div>
</div>

Single element

<!-- the viewport -->
<div class=" m-scooch m-scaled m-center">
  <!-- the slider -->
  <div class="m-scooch-inner">
    <!-- the items -->
    <div class="m-item m-active">
      <img src="https://mobify.github.io/static/img/scooch/scooch_1.jpg">
    </div>
  </div>
  <!-- the controls -->
  <div class="m-scooch-controls m-scooch-bulleted">
    <a href="#" data-m-slide="prev">Previous</a>
    <a href="#" data-m-slide="1" class="m-active">1</a>
    <a href="#" data-m-slide="next">Next</a>
  </div>
</div>

<!-- include zepto.js or jquery.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
<!-- include scooch.js -->
<script src="https://cdn.mobify.com/modules/scooch/0.3.3/scooch.min.js"></script>
<!-- construct the carousel -->
<script>$('.m-scooch').scooch()</script>
</body>
</html>

Sep 10 '14 15:09 jwamsterdam

Removing the m-center class makes the m-item visible again, but I don't think this is the solution ;-)

Sep 11 '14 17:09 jwamsterdam