Fórum OpenCart Brasil

[Wennderson]

"SlideShow" Pagina Inicial

Estou usando a versão "2.1.0.1" antigamente eu usava a versão 1.6.4 e quando agente coloca o mouse em cima do Banner - "SlideShow" na versão 1.6.4 para e só continuar a após retirá o mouse. E na versão atualizada "2.1.0.1" o "SlideShow" não para quando coloca o mouse sobre o banner, e muitas vezes agente adicione varias informações no banner e o usuário quer ler, mais o "SlideShow" não para assim o usuário não tem como ler as informações... tem alguma maneira simples de fazer o "SlideShow" pausar quando o usuário colocar o mouse......

[valdeir2000]

Isso vai variar de tema para tema e de qual código o tema utiliza para os slides. Caso não seja o tema padrão recomendo pedi auxílio ao dev.

[Wennderson]

Eu uso o tema padrão http://demo.opencart.com/

Segue o caminho do tema: SlideShow

catalog/view/theme/default/template/module/slideshow

__________________________________________________________________________

<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>

[valdeir2000]

http://owlgraphic.com/owlcarousel/#how-to > Procura por stopOnHover

[Wennderson]

Obrigado....
consegui encontrar o código no site qui você indicou

//Pausar "SlideShow" quando colocar o mouse em cima do Banner

stopOnHover : true,

Adicionei abaixo de "autoPlay: 3000,"

Funcionou corretamente - Ficou assim todo o código abaixo
_________________________________________________________

<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
autoPlay: 3000,
stopOnHover : true,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
});
--></script>

[A MS]

http://owlgraphic.com/owlcarousel/#how-to > Procura por stopOnHover

Cliquei neste link e está com vírus...

[reds]

Ola @A MS

Realmente o link mudou, por motivos desconhecidos o desenvolvedor moveu o projeto para uma nova URL
https://owlcarousel2.github.io/OwlCarousel2/

Notado que esta é a nova versão, por fim os comandos são relativamente idênticos.