Question: I am using [GlideJS](http://glide.jedrzejchalubek.com/) to display a carousal. The height of each item in this carousal is different and I have therefore set the property:

```
autoheight: true

```

The problem is when I try to display the carousal in a collapsed div with the autoheight property set to 'true' the carousal is not displayed. When the autoheight property is set to false the carousal does display but then the height of the items is fixed. To illustrate this problem I have created the following Fiddle: 

<https://jsfiddle.net/7dma7L84/21/>

How can I display the carousal in a collapsed div with auto height for each item?

Answer: 
What you need to do is codesplitting. 

Without code splitting

 + are loaded at the first start

```
import Login from './Login'
import Home from './Home'

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
  </Body>
)

```

With code splitting:

```
import Async from 'react-code-splitting'

import Login from './Login'
const Home = () => <Async load={import('./Home')} />
const LostPassword = props => <Async load={import('./LostPassword')} componentProps={props}/>

const App = ({ user }) => (
  <Body>
    {user.loggedIn ? <Route path="/" component={Home} /> : <Redirect to="/login" />}
    <Route path="/login" component={Login} />
    <Route path="/lostpassword" component={LostPassword} />
  </Body>
)

```

There are several ways of doing this, for example: <https://github.com/didierfranc/react-code-splitting>
Use `import` or `require` on the top on a given js file for adding custom scripts or custom css, but I agree that you should review it to be sure everything behaves as you expect.

Example:

```
import "../../assets/js/extensions/mouse-gesture/options.js";

```

Or if you want to import a script only when using a method:

```
myMethod() {
  require("../../assets/js/extensions/mouse-gesture/options.js");
  ...
}

```