topic Help figuring out code for slider. in CMS Development

Help figuring out code for slider.

TaylorLioy — Tue, 10 Jun 2025 14:55:59 GMT

Hi! Can you help me figure out why the header slider background won't show the background image on each slide? I add a background to each individual slide in the module, but it won't display the backgrounds on each slide. Only the first slide displays a background. one? https://www.encoder.com/test12345678910?hs_preview=WEwqEASf-182152724000

Thank you for helping!!!

Re: Help figuring out code for slider.

Jaycee_Lewis — Tue, 10 Jun 2025 22:56:24 GMT

Hey, @TaylorLioy 👋 thanks for including a link. That is always helpful for our community members. Can you share the theme you are using? Also, is the carousel module a custom coded one or was it part of your theme? One additional thing I noticed in your preview link, the last “page” of the carousel is blank, so that's probably worth checking into as well 😉

Talk soon! — Jaycee

Re: Help figuring out code for slider.

Anton — Wed, 11 Jun 2025 10:00:58 GMT

Hey @TaylorLioy,

it seems like the path(s) of the background images are generated wrong.

Do you mind sharing the module source code?

best,

Anton

Re: Help figuring out code for slider.

GRajput — Wed, 11 Jun 2025 14:33:23 GMT

Hi @TaylorLioy

There might be a problem with either the Flickity library initialization or the HTML structure. Could you provide the full module code so I can take a closer look?

Thanks!

Re: Help figuring out code for slider.

TaylorLioy — Wed, 11 Jun 2025 14:55:35 GMT

Hi Anton, thank you for your response! Here is the CSS:

.carousel-cell {position: relative;} .hhs-hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 1; } .hhs-hero-slider { width: 100%; overflow: hidden; } .hhs-hero-slider .carousel-cell { width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; display: inline-table; } .hhs-hero-slider .carousel-cell .hhs-inner-con { display: table-cell; vertical-align: middle; } .hhs-hero-slider .carousel-cell .inner { position: relative; width: 100%; z-index: 2; /*-webkit-transform: translateY(-50%); transform: translateY(-50%);*/ color: white; text-align: center; } .hhs-hero-slider .carousel-cell .inner .subtitle { font-size: 2.2rem; line-height: 1.2em; font-weight: 200; font-style: italic; letter-spacing: 3px; color: rgba(255, 255, 255, 0.5); margin-bottom: 5px; } .hhs-hero-slider .carousel-cell .inner .title { font-size: 3rem; line-height: 1.2em; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 40px; } .hhs-hero-slider .carousel-cell .inner .btn { border: 1px solid #fff; padding: 14px 18px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 3px; color: #fff; text-decoration: none; -webkit-transition: all .2s ease; transition: all .2s ease; } .hhs-hero-slider .carousel-cell .inner .btn:hover { background: #fff; color: #000; } .hhs-hero-slider .flickity-prev-next-button { width: 80px; height: 80px; background: transparent; } .hhs-hero-slider .flickity-prev-next-button:hover { background: transparent; } .hhs-hero-slider .flickity-page-dots { bottom: 30px; } .hhs-hero-slider .flickity-page-dots .dot { width: 30px; height: 2px; opacity: 1; border: 0 solid white; border-radius: 0; } .hhs-hero-slider .flickity-page-dots .dot.is-selected { border: 0 solid #ff0000; } @media (max-width: 1024px) { .hhs-hero-slider .flickity-prev-next-button.previous { left: 0px; } .hhs-hero-slider .flickity-prev-next-button.next { right: 0px; } } @media (max-width: 768px) { .hhs-hero-slider .container { padding: 0 50px; } } @media (max-width: 575px) { .hhs-hero-slider{ min-height: 0; } .hhs-hero-slider .container { padding: 0px; } .hhs-hero-slider .flickity-prev-next-button {display: none;} }

Re: Help figuring out code for slider.

TaylorLioy — Wed, 11 Jun 2025 15:54:36 GMT

Hi Gaurav, thanks for responding! Here is the CSS:

Re: Help figuring out code for slider.

TaylorLioy — Wed, 11 Jun 2025 17:04:46 GMT

I figured it out! I had to remove the loop.first from the code

Re: Help figuring out code for slider.

Jaycee_Lewis — Wed, 11 Jun 2025 17:32:03 GMT

Amazing @TaylorLioy Thanks for letting us know what worked for you!