Bootstrap carousel not functional and is displaying all slides on top of eachother

Technical Q&A
, ,

Topic summary

A developer is troubleshooting a Bootstrap carousel implementation in a Shopify theme that broke after relocating CSS from the global stylesheet to the carousel component file.

Current Issue:

  • All carousel slides now display stacked on top of each other on the live site
  • The carousel functions correctly within the Shopify admin theme customizer
  • Moving the CSS back to the global stylesheet does not resolve the problem

Context:

  • The developer needs component-scoped styles to prevent interference between multiple carousels on the same page
  • The carousel was working properly before the CSS relocation
  • Code snippet shows Liquid template syntax with embedded styles using {% stylesheet %} tags

Status: The issue remains unresolved with no responses or solutions provided yet. The discrepancy between admin preview and live site behavior suggests a potential CSS loading or scoping issue specific to Shopify’s theme rendering.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

I am brand new to shopify and developing shopify themes. I am currently implementing a bootstrap carousel component. I had everything functional and it was working properly until I moved the css for the carousel from the global stylesheet to the carousel file itself. Now the carousel is no longer functional and all the slides are being rendered on top of each other. However inside the shopify admin dashboard when I customize my theme, the carousel is working as expected. I am kind of at a loss as to why this is happening. I have tried moving the css back to the global style sheet but this does not fix the problem. I need the styles to be inside the slider component because I need to create another carousel on the bottom of the page and I do not want styles interfering with each other.

{% stylesheet %}

/* Slider Section Styles */
.slider-section {
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

/* Carousel Styles */
.carousel {
  width: 850px;
  height: auto;
}

.carousel-inner {
  background: red;
  padding: 25px;
}

.carousel-item {
  width: 500px;
}

.carousel-item img {
  width: 500px !important;
  height: 200px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 2rem;
}

{% endstylesheet %}

{% schema %}

{
  "name": "Slideshow",
  "tag": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    }
  ],
  "blocks": [
   {
    "type": "slide",
    "name": "Slide",
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "Slide"
      },
      {
        "type": "text",
        "id": "image_title",
        "label": "Image Title"
      },
      {
        "type": "textarea",
        "id": "description",
        "label": "Description"
      },
      {
        "type": "text",
        "id": "button_text",
        "label": "Button Text"
      },
      {
        "type": "url",
        "id": "button_url",
        "label": "Button URL"
      },
      {
        "type": "color",
        "id": "title_color",
        "label": "Title Color",
        "default": "#fff"
      },
      {
        "type": "color",
        "id": "description_color",
        "label": "Description Color",
        "default": "#fff"
      }
    ]
   }
  ]
}

{% endschema %}

Thanks