document.addEventListener('DOMContentLoaded', function() {
const items = [
    {
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_04.jpg',
        title: '105/115 Bertone GT',
        url: 'https://vtiengineering.com/car-model/105-115-bertone-gt/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_06.jpg',
        title: 'A4 Prestige',
        url: 'https://vtiengineering.com/car-model/a4-prestige/'
	},
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_05.jpg',
        title: '101 Giulietta / Giulia',
        url: 'https://vtiengineering.com/car-model/101-giulietta-giulia/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_04.jpg',
        title: '105/115 Berlina',
        url: 'https://vtiengineering.com/car-model/105-115-berlina/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_03.jpg',
        title: '105/115 Giulia',
		url: 'https://vtiengineering.com/car-model/105-115-giulia/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_02.jpg',
        title: '105/115 Spider',
		url: 'https://vtiengineering.com/car-model/105-115-spider/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_01.jpg',
        title: '156',
		url: 'https://vtiengineering.com/car-model/156/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_04.jpg',
        title: '75 Milano',
		url: 'https://vtiengineering.com/car-model/75-milano/'
    },
	{
        imgUrl: 'https://vtiengineering.com/wp-content/uploads/2025/04/Modelos_05.jpg',
        title: '750 Giulietta',
		url: 'https://vtiengineering.com/car-model/750-giulietta/'
    },
];

    const contenedorItems = document.getElementById('contenedor-items');

    if (contenedorItems) {
        items.forEach(item => {
            const itemHTML = `
                <div class="swiper-slide mi-item">
                    <div class="mi-banner-envoltura">
                        <a href="${item.url}">
  							<div class="mi-imagen-contenedor">
                                <img src="${item.imgUrl}" alt="${item.title}">
                            </div>                            <div class="mi-banner-contenido">
                                <a>${item.title}</a>
                            </div>
                        </a>
                    </div>
                </div>
            `;
            contenedorItems.innerHTML += itemHTML;
        });

        // Inicializar Swiper
        const swiper = new Swiper('.swiper', {
            slidesPerView: 5, // Número de slides visibles
            spaceBetween: 20, // Espacio entre slides
//             pagination: {
//                 el: '.swiper-pagination',
//                 clickable: false,
//             },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
              breakpoints: {
                320: { // Para pantallas de 320px o más pequeñas
                    slidesPerView: 2,
                    spaceBetween: 10
                },
                480: { // Para pantallas de 480px o más pequeñas
                    slidesPerView: 3,
                    spaceBetween: 10
                },
                768: { // Para pantallas de 768px o más pequeñas
                    slidesPerView: 3,
                    spaceBetween: 15
                },
                1024: { // Para pantallas de 1024px o más pequeñas
                    slidesPerView: 5,
                    spaceBetween: 20
                },
                1200: { // para pantallas de 1200px o mas grandes
                    slidesPerView: 7,
                    spaceBetween: 20
                }
            }
        });
    } else {
        console.error('Elemento con id "contenedor-items" no encontrado.');
    }
});