<style>
.my-hero-slider {
position: relative;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.my-slider-wrapper {
display: flex;
transition: transform 0.3s ease; /* We'll also control it in JS */
will-change: transform;
}
.my-slide {
min-width: 100%;
box-sizing: border-box;
}
/* Prevent default dragging in CSS, too. */
.my-slider-image {
width: 100%;
height: auto;
display: block;
user-select: none;
-webkit-user-drag: none; /* For Safari/Chrome */
}
/* Navigation Arrows */
.my-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
font-size: 2.8rem; /* ~40% bigger than 2rem */
background: rgba(0, 0, 0, 0.4);
color: #fff;
border: none;
cursor: pointer;
padding: 0.7rem 1.4rem; /* bigger click area */
}
.my-arrow.my-prev {
left: 10px;
}
.my-arrow.my-next {
right: 10px;
}
/* Dots at bottom */
.my-dots {
position: absolute;
bottom: 15px;
width: 100%;
text-align: center;
}
.my-dot {
display: inline-block;
height: 14px; /* up from 10px */
width: 14px; /* up from 10px */
margin: 0 7px; /* up from 5px */
background-color: #ccc;
border-radius: 50%;
cursor: pointer;
}
.my-dot.my-active {
background-color: #333;
}
/* Responsive arrow tweak */
@media (max-width: 768px) {
.my-arrow {
font-size: 2rem;
padding: 0.5rem 1rem;
}
}
</style>
<div class="my-hero-slider" id="myHeroSlider">
<div class="my-slider-wrapper">
<!-- Slide 1 -->
<div class="my-slide">
<!-- Anchor set to draggable="false" -->
<a
href="https://www.sposae.com/abiti-da-sposa-c-23/sposae-essential.html"
target="_blank"
draggable="false"
>
<picture>
<!-- Mobile image -->
<source
srcset="https://www.sposae.com/media/wysiwyg/2.gif"
media="(max-width: 768px)"
/>
<!-- Desktop image -->
<img
src="https://www.sposae.com/media/wysiwyg/ESSENTIAL.gif"
alt="Slide 1"
class="my-slider-image"
draggable="false"
/>
</picture>
</a>
</div>
<!-- Slide 2 -->
<div class="my-slide">
<a
href="https://www.sposae.com/abiti-da-sposo-c-51.html"
target="_blank"
draggable="false"
>
<picture>
<!-- Mobile image -->
<source
srcset="https://www.sposae.com/media/wysiwyg/4.gif"
media="(max-width: 768px)"
/>
<!-- Desktop image -->
<img
src="https://www.sposae.com/media/wysiwyg/UOMO.gif"
alt="Slide 2"
class="my-slider-image"
draggable="false"
/>
</picture>
</a>
</div>
</div>
<!-- Arrows -->
<button class="my-arrow my-prev" aria-label="Previous Slide">❮</button>
<button class="my-arrow my-next" aria-label="Next Slide">❯</button>
<!-- Dots -->
<div class="my-dots">
<span class="my-dot my-active" data-slide="0"></span>
<span class="my-dot" data-slide="1"></span>
<span class="my-dot" data-slide="2"></span>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
const slider = document.getElementById("myHeroSlider");
const sliderWrapper = slider.querySelector(".my-slider-wrapper");
const slides = slider.querySelectorAll(".my-slide");
const dots = slider.querySelectorAll(".my-dot");
const prevBtn = slider.querySelector(".my-prev");
const nextBtn = slider.querySelector(".my-next");
let currentIndex = 0;
const totalSlides = slides.length;
let autoSlideInterval;
const autoSlideDelay = 5000; // 5 seconds
// For dragging/swiping
let isDragging = false;
let startX = 0, startY = 0;
let currentTranslate = 0;
let prevTranslate = 0;
let sliderWidth = slider.offsetWidth;
// Distinguish click vs. drag
let isClickAllowed = true;
const CLICK_THRESHOLD = 5; // px
// Direction lock
// - If the user moves mostly vertically => let them scroll
// - If mostly horizontally => drag the slider
let isScrolling; // Will be true/false or undefined until decided
// ========== Init ==========
goToSlide(0);
startAutoSlide();
// Prevent native 'dragstart'
sliderWrapper.addEventListener("dragstart", e => e.preventDefault());
// ========== Functions ==========
function goToSlide(index) {
// Loop around if out of bounds
if (index < 0) index = totalSlides - 1;
if (index >= totalSlides) index = 0;
currentIndex = index;
currentTranslate = -currentIndex * sliderWidth;
prevTranslate = currentTranslate;
sliderWrapper.style.transform = `translateX(${currentTranslate}px)`;
// Dots
dots.forEach(dot => dot.classList.remove("my-active"));
dots[currentIndex].classList.add("my-active");
}
function nextSlide() {
goToSlide(currentIndex + 1);
}
function prevSlide() {
goToSlide(currentIndex - 1);
}
function startAutoSlide() {
stopAutoSlide();
autoSlideInterval = setInterval(nextSlide, autoSlideDelay);
}
function stopAutoSlide() {
if (autoSlideInterval) clearInterval(autoSlideInterval);
}
// ========== Drag/Swipe with Ratio-based Direction Lock ==========
function getPositionX(e) {
return e.type.includes("mouse") ? e.pageX : e.touches[0].clientX;
}
function getPositionY(e) {
return e.type.includes("mouse") ? e.pageY : e.touches[0].clientY;
}
function pointerDown(e) {
// Only left mouse button
if (e.type === "mousedown" && e.button !== 0) return;
isDragging = true;
startX = getPositionX(e);
startY = getPositionY(e);
prevTranslate = currentTranslate;
isClickAllowed = true;
isScrolling = undefined; // not decided yet
stopAutoSlide();
sliderWrapper.style.transition = "none";
if (e.type === "mousedown") {
window.addEventListener("mousemove", pointerMove);
window.addEventListener("mouseup", pointerUp);
} else {
window.addEventListener("touchmove", pointerMove, { passive: false });
window.addEventListener("touchend", pointerUp);
}
}
function pointerMove(e) {
if (!isDragging) return;
const currentX = getPositionX(e);
const currentY = getPositionY(e);
const diffX = currentX - startX;
const diffY = currentY - startY;
// If direction not decided yet => decide now
if (typeof isScrolling === "undefined") {
const absX = Math.abs(diffX);
const absY = Math.abs(diffY);
// If there's no vertical movement at all, definitely horizontal
if (absY === 0) {
isScrolling = false;
} else {
// Ratio approach: if horizontal is at least half of vertical => horizontal
// Adjust ratio to your preference (0.5 is fairly lenient).
const ratio = absX / absY;
isScrolling = ratio < 0.5; // if ratio < 0.5 => more vertical => scroll
}
}
// If user is scrolling vertically, just let them scroll
if (isScrolling) {
return;
}
// Otherwise => horizontal drag
e.preventDefault();
// If we exceed threshold, we cancel link clicks
if (Math.abs(diffX) > CLICK_THRESHOLD) {
isClickAllowed = false;
}
currentTranslate = prevTranslate + diffX;
sliderWrapper.style.transform = `translateX(${currentTranslate}px)`;
}
function pointerUp(e) {
isDragging = false;
window.removeEventListener("mousemove", pointerMove);
window.removeEventListener("mouseup", pointerUp);
window.removeEventListener("touchmove", pointerMove);
window.removeEventListener("touchend", pointerUp);
// If the user was scrolling vertically => no slide snap
if (isScrolling) {
startAutoSlide();
return;
}
// Snap logic
const movedBy = currentTranslate - prevTranslate;
const threshold = 50;
if (movedBy < -threshold) {
currentIndex++;
} else if (movedBy > threshold) {
currentIndex--;
}
sliderWrapper.style.transition = "transform 0.3s ease";
goToSlide(currentIndex);
startAutoSlide();
}
// ========== Resize ==========
window.addEventListener("resize", () => {
sliderWidth = slider.offsetWidth;
sliderWrapper.style.transition = "none";
currentTranslate = -currentIndex * sliderWidth;
prevTranslate = currentTranslate;
sliderWrapper.style.transform = `translateX(${currentTranslate}px)`;
});
// ========== Cancel click if it was a drag ==========
sliderWrapper.addEventListener(
"click",
function (e) {
if (!isClickAllowed) e.preventDefault();
},
true
);
// ========== Arrows ==========
nextBtn.addEventListener("click", () => {
nextSlide();
startAutoSlide();
});
prevBtn.addEventListener("click", () => {
prevSlide();
startAutoSlide();
});
// ========== Dots ==========
dots.forEach((dot, index) => {
dot.addEventListener("click", () => {
goToSlide(index);
startAutoSlide();
});
});
// ========== Attach pointerDown ==========
sliderWrapper.addEventListener("mousedown", pointerDown);
sliderWrapper.addEventListener("touchstart", pointerDown, { passive: false });
});
</script>
La Nostra Mission
Il nostro obiettivo è farti vivere un’esperienza indimenticabile: un percorso personalizzato, dove ogni tuo desiderio prende vita grazie ai nostri esperti stilisti e consulenti.
Ti guideremo nella scelta dell’abito perfetto, e grazie al nostro reparto sartoriale trasformeremo la ricerca del tuo look da sposa o sposo in un momento magico e irripetibile.
Celebralo scegliendo il modello dell’abito da sposa
che ti valorizza di più!
<script>
document.addEventListener('DOMContentLoaded', function() {
// Selezioniamo l'elemento <figure> che ha come classe "Tutti i modelli"
var figureElement = document.querySelector('figure[class="Tutti i modelli"]');
// Se tale elemento esiste sulla pagina...
if (figureElement) {
// ...assegniamo un evento di click che si occuperà del redirect
figureElement.addEventListener('click', function() {
// Prendiamo l'URL corrente in minuscolo
var currentUrl = window.location.href.toLowerCase();
// Verifica la presenza delle città
if (currentUrl.indexOf('lissone') !== -1) {
window.location.href = 'https://www.sposae.com/abiti-da-sposa-c-23/catalogo-sposae-lissone.html';
} else if (currentUrl.indexOf('milano') !== -1) {
window.location.href = 'https://www.sposae.com/abiti-da-sposa-c-23/catalogo-di-milano.html';
} else if (currentUrl.indexOf('brescia') !== -1) {
window.location.href = 'https://www.sposae.com/abiti-da-sposa-c-23/catalogo-sposa-di-brescia.html';
} else if (currentUrl.indexOf('torino') !== -1) {
window.location.href = 'https://www.sposae.com/abiti-da-sposa-c-23/catalogo-sposae-torino.html';
} else {
// Se nessuna città corrisponde, vai all'URL di default
window.location.href = 'https://www.sposae.com/abiti-da-sposa-c-23/economici-online.html';
}
});
}
});
</script>
<div id="bride-collection"></div>
UN ABITO DA SPOSA PER OGNI STILE
I tuoi brand preferiti, 350 modelli unici come te per ogni tipologia di matrimonio.
Assoluta qualità, raffinate creazioni. Tessuti di pregio, silhouette iconiche in abiti unici. Eccellenza sartoriale con l'atelier più amato. Vieni a vivere la nostra esperienza.
Dal 2009 abbiamo deciso di dedicarci unicamente a realizzare abiti da sposa, offrendo un'esperienza unica e portando le coppie a realizzare il proprio sogno.
Da allora abbiamo aperto 3 atelier a Lissone, Torino e Milano con oltre 5.000 coppie servite diventando uno degli atelier più votati in tutta Italia.
I nostri clienti ci amano perché conosciamo i nostri tessuti e abiti, tutto questo unito al nostro servizio unico.
Se desideri approfondire la nostra storia e conoscere la nostra evoluzione, siamo lieti di condividere maggiori dettagli su come Sposae è nato, cresciuto ed espanso. La storia di Sposae
Nella nostra sezione delle domande frequenti puoi trovare risposte a domande poste prima dell'appuntamento, durante l'appuntamento, durante l'acquisto e post acquisto.
Abbiamo creato questa sezione per offrire immediatamente un supporto alle future coppie ancora prima di venire in atelier. Se ci sono altre domande puoi sempre rivolgerti al nostro staff che sarà più che lieta di aiutarti.
QUAL È IL MOMENTO MIGLIORE PER INIZIARE A CERCARE L'ABITO DA SPOSA?
Consigliamo di iniziare la ricerca del tuo abito da sposa circa 9-12 mesi prima del matrimonio, in modo da avere abbastanza tempo per scegliere lo stile perfetto, effettuare eventuali modifiche e organizzare gli accessori. Abbiamo a disponibilità anche abiti in pronta consegna per le situazioni più urgenti.
COME PREPARARMI AL MEGLIO PER IL MIO APPUNTAMENTO IN ATELIER?
Per prepararti al meglio al tuo appuntamento, ti consigliamo di indossare biancheria intima e reggiseno di colori neutri e di portare con te scarpe simili a quelle che prevedi di indossare il giorno del matrimonio. È anche utile avere un'idea del tuo budget, del tuo stile personale e del tema del matrimonio per aiutarti a restringere le opzioni durante il tuo appuntamento. Gli elementi citati non sono obbligatori ma potrebbero offrire un'esperienza più completa.
DEVO SCEGLIERE L'ABITO IN BASE AL MIO TIPO DI CORPO?
È importante scegliere un abito che valorizzi il tuo tipo di corpo, ma ciò non significa che devi limitarti a uno stile specifico. Il nostro personale ti aiuterà a provare diversi stili e a trovare quello che ti fa sentire più sicura e a tuo agio. Ricorda, la cosa più importante è che tu ti senta bellissima nel tuo abito da sposa.
Gli abiti da sposa di Sposae nascono da una meticolosa ricerca stilistica, dalla scelta di tessuti pregiati e dalla cura dei dettagli. Le collezioni sposa sono l’espressione di una continua ricerca estetica e qualitativa, che rispecchia lo stile e le tendenze del momento. II nostro atelier di Lissone (MB) è facilmente raggiungibile da Milano , Monza, Bergamo e dalle relative province. Consultando il catalogo multimediale, è possibile scoprire il vasto assortimento di abiti da sposa delle nostre collezioni e un'ampia gamma di abiti, vere e proprie occasioni a costi competitivi. Tutti gli abiti da sposa, damigella e cerimonia per donna e uomo sono consultabili online. Tra le nostre prerogative nella vendita di abiti da sposa, abiti da damigella e abiti da cerimonia, mettiamo al primo posto la qualità e la convenienza. Usiamo tessuti di pregio e curiamo ogni dettaglio, e tutto a prezzi molto vantaggiosi. Ecco perché da anni siamo leader nel settore della bridal couture. Gli atelier Sposae seguono ogni cliente dalla prima all'ultima fase. Nei nostri atelier è possibile toccare con mano tutti i modelli e verificare di persona l’assoluta qualità firma Sposae. La lavorazione sartoriale ineccepibile e la grande qualità sono una priorità, grazie a cui possiamo soddisfare ogni esigenza e vestire tutte le silhouette.
