Plugin with error Uncaught TypeError: Can not read property 'clone' of undefined

Question

Plugin with error Uncaught TypeError: Can not read property 'clone' of undefined

Navigation

#1 by (1 votes)

0

I'm using a plugin called Owl Carousel and I'm having a problem, if the carcel only has an image and an error message is sent to me, that's it:

Uncaught TypeError: Can not read property 'clone' of undefined

I read the documentation but did not find the solution, if I have more than one image everything works perfectly but one does not.

The complete console message is this, I am inserting as a snippet as the code sample is getting all unconfigured.

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 page under development can be seen here: Development

owl-carousel

asked by anonymous 09.10.2018 / 13:27

1 answer

Convert JSON Java Android - MOIP Add indicator on Materialize CSS tabs

score 1 · Accepted Answer

I was able to solve my problem with a check of the number of records returned from the search, half tabajara but it worked, I made a IF to show the class when there is more than Thumb generated, otherwise it shows normally a large image, with more than Thumb , shows the large image and carrocel , I 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  } ?>