Carousel won't stay contained in Minimal Mistakes theme

Help
1

I’d like to use the Slider/Carousel from Slider/Carousel | Jekyll Codex with the Minimal Mistakes theme.

Adding the carousel component to my site and instantiating it on my site’s home page with links to some images went smoothly, and the carousel and its images are working, but I’m having an issue with it’s visual appearance.

Whenever the browser window is wide enough to display “author_info” and “Custom sidebar navigation” elements, which appear to the left of the contents of the Home page, then the left edge of the carousel container “leaves” the content container, and appears at the far left of the page, visually overlaying the left side custom nav bar and author info.

I studied the CSS for both the carousel and the splash layout and its parents, and I can’t figure out why the carousel container won’t stay contained in the content section of the splash page layout.

Can anyone shed some light on why this is happening, and suggestions to fix it? I’m not wedded to using this particular implementation of the carousel if there is another that works better with the Minimal Mistakes theme.

My environment:

I made no modifications to any of the carousel files, copied carousel.html to _includes, and my Home.md file looks like this:

---
layout: splash
permalink: /
author_profile: true
sidebar:
  nav: docs
---

Welcome to my blog!

Here are some pictures from posts from my `personal` category

 {% include Carousel.html height="50" unit="%" duration="7" %}

I do the site build locally, so I’m not restricted to any particular version of Ruby, or Jeykll, nor am I restricted on the use of any gems.

  • Windows 10 Build 19041
  • Ruby ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x64-mingw32]
  • Visual Studio Code IDE
  • JeykllVersion and the plugins I’m using:
gem "jekyll", "~> 4.2.0"
gem "minimal-mistakes-jekyll", "~> 4.22.0"
gem 'jekyll-compose', group: [:jekyll_plugins]
# If you have any plugins, put them here!
group :jekyll_plugins do
  gem "jekyll-paginate", "~> 1.1.0"
  gem "jekyll-sitemap", "~> 1.4.0"
  gem "jekyll-gist", "~> 1.5.0"
  gem "jekyll-feed", "~> 0.15.1"
  gem "jekyll-include-cache", "~> 0.2.1"
  gem "jekyll-timeago", "~> 0.14.0"
  gem "jekyll_version_plugin", "~> 2.0.0"
  gem "jekyll-minifier", "~> 0.1.10"
  gem "jekyll-archives", "~> 2.2.1"
  gem "flexible_include", "~> 1.1.0"
  gem "jekyll-relative-links", "~> 0.6.1"
end
2

Found it: The single.html layout includes a div class="page__inner-wrap"> tag, and places content inside this div. The splash.html layout does not. In general, single.html has quite a bit more functionality than splash.html. I’m going to create my own override of splash.html. and add stuff from single.html to get the splash layout I want.

3

I’m also trying to achieve the same end result - a JekyllCodex Carousel in a Minimal Mistakes theme (forked from the GH repo so I can override layouts easily)

I’m having the problem that I can’t get the carousel to be visible at all! If anyone has successfully got this carousel integrated into a Minimal Mistakes site then I’d really appreciate a link to your source code if available, or some pointers as to what’s you had to do to make it work.

I’ve tried wrapping the page content in the “page__inner-wrap” class but this didn’t change anything.

4

I’ve solved my own problem here but I’ll document it in case anyone else having trouble.

This is a dumb mistake, but when I copied and pasted the carousel.html code from the JekyllCodex site, VSCode automatically formatted the code, which destroyed a lot of the {{ liquid }} syntax, unfortunately, because CSS has loads of {} in it, I didn’t immediately notice.

I eventually found it by closely examining the CSS rules being applies to the (invisible) HTML elements, using the browser console and inspector. This turned up some invalid CSS rules which had weird parameters like padding-bottom: { { include.height } } (note the spaces in the {{ }} which should not be there. And then I worked out it was malformed Liquid syntax. Irritatingly, there were no errors in the Jekyll output.

I copied a new version and undid VSCode’s automatic formatting and now it works perfectly.

1 Like
5

@pacharanero do you mind sharing the cleaned up css style? I’m trying to replicate this slider as well, but ran into the same issue. Tons of liquid {{ }} in css and I have no clue what to substitute for those. Plus the link on jekyll codex is mashed up too… I’m not sure if it’s VS Code’s doing, when you open the link on a new tab you get the same code.

1 Like
6

The code for the working carousel is here

1 Like
7

@pacharanero Thank you man, highly appreciate it!