Realizado

Correção de funções da bibloteca Owl Carrousel em Iphone

Publicado em 02 de Setembro de 2023 dias na TI e Programação

Sobre este projeto

Aberto

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>

Categoria TI e Programação
Subcategoria Programação
Qual é o alcance do projeto? Bug ou alteração pequena
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Não se aplica
Disponibilidade requerida Conforme necessário
Funções necessárias Desenvolvedor

Prazo de Entrega: 03 de Setembro de 2023

Habilidades necessárias

Outro projetos publicados por M. G.