Possuo um site com filtros de anos e publicações em carrousel, porém em alguns iPhones, o carrousel trava o site por completo, pode ser conflito entre outras bibliotecas do meu projeto.
<Script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!--<script type="text/javascript" src="js/
jquery-3.5.1.min.js"></script>-->
<script type="text/javascript" src="js/
owl.carousel.min.js"></script>
<script src="lib/owlcarousel/
owl.carousel.js"></script>
<script src="
https://huynhhuynh.github.io/owlcarousel2-filter/dist/owlcarousel2-filter.min.js"></script>
<script type="text/javascript" src="js/
isotope.pkgd.min.js"></script>
<section id="gallery">
<div class="container align-center mt-30">
<div class="works-filter">
<!-- <a href="" class="filter active" data-filter=".list-all" id="all-button">all</a>
<a href="#" class="filter year" id="year-button">year</a> -->
<a class="filter active item" data-owl-filter="*" id="all-button">all</a>
<a href="#" class="filter year" id="year-button">year</a>
</div>
<div class="works-filter postagens" id="year-menu" style="display: none;">
<li class="postagem postagem-ano postagem-2023 filter postagem-ano item" data-owl-filter=".year_2023">2023</li>
<li class="postagem postagem-ano postagem-2022 filter postagem-ano item" data-owl-filter=".year_2022">2022</li>
<li class="postagem postagem-ano postagem-2021 filter postagem-ano item" data-owl-filter=".year_2021">2021</li>
<li class="postagem postagem-ano postagem-2020 filter postagem-ano item" data-owl-filter=".year_2020">2020</li>
<li class="postagem postagem-ano postagem-2019 filter postagem-ano item" data-owl-filter=".year_2019">2019</li>
<li class="postagem postagem-ano postagem-2018 filter postagem-ano item" data-owl-filter=".year_2018">2018</li>
<!-- <li class="postagem postagem-ano postagem-2023 filter postagem-ano year-item" data-year="2023">2023</li>
<li class="postagem postagem-ano postagem-2022 filter postagem-ano year-item" data-year="2022">2022</li>
<li class="postagem postagem-ano postagem-2021 filter postagem-ano year-item" data-year="2021">2021</li>
<li class="postagem postagem-ano postagem-2020 filter postagem-ano year-item" data-year="2020">2020</li>
<li class="postagem postagem-ano postagem-2018 filter postagem-ano year-item" data-year="2018">2018</li> -->
</div>
<!--<div class="list-all list-all-desktop">-->
<div class="list-all">
<div class="home-demo">
<div class="row">
<div class="large-12 columns">
<div class="owl-carousel" id="carousel-container">
<?php
$noticiasDao = new \Dao\Noticias();
$lst_noticias = $noticiasDao->Getlista($conecta, 'order by data desc');
foreach ($lst_noticias as $item) {
echo '
<div class="work-item-2 postagem-' . Date('Y', strtotime($item->data)) . ' Year_' . Date('Y', strtotime($item->data)) . '" Data-year="' . Date('Y', strtotime($item->data)) . '">
<A href="'. $Item->link .'" Target="_blank" class="lp-item text-center">
<div class="lp-image-container">
<div class="lp-image" style="position: relative;">
<img src="' . AUrl . 'Uploads/noticias/' . $Item->image . '" Style="width: 100%;" alt="" />
</div>
</div>
<div class="work-intro-2">
<h3 class="work-title">' . $Item->titulo . '</H3>
<div class="work-descr">
' . Stripslashes($item->subtitulo) . '
</Div>
</div>
</a>
</div>
';
}
?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Botões de navegação -->
<div class="owl-nav">
<button class="owl-prev">Anterior</button>
<button class="owl-next">Próximo</button>
</div>
<style>
.owl-carousel .owl-item .work-item-2 {
transition: all 1.5s ease-in-out !important;
}
</style>
<script>
$(document).ready(function() {
// Armazene os itens originais
var originalItems = $('.owl-carousel').children().clone();
// Opções para o carrossel
var carouselOptions = {
//margin: 10,
nav: true,
navText: ['Prev', 'Next'],
dots: false,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
slideTransition: 'ease-in-out',
smartSpeed: 1200,
responsive: {
0: { items: 1 },
600: { items: 2 },
1000: { items: 3 }
}
};
// Inicialize o carrossel pela primeira vez
var owl = $('.owl-carousel').owlCarousel(carouselOptions);
// Adicionando o evento de clique ao botão "Year"
$("#year-button").on("click", function(event) {
event.preventDefault();
$("#year-menu").toggle();
});
// Filtragem de itens no carrossel
$('.works-filter').on('click', '.item', function() {
var filter = $(this).data('owl-filter');
owl.owlcarousel2_filter(filter);
});
});
</script>
</section>
Prazo de Entrega: 03 de Setembro de 2023