Carousel problem

Rossella_Mascia · September 18, 2019, 7:42am

I have a problem with this carousel, that is the page is loaded but it gives me error only on mobile

The code is this:

<section class="d-block d-md-none" style="padding-top:30px;margin-bottom:0px;">

<div style="text-align:center; color: black; font-family: 'Roboto'; font-size: 22px; font-weight:700; text-transform: uppercase;">
    <?php echo $pages->find('eventi')->sottotitolo();?><span style="font-weight:200;"> &nbsp;<?php echo $pages->find('eventi')->brevedescrizione();?></span></div>
  <div class="container">
  <div class="row" style="padding-top:10px; padding-bottom:30px;">

    <div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'items': 4, 'margin': 10, 'autoplay': true, 'loop': true, 'nav': true, 'dots': false, 'stagePadding': 40, 'autoplayTimeout': 3000}">
			<?php $eventi = $pages->find('eventi')->children()->map(function($page) {
		$page->timestampfield = strtotime($page->datestart());
		return $page;
		})->sortBy('timestampfield', 'desc');
		$eventi = $eventi->map(function($page) {
		$page->timestampfield = strtotime($page->pubblica());
		return $page;
		})->filterBy('timestampfield','<=',time());
		$eventi = $eventi->limit(40);
		?>

    <?php foreach($eventi as $evento):?>
    <div style="padding-top:20px; padding-left:10px; padding-right:10px;">
    <a href="<?php echo $evento->url();?>" style="text-decoration:none;">
       <span class="thumb-info  thumb-info-no-overlay ">
      													<span class="thumb-info-wrapper">
    <img src="
<?php echo thumb($evento->image(), array('width' => 800, 'height' => 800, 'crop' => true))->url();?>" class="img-fluid">
</span></span>
<div style="padding-top:15px; font-family: 'Roboto'; min-height:40px; font-size: 20px; color: black; font-weight: 700; text-transform: uppercase; line-height:20px !important;">
  <?php echo $evento->title();?></div></a>
  <div class="post-date ml-0">

    <?php
setlocale(LC_TIME, 'it_IT');
$datainizio = $evento->datestart();
$datainizio = strtotime($datainizio);
   $giornoinizio = utf8_encode( strftime("%d ", $datainizio) );

   $meseinizio = utf8_encode( strftime("%b", $datainizio) );?>
										<span class="day"><?php echo $giornoinizio?></span>
										<span class="month"><?php echo $meseinizio?></span>
									</div><div style="padding-top: 10px; font-family: 'Roboto'; min-height:55px; font-size: 16px; color: black; font-weight: 400; line-height:17px !important;"><?= excerpt($evento->text(),80) ?></div>

<hr class="gradient">
</div>

<?php endforeach; ?>
</div>

</div>
</div>




</section>




		<section class="d-none d-md-block" style="padding-top:30px;margin-bottom:0px;">

<div style="text-align:center; color: black; font-family: 'Roboto'; font-size: 22px; font-weight:700; text-transform: uppercase;">
    <?php echo $pages->find('news')->sottotitolo();?><span style="font-weight:200;"> &nbsp;<?php echo $pages->find('news')->brevedescrizione();?></span></div>
  <div class="container">
  <div class="row" style="padding-top:10px; padding-bottom:30px;">
 <?php if ($pages->find('news')->children()->count() >= 1):?>
    <div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'items': 4, 'margin': 10, 'autoplay': true,'loop': true, 'nav': true, 'dots': false, 'stagePadding': 40,'autoplayTimeout': 3000}">
			<?php $eventi = $pages->find('news')->children()->map(function($page) {
		$page->timestampfield = strtotime($page->datestart());
		return $page;
		})->sortBy('timestampfield', 'desc');
		$eventi = $eventi->map(function($page) {
		$page->timestampfield = strtotime($page->pubblica());
		return $page;
		})->filterBy('timestampfield','<=',time());
		$eventi = $eventi->limit(40);
		?>

 <?php foreach($eventi as $evento):?>
    <div style="padding-top:20px; padding-left:10px; padding-right:10px;">
    <a href="<?php echo $evento->url();?>" style="text-decoration:none;">
       <span class="thumb-info  thumb-info-no-overlay ">
      													<span class="thumb-info-wrapper">
    <img src="
<?php echo thumb($evento->image(), array('width' => 800, 'height' => 800, 'crop' => true))->url();?>" class="img-fluid">
</span></span>
<div style="padding-top:15px; font-family: 'Roboto'; min-height:40px; font-size: 16px; color: black; font-weight: 700; text-transform: uppercase; line-height:16px !important;">
  <?php echo $evento->title();?></div></a>
  <div class="post-date ml-0">

    <?php
setlocale(LC_TIME, 'it_IT');
$datainizio = $evento->datestart();
$datainizio = strtotime($datainizio);
   $giornoinizio = utf8_encode( strftime("%d ", $datainizio) );

   $meseinizio = utf8_encode( strftime("%b", $datainizio) );?>
										<span class="day"><?php echo $giornoinizio?></span>
										<span class="month"><?php echo $meseinizio?></span>
									</div><div style="padding-top: 10px; font-family: 'Roboto'; min-height:55px; font-size: 12px; color: black; font-weight: 400; line-height:13px !important;"><?= excerpt($evento->text(),80) ?></div>

<hr class="gradient">
</div>

<?php endforeach; ?>
</div><?php else: ?><div class="col-md-12" style="padding-top:80px; padding-bottom:80px; text-align:center; font-weight: 200; color: #272f65; font-family: 'Roboto'; font-size: 22px;">COMING SOON </div><?php endif; ?>

</div>
</div>




</section>

		<section class="d-blcok d-md-none" style="padding-top:30px;margin-bottom:0px;">

<div style="text-align:center; color: black; font-family: 'Roboto'; font-size: 22px; font-weight:700; text-transform: uppercase;">
    <?php echo $pages->find('news')->sottotitolo();?><span style="font-weight:200;"> &nbsp;<?php echo $pages->find('news')->brevedescrizione();?></span></div>
  <div class="container">
  <div class="row" style="padding-top:10px; padding-bottom:30px;">
 <?php if ($pages->find('news')->children()->count() >= 1):?>
    <div class="owl-carousel owl-theme stage-margin" data-plugin-options="{'items': 4, 'margin': 10, 'autoplay': true,'loop': true, 'nav': true, 'dots': false, 'stagePadding': 40,'autoplayTimeout': 3000} ">
			<?php $eventi = $pages->find('news')->children()->map(function($page) {
		$page->timestampfield = strtotime($page->datestart());
		return $page;
		})->sortBy('timestampfield', 'desc');
		$eventi = $eventi->map(function($page) {
		$page->timestampfield = strtotime($page->pubblica());
		return $page;
		})->filterBy('timestampfield','<=',time());
		$eventi = $eventi->limit(40);
		?>

 <?php foreach($eventi as $evento):?>
    <div style="padding-top:20px; padding-left:10px; padding-right:10px;">
    <a href="<?php echo $evento->url();?>" style="text-decoration:none;">
       <span class="thumb-info  thumb-info-no-overlay ">
      													<span class="thumb-info-wrapper">
    <img src="
<?php echo thumb($evento->image(), array('width' => 800, 'height' => 800, 'crop' => true))->url();?>" class="img-fluid">
</span></span>
<div style="padding-top:15px; font-family: 'Roboto'; min-height:40px; font-size: 20px; color: black; font-weight: 700; text-transform: uppercase; line-height:20px !important;">
  <?php echo $evento->title();?></div></a>
  <div class="post-date ml-0">

    <?php
setlocale(LC_TIME, 'it_IT');
$datainizio = $evento->datestart();
$datainizio = strtotime($datainizio);
   $giornoinizio = utf8_encode( strftime("%d ", $datainizio) );

   $meseinizio = utf8_encode( strftime("%b", $datainizio) );?>
										<span class="day"><?php echo $giornoinizio?></span>
										<span class="month"><?php echo $meseinizio?></span>
									</div><div style="padding-top: 10px; font-family: 'Roboto'; min-height:55px; font-size: 16px; color: black; font-weight: 400; line-height:17px !important;"><?= excerpt($evento->text(),80) ?></div>

<hr class="gradient">
</div>

<?php endforeach; ?>
</div><?php else: ?><div class="col-md-12" style="padding-top:80px; padding-bottom:80px; text-align:center; font-weight: 200; color: #272f65; font-family: 'Roboto'; font-size: 22px;">COMING SOON </div><?php endif; ?>

</div>
</div>
</section>

texnixe · September 18, 2019, 7:57am

Maybe there’s a problem with loading all the scripts or whatever. This doesn’t look like a PHP problem.

Although I would recommend

that you put your logic into a controller
that you use snippets to keep your template code clean
that you remove all these inline styles to make your code readable

With so much unstructured code it is easy to loose track, you even redefine your events twice.

Rossella_Mascia · September 18, 2019, 7:59am

how do I embed the code, without writing it twice?

texnixe · September 18, 2019, 8:09am

Ah sorry, I didn’t get that you redefine the timestampfield… Nevertheless, I’d put all that into a controller.

This

setlocale(LC_TIME, 'it_IT');

should be in the config, not in the middle of a template.

Rossella_Mascia · September 18, 2019, 8:19am

do you say in config.php?

Rossella_Mascia · September 18, 2019, 8:25am

however, I have another carousel that uses the same js, which however does not give me the same error

texnixe · September 18, 2019, 8:35am

Is that the Homepage you are showing above? If so, it shows up on my iPhone 6. And as I said, this is not a PHP error, either something server side or some other problem.

Have you tried to clear the browser cache?

Rossella_Mascia · September 18, 2019, 8:37am

yes, I’ve tried it a lot

texnixe · September 18, 2019, 8:40am

Again, does this problem occur on the home page?

And have you tried another browser?

Rossella_Mascia · September 18, 2019, 8:43am

yes, but it is the same

texnixe · September 18, 2019, 8:45am

As I said, the homepage works on my device and you still haven’t answered my question. These issues are not Kirby related, I can’t really help you with this.

Have you tried the suggerimenti? Another device?

texnixe · September 18, 2019, 8:56am

If you run this page in PageSpeed Insights, you will see that there are loads of issues with that page. I’d look into those.

The code you posted above is only a small part of the complete page, so impossible to tell what sort of other issues there might be.

Having a clear code structure help to avoid such stuff. Also, not loading hundreds of JS scripts.

Rossella_Mascia · September 20, 2019, 12:22pm

should only load owl carousel, I tried to do several tests, if someone wants to help me even for a fee, come forward

bnomei · September 21, 2019, 7:33am

https://centroetnapolis.it/ currently works fine on my mobile device - ios 12 firefox and safari.

texnixe · September 21, 2019, 8:00am

As I already said above, I on my device I also had no problem loading the homepage. So the questions I already posted above remains:

What sort of device did you test on? With which browsers?
Or does the error occur on a page other than the homepage?

Topic		Replies	Views
Carousels within accordion not properly displaying js	2	292	March 22, 2023
Image slider with Text on each Image Solved ✅	17	7963	January 11, 2018
If there is less then 1 in count do not show element? Solved ✅	12	338	February 24, 2021
Flickity Carousel displays only the first image Solved ✅	3	3792	August 17, 2018
How to filter only mobile images in a slider Solved ✅	9	734	March 27, 2018

Carousel problem

Related Topics