https://www.xn--espaaescultura-tnb.es/.resources/templating/base/js/slides~2026-09-15-06-18-50-000~cache.js

1// Nueva 13/09/2017
2$(function() {
3  $('[id^=slides]').slidesjs({
4    width: 972,
5    height: 417,
6    play: {
7      effect: "fade",
8      active: true,
9      auto: true,
10      interval: 4000,
11      swap: true
12    },
13    navigation: {
14      effect: "slide"
15    },
16    pagination: {
17      effect: "fade"
18    },
19    effect: {
20      fade: {
21        speed: 600,
22        crossfade: true
23      }
24    }
25  });
26});
27
28$(document).ready(function() {
29  function initCarousel($carousel) {
30      let $slides = $carousel.find('.slideDes');
31      let totalSlides = $slides.length;
32      let currentIndex = 0;
33      $slides.addClass('fade');
34      $slides.removeClass('active'); // Quitamos la clase active de todas las diapositivas
35
36      // Mostrar los primeros slides seg�n el tama�o de la pantalla
37      let numVisibleSlides = 3;
38      if ($(window).width() < 1000) {
39          numVisibleSlides = 2;
40      }
41      if ($(window).width() < 700) {
42          numVisibleSlides = 1;
43      }
44
45      $slides.slice(currentIndex, currentIndex + numVisibleSlides).addClass('active');
46
47      // Eliminar botones de navegaci�n existentes
48      $carousel.find('.arrow').remove();
49
50      // Agregar o quitar clases seg�n el n�mero de diapositivas y el tama�o de la pantalla
51      if (totalSlides > 3 && $(window).width() >= 1000) {
52          addBtns();
53      } else if (totalSlides > 2 && $(window).width() < 1000) {
54          addBtns();
55      } else if (totalSlides > 1 && $(window).width() < 700) {
56          addBtns();
57      }
58      // Funci�n para manejar el comportamiento de los botones
59      function addBtns() {
60          let prevBtn = $('<button class="arrow prev prev-btn">&#8592;</button>');
61          let nextBtn = $('<button class="arrow next next-btn">&#8594;</button>');
62
63          $carousel.append(prevBtn);
64          $carousel.append(nextBtn);
65
66          // Evento de clic para el bot�n "anterior"
67          prevBtn.click(function() {
68              currentIndex--; // Retroceder a la imagen anterior
69              if (currentIndex < 0) {
70                  currentIndex = totalSlides - 1; // Si estamos en la primera imagen, ir a la �ltima
71              }
72              updateSlides();
73          });
74
75          // Evento de clic para el bot�n "siguiente"
76          nextBtn.click(function() {
77              currentIndex++; // Avanzar a la siguiente imagen
78              if (currentIndex >= totalSlides) {
79                  currentIndex = 0; // Si estamos en la �ltima imagen, ir a la primera
80              }
81              updateSlides();
82          });
83      }
84
85      // Funci�n para actualizar las clases de las im�genes
86      function updateSlides() {
87          // Remover la clase 'active' de todas las diapositivas
88          $slides.removeClass('active');
89
90          // Calcular el �ndice del primer slide visible
91          let startIndex = currentIndex % totalSlides;
92
93          // Array para almacenar temporalmente las diapositivas en el orden correcto
94          let reorderedSlides = [];
95
96          for (let i = 0; i < numVisibleSlides; i++) {
97              let index = (startIndex + i) % totalSlides; // Calcular el �ndice circular
98              $slides.eq(index).addClass('active');
99              reorderedSlides.push($slides.eq(index)); // Agregar la diapositiva al array
100          }
101
102          // Agregar las diapositivas restantes al array sin la clase 'active'
103          for (let i = 0; i < totalSlides; i++) {
104              if (!$slides.eq(i).hasClass('active')) {
105                  reorderedSlides.push($slides.eq(i));
106              }
107          }
108
109          // Reemplazar las diapositivas en el DOM con las diapositivas reordenadas
110          $carousel.find('.slideDes').remove();
111          $carousel.append(reorderedSlides);
112      }
113  }
114
115  // Inicializar el carrusel para cada elemento con ID que comience con "carruselDes"
116  $('[id^="carruselDes"]').each(function() {
117      initCarousel($(this));
118  });
119
120  // Volver a inicializar el carrusel cuando cambie el tama�o de la ventana
121  $(window).resize(function() {
122      $('[id^="carruselDes"]').each(function() {
123          initCarousel($(this));
124      });
125  });
126});
127