UCLA Web Components

Carousel: Image 

<h2 class="mt-24">Carousel Image</h2>
<div id="example-image" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 1
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 2
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 3
            </li>

            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 4
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 5
            </li>
            <li class="splide__slide">
                <div class="splide__slide__container">
                    <img src="../../img/examples/tile-example-1.jpg">
                </div>
                Caption Slide 6
            </li>
        </ul>
    </div>
</div>

<script>
    new Splide("#example-image").mount();
</script>
 
<h2 class="mt-24">Carousel Image</h2>
<div id="example-image" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 1
			</li>
			<li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 2
			</li>
			<li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 3
			</li>

      <li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 4
			</li>
			<li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 5
			</li>
			<li class="splide__slide">
        <div class="splide__slide__container">
					<img src="{{path '/img/examples/tile-example-1.jpg'}}">
				</div>
				Caption Slide 6
			</li>
		</ul>
	</div>
</div>

<script>
  	new Splide( "#example-image" ).mount();
</script>
 
{
  "order": 3
}
  • Handle: @carousel--image
  • Preview:
  • Filesystem Path: src/components/03-components/06-carousel/carousel--image.hbs

No notes defined.