Error plugin Uncaught Typeerror: Cannot read Property 'clone' of Undefined

Asked

Viewed 215 times

0

I’m using a plugin called Owl Carousel and I’m having a problem, if the carousel has only one image me is sent an error message, that is this:

Uncaught Typeerror: Cannot read Property 'clone' of Undefined

I read the documentation but I could not find the solution, if I have more than one image everything works perfectly but a no.

The complete message of the console is this, I am inserting as an excerpt because the code sample is getting all disfigured.

Uncaught TypeError: Cannot read property 'clone' of undefined
at e.run (owl.carousel.min.js:1)
at Object.e [as run] (jquery-1.11.1.min.js:2)
at e.update (owl.carousel.min.js:1)
at e.refresh (owl.carousel.min.js:1)
at e.initialize (owl.carousel.min.js:1)
at new e (owl.carousel.min.js:1)
at HTMLDivElement.<anonymous> (owl.carousel.min.js:1)
at Function.each (jquery-1.11.1.min.js:2)
at m.fn.init.each (jquery-1.11.1.min.js:2)
at m.fn.init.a.fn.owlCarousel (owl.carousel.min.js:1)

The code that shows the images is this:

<div class="owl-carousel img-carousel">
   <?php foreach($ResImagemGrande as $ResImgGrande) {  
		 $ImgProduto = substr($ResImgGrande->Caminho,3);								
	?>
	<div class="item">
		<a class="btn btn-theme btn-theme-transparent btn-zoom" href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><i class="fa fa-plus"></i></a>
		<a href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><img class="img-responsive" src="<?php echo $ImgProduto; ?>" alt=""/></a>
	</div>
	<?php } ?>
</div>


<div class="row product-thumbnails">
<?php 
	$i = -1;	
	foreach($ResImagemPequena as $ResImgPequena) { 
	$i++;	
	$ImgProdutoThumbs = substr($ResImgPequena->CaminhoThumbs,3);	
?>

	<div class="col-xs-2 col-sm-2 col-md-3">
	<a href="#" onclick="jQuery('.img-carousel').trigger('to.owl.carousel', [<?php echo $i ?>,300]);"><img src="<?php echo $ImgProdutoThumbs; ?>" alt=""/></a>                            
	</div>
<?php } ?>  
</div>

The developing page can be seen here: Developing

owl-carousel

  • Can add the code you are using to add Carousel to the images in the question?

  • Added requested code @edsonalves.

  • Oops, but don’t you have a snippet of the JS you use to add the plugin to the DOM? It should look like $('.owl-carousel').owlCarousel(...);

  • Hello @edsonalves, on the page I have this call here: <script src="https://rendamaislingerie.com.br/assets/plugins/owl-carousel2/owl.carousel.min.js"></script>

1 answer

1


I was able to solve my problem with a check of the amount of records returned from the survey, means tabajara but it worked, I made a IF to display the class when there is more than one Thumb otherwise it normally shows a large image, with more than one Thumb, shows the large image and the carrocel, did so:

<!-- MOSTRAR OU NÃO CARROCEL -->                   
<div <?php if ($ContRegImgPequena > 1) { ?> class="owl-carousel img-carousel" <?php } ?> >
<?php foreach($ResImagemGrande as $ResImgGrande) {  
		$ImgProduto = substr($ResImgGrande->Caminho,3);								
	?>
	<div class="item">
		<a class="btn btn-theme btn-theme-transparent btn-zoom" href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><i class="fa fa-plus"></i></a>
		<a href="<?php echo $ImgProduto; ?>" data-gal="prettyPhoto"><img class="img-responsive" src="<?php echo $ImgProduto; ?>" alt=""/></a>
	</div>
	<?php } ?>
</div>
<!-- MOSTRAR OU NÃO CARROCEL -->          
<?php if ($ContRegImgPequena > 1) { ?>        
<div class="row product-thumbnails">
<?php 
	$i = -1;	
	foreach($ResImagemPequena as $ResImgPequena) { 
	$i++;	
	$ImgProdutoThumbs = substr($ResImgPequena->CaminhoThumbs,3);	
?>

	<div class="col-xs-2 col-sm-2 col-md-3">
	<a href="#" onclick="jQuery('.img-carousel').trigger('to.owl.carousel', [<?php echo $i ?>,300]);"><img src="<?php echo $ImgProdutoThumbs; ?>" alt=""/></a>                            
	</div>
 <?php } ?>  
</div>
<?php  } ?>

Browser other questions tagged owl-carousel

You are not signed in. Login or sign up in order to post.