# Carousel image gallery with lightbox

> Build an inline carousel slider that expands into a full-screen lightbox, one setting switches between the two, with every plugin available in both.

With lightGallery you can create both carousel slider and lightbox galleries. You can create inline gallery by passing the container element via container option. All the lightbox features are available in inline gallery as well. Inline gallery can be converted to the lightbox gallery by clicking on the maximize icon on the toolbar.

Canonical page: https://www.lightgalleryjs.com/demos/carousel-gallery/

#### Demo

**JavaScript**

**HTML**

```html
<div id="inline-gallery-container" class="inline-gallery-container"></div>
```

**JavaScript**

```js
const lgContainer = document.getElementById('inline-gallery-container');
const inlineGallery = lightGallery(lgContainer, {
    container: lgContainer,
    dynamic: true,
    // Turn off hash plugin in case if you are using it
    // as we don't want to change the url on slide change
    hash: false,
    // Do not allow users to close the gallery
    closable: false,
    // Add maximize icon to enlarge the gallery
    showMaximizeIcon: true,
    // Append caption inside the slide item
    // to apply some animation for the captions (Optional)
    appendSubHtmlTo: '.lg-item',
    // Delay slide transition to complete captions animations
    // before navigating to different slides (Optional)
    // You can find caption animation demo on the captions demo page
    slideDelay: 400,
    dynamicEl: [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 1</h4>
                <p>Description of the slide 1</p>
            </div>`,
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            subHtml: `<div class="lightGallery-captions">
                <h4>Caption 2</h4>
                <p>Description of the slide 2</p>
            </div>`,
        },
        // more items
    ],
});

// Since we are using dynamic mode, we need to programmatically open lightGallery
inlineGallery.openGallery();
```

**React**

```tsx
import { useState } from 'react';
import { LightGallery } from '@lightgallery/react';
import Thumbnail from '@lightgallery/react/plugins/thumbnail';
import Zoom from '@lightgallery/react/plugins/zoom';

const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
// The element is kept in state, not in a ref: the gallery can only be
// rendered into it once it exists, and setting state renders again.
const [container, setContainer] = useState<HTMLElement | null>(null);

<>
    {/* The gallery is rendered inside this element and takes its size. */}
    <div className="inline-gallery-container" ref={setContainer} />
    {container && (
        <LightGallery
            container={container}
            // The carousel is always open and cannot be closed.
            open
            closable={false}
            // Toolbar button that expands it to the whole window.
            showMaximizeIcon
            slides={slides}
            plugins={[Thumbnail, Zoom]}
        />
    )}
</>;
```

**Vue**

```vue
<script setup>
import { ref } from 'vue';
import { LightGallery } from '@lightgallery/vue';
import Thumbnail from '@lightgallery/vue/plugins/thumbnail';
import Zoom from '@lightgallery/vue/plugins/zoom';

const plugins = [Thumbnail, Zoom];
const slides = [
    {
        src: 'img/img1.jpg',
        thumb: 'img/thumb1.jpg',
        alt: 'Mountains',
        captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
    },
    {
        src: 'img/img2.jpg',
        thumb: 'img/thumb2.jpg',
        alt: 'Forest path',
        captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
    },
];

// An inline gallery is the same component mounted into your own
// element: keep it open and non-closable, and it behaves as a carousel.
const container = ref(null);
</script>

<template>
    <!-- The gallery is rendered inside this element and takes its size. -->
    <div ref="container" class="inline-gallery-container" />
    <!-- The carousel cannot be closed. The maximize icon expands it to the
         whole window. -->
    <LightGallery
        v-if="container"
        :container="container"
        :open="true"
        :closable="false"
        :show-maximize-icon="true"
        :slides="slides"
        :plugins="plugins"
    />
</template>
```

**Angular**

```ts
import { Component } from '@angular/core';
import { LgGalleryComponent, type LgGalleryItem } from '@lightgallery/angular';
import { withThumbnail } from '@lightgallery/angular/plugins/thumbnail';
import { withZoom } from '@lightgallery/angular/plugins/zoom';

@Component({
    selector: 'app-gallery',
    imports: [LgGalleryComponent],
    template: `
        <!-- The gallery is rendered inside this element and takes its
             size. -->
        <div #host class="inline-gallery-container"></div>
        <!-- The carousel is always open and cannot be closed. The maximize
             icon expands it to the whole window. -->
        <lg-gallery
            [container]="host"
            [open]="true"
            [closable]="false"
            [showMaximizeIcon]="true"
            [slides]="slides"
            [features]="features"
        />
    `,
})
export class Gallery {
    features = [withThumbnail(), withZoom()];

    slides: LgGalleryItem[] = [
        {
            src: 'img/img1.jpg',
            thumb: 'img/thumb1.jpg',
            alt: 'Mountains',
            captionHtml: '<h4>Caption 1</h4><p>Description of the slide 1</p>',
        },
        {
            src: 'img/img2.jpg',
            thumb: 'img/thumb2.jpg',
            alt: 'Forest path',
            captionHtml: '<h4>Caption 2</h4><p>Description of the slide 2</p>',
        },
    ];
}
```

##### CSS

Set height and width for the container as the inline gallery automatically adopts the container size.

```scss
.inline-gallery-container {
    width: 100%;

    // set 60% height
    height: 0;
    padding-bottom: 65%;
}
```