002. Carrossel de Imagens + Descrição HTML + Flechas + Dots

Carrossel de imagens fullscreen com CSS e JavaScript - Vem com botões de navegação e não está com autoplay

Francisco Negrão

#carroussel

Em 17/06/2022 às 11h16 - Atualizado em 16/08/2022 às 09h09

#carroussel #modelos

FIDDLE: https://jsfiddle.net/francisco_negrao/089gp4be/207/

HTML:

<section class="carousel sectionBanner iCarouselModel01"> <ol class="carouselViewport"> <li id="carouselSlide1" tabindex="0" class="carouselSlide active"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/001-Componentes - Mídias/svg-icons//banner-ecowebdesign-min" alt="Imagem de fundo Eco Webdesign" /> <div class="container"> <div class="boxDsc"> <h1> Aqui na Eco Webdesign você encontra: </h1> <ul> <li>Webdesign Profissional</li> <li>Campanhas para Google Ads</li> <li>Otimização de SEO</li> </ul> <p> E muito mais! </p> <div class="dFlex"> <a href="contato" title="Solicitar um Orçamento">Entrar em contato</a> ou <a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Clique para falar conosco no WhatsApp" class="whats-link"><i class="fab fa-whatsapp" aria-hidden="true"></i> via WhatsApp</a> </div> </div> </div> <div class="carouselSnapper"> </div> <a href="#carouselSlide4" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide2" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide2" tabindex="0" class="carouselSlide"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/001-Componentes - Mídias/svg-icons//banner-ecowebdesign-min" alt="Imagem de fundo Eco Webdesign" /> <div class="container"> <div class="boxDsc"> <h1> Aqui na Eco Webdesign você encontra: </h1> <ul> <li>Webdesign Profissional</li> <li>Campanhas para Google Ads</li> <li>Otimização de SEO</li> </ul> <p> E muito mais! </p> <div class="dFlex"> <a href="contato" title="Solicitar um Orçamento">Entrar em contato</a> ou <a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Clique para falar conosco no WhatsApp" class="whats-link"><i class="fab fa-whatsapp" aria-hidden="true"></i> via WhatsApp</a> </div> </div> </div> <div class="carouselSnapper"></div> <a href="#carouselSlide1" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide3" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide3" tabindex="0" class="carouselSlide"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/001-Componentes - Mídias/svg-icons//banner-ecowebdesign-min" alt="Imagem de fundo Eco Webdesign" /> <div class="container"> <div class="boxDsc"> <h1> Aqui na Eco Webdesign você encontra: </h1> <ul> <li>Webdesign Profissional</li> <li>Campanhas para Google Ads</li> <li>Otimização de SEO</li> </ul> <p> E muito mais! </p> <div class="dFlex"> <a href="contato" title="Solicitar um Orçamento">Entrar em contato</a> ou <a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Clique para falar conosco no WhatsApp" class="whats-link"><i class="fab fa-whatsapp" aria-hidden="true"></i> via WhatsApp</a> </div> </div> </div> <div class="carouselSnapper"></div> <a href="#carouselSlide2" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide4" class="carouselNext">Ir para o próximo item</a> </li> <li id="carouselSlide4" tabindex="0" class="carouselSlide"> <img src="https://cdn.interago.com.br/img/jpg/w_0_q_8/1/mc/001-Componentes - Mídias/svg-icons//banner-ecowebdesign-min" alt="Imagem de fundo Eco Webdesign" /> <div class="container"> <div class="boxDsc"> <h1> Aqui na Eco Webdesign você encontra: </h1> <ul> <li>Webdesign Profissional</li> <li>Campanhas para Google Ads</li> <li>Otimização de SEO</li> </ul> <p> E muito mais! </p> <div class="dFlex"> <a href="contato" title="Solicitar um Orçamento">Entrar em contato</a> ou <a href="https://web.whatsapp.com/send?phone=5517999999999" target="_blank" title="Clique para falar conosco no WhatsApp" class="whats-link"><i class="fab fa-whatsapp" aria-hidden="true"></i> via WhatsApp</a> </div> </div> </div> <div class="carouselSnapper"></div> <a href="#carouselSlide3" class="carouselPrev">Voltar para o item anterior</a> <a href="#carouselSlide1" class="carouselNext">Ir para o próximo item</a> </li> </ol> <aside class="carouselNavigation"> <ol class="carouselNavigationList"> <li class="carouselNavigationItem"> <a href="#carouselSlide1" class="carouselNavigationButton active">Go to slide 1</a> </li> <li class="carouselNavigationItem"> <a href="#carouselSlide2" class="carouselNavigationButton">Go to slide 2</a> </li> <li class="carouselNavigationItem"> <a href="#carouselSlide3" class="carouselNavigationButton">Go to slide 3</a> </li> <li class="carouselNavigationItem"> <a href="#carouselSlide4" class="carouselNavigationButton">Go to slide 4</a> </li> </ol> </aside> </section>

CSS:

.sectionBanner.iCarouselModel01 { height: 800px; position: relative;}

.sectionBanner.iCarouselModel01 ol,li { list-style: none; margin: 0; padding: 0;}

.sectionBanner.iCarouselModel01 .carouselViewport { position: absolute; height: 100%; top: 0; right: 0; bottom: 0; left: 0; display: flex; overflow-x: scroll; counter-reset: item; scroll-behavior: smooth; scroll-snap-type: x mandatory;}

.sectionBanner.iCarouselModel01 .carouselSlide { position: relative; flex: 0 0 100%; width: 100%; counter-increment: item;}

.sectionBanner.iCarouselModel01 .carouselSnapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; scroll-snap-align: center;}

/* DOTS CSS */

.sectionBanner.iCarouselModel01 .carouselNavigation { position: absolute; right: 0; bottom: 20px; left: 0; text-align: center; z-index: 4;}

.sectionBanner.iCarouselModel01 .carouselNavigationList,.sectionBanner.iCarouselModel01 .carouselNavigationItem { display: inline-block;}

.sectionBanner.iCarouselModel01 .carouselNavigationButton { display: inline-block; width: 12px; height: 12px; background-color: #fff; background-clip: content-box; border: 1px solid #888; border-radius: 50%; font-size: 0; transition: transform 0.1s;}

.sectionBanner.iCarouselModel01 .carouselNavigationButton.active { background-color: #999;}

/* ARROWS CSS */

.sectionBanner.iCarouselModel01 .carouselPrev,.sectionBanner.iCarouselModel01 .carouselNext { position: absolute; top: 0; bottom: 0; margin: auto; width: 2rem; height: 2rem; border-radius: 50%; font-size: 0; outline: 0; z-index: 5;}

.sectionBanner.iCarouselModel01.carousel::before,.sectionBanner.iCarouselModel01 .carouselPrev { left: 0.3rem;}

.sectionBanner.iCarouselModel01.carousel::after,.sectionBanner.iCarouselModel01 .carouselNext { right: 0.3rem;}

.sectionBanner.iCarouselModel01.carousel::before,.sectionBanner.iCarouselModel01.carousel::after { content: ''; z-index: 1; background-repeat: no-repeat; background-position: center center; color: #fff; line-height: 4rem; text-align: center; pointer-events: none; background-size: 6px; box-shadow: 5px 5px 9px rgb(0 0 0 / 12%);}

.sectionBanner.iCarouselModel01.carousel::before { background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-angle-left.svg"); position: absolute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; font-size: 0; outline: 0; background-color: #fff;}

.sectionBanner.iCarouselModel01.carousel::after { background-image: url("https://www.interago.com.br/App/Sites/1/mc/001-Componentes - Mídias/svg-icons/Icon awesome-angle-right.svg"); position: absolute; top: 0; bottom: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%; font-size: 0; outline: 0; background-color: #fff;}

/* SCROLL BAR CSS */

.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar { width: 0px; height: 0px;}

/* REMOVE COMMENT TO EDIT SCROLL BAR */

/*.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-track { background: #f1f1f1; }

.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-thumb { background: #888; }

.sectionBanner.iCarouselModel01 .carouselViewport::-webkit-scrollbar-thumb:hover { background: #555; }*/

/* HTML CONTENT CSS */

.sectionBanner.iCarouselModel01 .container { height: 100%; position: relative; z-index: 2;}

.sectionBanner.iCarouselModel01 .carouselSlide img { width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1;}

.sectionBanner.iCarouselModel01 .boxDsc { display: flex; flex-direction: column; justify-content: center; height: 100%; color: #fff;}

.sectionBanner.iCarouselModel01 .boxDsc h1 { font-size: 55px; max-width: 850px;}

.sectionBanner.iCarouselModel01 .boxDsc ul { line-height: 50px;}

.sectionBanner.iCarouselModel01 .boxDsc li { font-size: 30px; display: flex; align-items: center;}

.sectionBanner.iCarouselModel01 .boxDsc p { font-size: 25px; font-weight: bold;}

.sectionBanner.iCarouselModel01 .dFlex { display: flex; flex-wrap: wrap; gap: 15px; align-items: center;}

.sectionBanner.iCarouselModel01 .boxDsc a { border-radius: 5px; background-color: #0071E3; padding: 10px; color: white; display: inline-block; border: 2px solid #0071E3;}

.sectionBanner.iCarouselModel01 .boxDsc a:hover { background-color: white; color: #0071E3;}

.sectionBanner.iCarouselModel01 .boxDsc a:nth-child(2) { border-radius: 5px; background-color: #009505; padding: 10px; color: white; display: inline-block; border: 2px solid #009505;}

.sectionBanner.iCarouselModel01 .boxDsc a:nth-child(2):hover { background-color: white; color: #009505;}

/* SLIDER MOBILE CSS */

@media (max-width: 992px) { .sectionBanner.iCarouselModel01 { height: 600px; }

.sectionBanner.iCarouselModel01 .boxDsc h1 { font-size: 30px; max-width: 850px; }

.sectionBanner.iCarouselModel01 .boxDsc ul { line-height: 25px; }

.sectionBanner.iCarouselModel01 .boxDsc li { font-size: 16px; display: flex; align-items: center; }

.sectionBanner.iCarouselModel01 .boxDsc { padding: 25px; }}

JavaScript:

/* SCRIPTS CAROUSEL ECO WEBDESIGN */

/* DOTS ACTIVE SCRIPTS */

var carouselDots = document.querySelectorAll('.carouselNavigationButton');

carouselDots.forEach(function(carouselDot) {

carouselDot.addEventListener('click', function() { for (var i = 0, len = carouselDots.length; i < len; i++) { carouselDots[i].classList.remove('active');} this.classList.add('active'); let curItem = this.getAttribute('href'); });})

/* ARROWS ACTIVE SCRIPTS */

var carouselArrows = document.querySelectorAll('.carouselSlide a');

carouselArrows.forEach(function(carouselArrow) {

carouselArrow.addEventListener('click', function() { let curItem = this.getAttribute('href'); for (var i = 0, len = carouselDots.length; i < len; i++) { if (carouselDots[i].getAttribute('href') == curItem) { carouselDots[i].classList.add('active'); } else { carouselDots[i].classList.remove('active'); } } }); });