001. Carrossel de Imagens + Descrição HTML + Flechas + Autoplay
Carrossel de Imagens puro CSS com descrição em HTML e controles de navegação.
FIDDLE: https://jsfiddle.net/francisco_negrao/089gp4be/207/
HTML:
<section class="carousel sectionBanner iCarouselModel01"> <ol class="carouselViewport" data-icarousel="autoplay"> <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> </section>
CSS:
@keyframes tonext { 75% { left: 0; }
95% { left: 100%; }
98% { left: 100%; }
99% { left: 0; }}
@keyframes snap { 96% { scroll-snap-align: center; }
97% { scroll-snap-align: none; }
99% { scroll-snap-align: none; }
100% { scroll-snap-align: center; }}
/* AUTOPLAY CONFIGURATION - CHANGE LEFT ATTRIBUTE BASED IN SLIDER QUANTITY */
@keyframes tostart { 75% { left: 0; }
95% { left: -300%; }
98% { left: -300%; }
99% { left: 0; }}
.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;}
/* 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; }*/
/* AUTOPLAY CSS */
.sectionBanner.iCarouselModel01 .carouselViewport[data-icarousel="autoplay"] .carouselSnapper { animation-name: tonext, snap; animation-timing-function: ease; animation-duration: 6s; animation-iteration-count: infinite;}
.sectionBanner.iCarouselModel01 .carouselViewport[data-icarousel="autoplay"] .carouselSlide:last-child .carouselSnapper { animation-name: tostart, snap;}
.sectionBanner.iCarouselModel01.carousel:hover .carouselViewport[data-icarousel="autoplay"] .carouselSnapper,.sectionBanner.iCarouselModel01.carousel:focus-within .carouselViewport[data-icarousel="autoplay"] .carouselSnapper { animation-name: none;}
/* 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; }}
Você também pode gostar de ler
001. Carrossel de Imagens + Descrição HTML + Flechas + Autoplay
Carrossel de Imagens puro CSS com descrição em HTML e controles de navegação.
Em 17/06/2022 às 11h11 - Atualizado em 16/08/2022 às 09h09
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
Em 17/06/2022 às 11h16 - Atualizado em 16/08/2022 às 09h09
003. Carrossel de Imagens + Flechas + Autoplay
Carrossel puro com apenas imagens e links - Flechas e autoplay incluso
Em 17/06/2022 às 11h49 - Atualizado em 16/08/2022 às 09h09