Skip to content
This repository has been archived by the owner on Aug 5, 2020. It is now read-only.

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

Open
jwamsterdam opened this issue Aug 29, 2014 · 6 comments
Open

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

jwamsterdam opened this issue Aug 29, 2014 · 6 comments

Comments

@jwamsterdam
Copy link

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?
@jwamsterdam
Copy link
Author

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

@johnboxall
Copy link
Member

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.

@jwamsterdam
Copy link
Author

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>

@johnboxall
Copy link
Member

@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

@jwamsterdam
Copy link
Author

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>

@jwamsterdam
Copy link
Author

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@johnboxall @jwamsterdam