Owl carousel encore transitions alors que seulement 1 diapositive carrousel
Je me demande si quelqu'un pouvait nous aider. Je suis à l'aide de carrousel dans un CMS et serait, comme la possibilité pour le client de parfois seulement 1 faites glisser, s'ils le souhaitent. Toutefois, si seulement 1 diapositive est-il le fondu de transition se produit encore il essentiellement des transitions à lui-même. Est-il possible d'arrêter le carrousel de la transition quand il ya seulement 1 diapositive? Je suis surpris de constater que ce n'est pas une fonction intégrée comme il a été avec d'autres carrousels j'ai utilisé.
<div id="owl-demo" class="owl-carousel">
<div class="item">
<h2><umbraco:Item field="bigMessage" stripParagraph="true" convertLineBreaks="true" runat="server" /></h2>
<p><umbraco:Item field="messageSubtext" stripParagraph="true" convertLineBreaks="true" runat="server" /></p>
<umbraco:image runat="server" field="bannerImage" />
</div>
</div>
<script src="/owl-carousel/owl.carousel.js"></script>
<style>
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}
</style>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation: false,
stopOnHover: true,
paginationSpeed: 1000,
autoPlay: 5000,
goToFirstSpeed: 2000,
autoHeight : true,
transitionStyle:"fade",
singleItem: true
//"singleItem:true" is a shortcut for:
//items : 1,
//itemsDesktop : false,
//itemsDesktopSmall : false,
//itemsTablet: false,
//itemsMobile : false
});
});
</script>
OriginalL'auteur user3001694 | 2013-11-17
Vous devez vous connecter pour publier un commentaire.
Pour la nouvelle version beta voir ci-dessous
Owl Carousel 1.3.2
Dans ce version, il ne semble pas que le plugin a un paramètre pour cela. Vous pouvez le faire sur votre propre, que ce soit avant ou après le plugin a été initialisé.
Option 1 - avant l'initialisation du plugin
La meilleure approche serait pour vous de détecter cette situation avant l'initialisation du plugin tout à fait.
Par exemple:
Option 2 - après l'initialisation du plugin
Cela pourrait être le cas que vous êtes en s'appuyant sur le plugin, également, de style et d'ajuster de façon dynamique l'élément. Dans cette situation, vous pouvez détecter il n'y a qu'une diapositive après l'initialisation, puis arrêter les transitions. Vous pouvez faire cela avec le
afterInit
de rappel et lastop
méthode.Par exemple:
Owl Carousel 2 Beta
Dans cette nouvelle version rajeunie du plugin, l'API a été complètement remplacé. Les mêmes approches sont encore possible, mais la mise en œuvre est un peu différent.
Option 1 - avant l'initialisation du plugin
La nouvelle API inclut désormais une option nommée
autoplay
, qui permet de contrôler directement le carrousel du comportement une fois qu'il est initialisé. Par défaut, cette option est définie surfalse
, mais nous pouvons la définir comme nous s'il vous plaît selon le nombre de diapositives.Par exemple:
Alternativement, selon le nombre de diapositives, on peut aussi choisir de ne pas initialiser le plugin tout à fait, comme nous l'avons fait dans la précédente version (voir option 1 ci-dessus).
Option 2 - après l'initialisation du plugin
Comme dans la version précédente, si vous devez initialiser le plugin (et si vous devez avoir la
autoplay
optiontrue)
, vous pouvez également arrêter le manège après l'initialisation. Cependant, dans cette version, l'initialisation de l'option de rappel est maintenant nomméonInitialized
. Aussi, il n'y a pas de direct.stop()
méthode. Au lieu de cela, vous aurez besoin pour déclencher laautoplay.stop.owl
événement du carrousel.Par exemple:
Juste pour faire sûr que vous avez changé
#owl-demo
à vos propres sélecteur de, droite?bien sûr, essayé sur le owl carousel pages de démonstration..
Mise à jour de la réponse à inclure la nouvelle version bêta.
Évidemment, cela dépend de votre balisage spécifique. Si les articles ne sont pas des descendants directs du conteneur principal, puis vous aurez besoin d'utiliser la
find
méthode.OriginalL'auteur Boaz
Vous pouvez vérifier si il y a 1 article dans votre carrousel et activer "autoplay", ou pas. Dans votre cas, il sera comme ci-dessous.
OriginalL'auteur Baris
Fait ceci au lieu de cela depuis que je suis déjà à l'aide des exportations pour le réglage des trucs:
OriginalL'auteur David Karlsson
OriginalL'auteur ollio
J'ai remarqué que le problème avec Owl Carousel, et un seul élément, c'est que l'objet n'a pas d'indiquer si vous souhaitez que le carrousel à être bouclé.
Ci-dessous est un code que vous devriez mettre de l'avant le carrousel est lancé, j'ai ajouté un spectacle et se cacher de la valeur liquidative de l'option ainsi - parce que vous ne voulez pas afficher les éléments de navigation pour un "non bouclés" slide:
OriginalL'auteur Alex
Insérer un if/else dans la partie du script de la bannière.tlp comme ceci:
Il fonctionne bien avec la version de owl carousel qui est inclus dans Opencart 2.2.0.
OriginalL'auteur Keyser Söze
OriginalL'auteur narsi