Hexo Splide Carousel Live Demo

Posted on Edited on Word count in article: 1.4k Reading time ≈ 5 mins.

Hexo Splide Carousel

preview.webp

This blog post is for a live demo of the Hexo Splide Carousel package.

Splide options in _config.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# Image carousel and zoom
splide:
  cdn: unpkg  # Options: unpkg, cdnjs, jsdelivr
  options:
    heightRatio: 0.618        # Aspect ratio
    lazyLoad: false           # Lazy loading, options: false, 'nearby', 'sequential'
    type: 'slide'             # Type, options: 'loop', 'slide'
    autoplay: false           # Autoplay
    interval: 3000            # Autoplay interval in milliseconds
    pauseOnHover: true        # Pause autoplay when hovering

  styles:
    arrowColor: '#fc8d5d'             # Arrow color for navigation buttons
    arrowHoverColor: '#fc6423'        # Arrow color on hover
    paginationColor: '#fc8d5d'        # Pagination button color when inactive
    paginationActiveColor: '#fc6423'  # Pagination button color when active
    paginationHoverColor: '#fc6423'   # Pagination button color on hover
    borderRadius: 1px                 # Border radius
    borderColor:
      light: "#eee"  # Border color for light theme
      dark: "#444"   # Border color for dark theme
    shadowColor:
      light: "rgba(0, 0, 0, 0.1)"  # Shadow color for light theme
      dark: "rgba(0, 0, 0, 0.3)"   # Shadow color for dark theme

  dark_mode: auto  # Dark mode, options: auto, true, false. auto will follow the theme of the browser.
  enable_medium_zoom: false  # Enable medium zoom, do not enable together with the theme's medium zoom option

Related options in _config.next.yml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
pjax: true
fancybox: true
mediumzoom: false
lazyload: true
motion:
  enable: true
  async: true
  transition:
    # All available transition variants: https://theme-next.js.org/animate/
    menu_item: fadeInDown
    post_block: fadeIn
    post_header: fadeInDown
    post_body: fadeInDown
    coll_header: fadeInLeft
    # Only for Pisces | Gemini.
    sidebar: fadeInUp

Single Image

The carousel component contains only one image.

1
2
3
{% splide %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
{% endsplide %}
  • 01.png

Multiple Image

Multiple images in the carousel component. The shorthand tag sc is used here.

1
2
3
4
5
6
7
8
{% sc %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![02.png](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![03.png](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
![04.png The resolution of this image is 256*256, images smaller than the carousel container will be enlarged to fill the carousel container.](https://s2.loli.net/2024/09/11/Kgk6YlF5e1Nx3wq.png)
![05.png](https://s2.loli.net/2024/09/11/UY49yDBSwTeIWtP.png)
![06.png](https://s2.loli.net/2024/09/11/wxXuoU8qNfl1hMa.png)
{% endsc %}
  • 01.png
  • 02.png
  • 03.png
  • 04.png The resolution of this image is 256*256, images smaller than the carousel container will be enlarged to fill the carousel container.
  • 05.png
  • 06.png

Image Without Description

All images in the component are without descriptions.

1
2
3
4
5
{% splide %}
![](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
{% endsplide %}

Custom Parameters in Tags

Added loop and autoplay parameters to the tag.

1
2
3
4
5
6
7
8
{% splide type:'loop' autoplay:true %}
![01.png](https://s2.loli.net/2024/09/11/49V6feNHKPIDiOn.png)
![02.png](https://s2.loli.net/2024/09/11/wSJ1yrntzepUXFK.png)
![03.png](https://s2.loli.net/2024/09/11/epm6UXMnKh8fgxI.png)
![04.png](https://s2.loli.net/2024/09/11/Kgk6YlF5e1Nx3wq.png)
![05.png](https://s2.loli.net/2024/09/11/UY49yDBSwTeIWtP.png)
![06.png](https://s2.loli.net/2024/09/11/wxXuoU8qNfl1hMa.png)
{% endsplide %}
  • 01.png
  • 02.png
  • 03.png
  • 04.png
  • 05.png
  • 06.png

The following text are placeholders to test the accuracy of the TOC jump position.

Cras cursus non velit quis maximus. Pellentesque imperdiet viverra enim ut maximus. Phasellus at iaculis nisl. Suspendisse potenti. Vestibulum sapien nibh, convallis vitae convallis eu, suscipit eget est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam semper nisi id convallis placerat. Phasellus vitae leo nunc. Phasellus pellentesque consectetur velit vel cursus.

Donec vehicula metus sit amet lectus iaculis posuere. Pellentesque convallis risus eu tristique efficitur. Maecenas diam sem, iaculis sit amet dolor non, rutrum vestibulum eros. Duis elementum sit amet velit ac dictum. Quisque sollicitudin odio ullamcorper, suscipit nunc ac, feugiat nisl. Vivamus quis ligula nec quam suscipit congue at sit amet est. Duis eu dui nec est dictum blandit. Morbi ut lorem aliquet, aliquet purus at, sollicitudin odio. Duis convallis ultricies est vel convallis. Aliquam vestibulum, nulla ut posuere dignissim, arcu elit lacinia purus, a rhoncus lorem lectus eget leo. Nullam id elementum orci. Nam lobortis felis in diam venenatis tincidunt. Praesent augue erat, interdum in tellus et, posuere vehicula tellus. Nullam ac ex quis nibh pretium fringilla in sit amet leo. Cras suscipit, sem ut cursus ornare, eros orci ultricies ante, eget pellentesque orci arcu non nibh.

Sed commodo turpis non justo laoreet ultricies. Etiam venenatis, lacus pellentesque aliquam pharetra, risus lorem tempor lacus, sit amet tincidunt lorem velit vel nisl. Duis in aliquam ex. Curabitur id elit id lorem mattis lacinia. Phasellus vitae purus nibh. Vivamus vel ipsum tortor. Cras ultrices maximus enim, non laoreet dui cursus vel. Sed velit felis, mattis quis iaculis sed, malesuada ultrices arcu. Suspendisse turpis odio, ullamcorper a ipsum nec, dignissim efficitur arcu. In eget ex at elit faucibus varius. Integer dolor turpis, tempor in eros sit amet, fringilla aliquam augue.

Sed non luctus nunc, in vulputate arcu. Donec vitae diam vestibulum, placerat eros vel, viverra felis. Phasellus venenatis sodales nisl vitae feugiat. Sed ultrices pretium velit, ac venenatis lectus congue sodales. Nunc ullamcorper massa at auctor blandit. Curabitur et bibendum sem. Pellentesque dictum massa eget massa rhoncus, ut auctor velit vulputate. Donec quis metus ut ante tempor malesuada sit amet nec magna. Maecenas at imperdiet odio. Vivamus commodo lectus ut nisl laoreet, quis dapibus purus condimentum. Praesent fermentum, mi convallis dapibus tristique, ipsum ex euismod lacus, sed tempus felis diam vitae turpis. Pellentesque et ipsum congue, congue nisl et, blandit ligula.

Etiam consectetur risus sit amet imperdiet iaculis. Cras vel elementum magna. Pellentesque nec tempor est, ac porttitor magna. Maecenas porttitor, lorem nec volutpat euismod, velit lorem elementum sem, sit amet tempus nibh odio ac nulla. Nunc consequat nibh at nibh vulputate iaculis. Integer tincidunt, arcu non pharetra mollis, diam ligula dignissim mi, ac aliquam justo neque ut ipsum. In interdum ultrices leo, sed pretium nibh placerat id. Vestibulum pharetra vehicula suscipit. Integer in sollicitudin neque. Sed malesuada ac leo sit amet convallis. Quisque euismod eu ligula sit amet sodales.

Nulla fermentum mi metus. Vestibulum at molestie neque, sagittis mattis lorem. Donec porttitor lorem at quam volutpat, at imperdiet augue blandit. Sed sed turpis risus. Cras et sapien nec massa auctor fringilla. Nullam luctus elit et felis tincidunt eleifend. Proin in libero molestie, lacinia ante sed, volutpat ligula. In tellus nibh, tristique quis quam id, tincidunt aliquam purus. Praesent tempor ultrices mauris sed maximus. Aliquam enim erat, convallis non risus eget, interdum blandit nisi. Maecenas velit enim, rhoncus id ante in, imperdiet laoreet enim. Donec ut orci vestibulum, tempus metus quis, elementum augue. Cras lacinia, erat ac blandit mollis, nisi mauris scelerisque mauris, id elementum risus ipsum ac dui. Maecenas tortor nulla, porta ac tempus et, pulvinar quis nisl.

TOC Jump Position Test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis interdum arcu. Mauris at maximus arcu. Ut placerat rhoncus tortor, sit amet feugiat ante pretium et. Vestibulum at pellentesque metus, ut ultricies ipsum. Nullam vel vehicula erat. Sed ac posuere tortor. Nam posuere lectus vel finibus euismod. Proin sit amet sapien faucibus, feugiat arcu sit amet, fringilla turpis. Cras eget suscipit nisl, sit amet ullamcorper ex. Aliquam consequat feugiat erat, vehicula ornare risus dapibus vitae. Nulla rutrum lorem sapien, non ultrices enim iaculis quis. Maecenas malesuada tincidunt nunc eget hendrerit.

In iaculis consequat sem non dictum. Aliquam vel vestibulum libero. Sed auctor nec mi in varius. Fusce eget urna justo. Nullam tincidunt est mi, in ultrices mauris dapibus a. In enim mauris, consequat tristique efficitur tempus, rhoncus sed sapien. Morbi sagittis, sapien sed maximus hendrerit, tellus sapien congue arcu, ut aliquam massa massa nec sem. Maecenas eget maximus ante. Fusce sed ullamcorper leo.

Phasellus nec arcu ornare, sodales sapien non, vestibulum ligula. Vivamus quis pharetra mi. Nunc rutrum erat et mollis commodo. Donec lorem felis, malesuada non augue eget, consequat posuere mauris. Proin varius vulputate mollis. Donec facilisis ipsum ex. Quisque dapibus turpis dolor, eu maximus nunc efficitur vel. Cras a urna vel ante euismod venenatis eu id nisl. Sed varius nisl ac eros consectetur, porttitor eleifend risus consectetur. Proin ut hendrerit dolor, sit amet faucibus tortor. Cras hendrerit porttitor metus, mollis consequat nisi elementum in. Maecenas ac eros gravida, ultricies risus sit amet, efficitur lorem. Vivamus rutrum fringilla velit, a blandit augue. Nullam malesuada sed velit eu tincidunt. Integer diam dolor, dignissim sit amet dapibus non, sagittis sit amet neque. Pellentesque porta, nisi non tincidunt eleifend, felis lorem iaculis risus, id pulvinar magna diam non augue.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sit amet aliquet ipsum. Cras blandit venenatis metus, quis elementum eros placerat ut. Etiam commodo viverra lacus et pellentesque. Cras libero lorem, ultricies sit amet egestas in, congue eu diam. Nulla mi velit, tempus in tellus vitae, consequat dignissim tellus. Proin sodales ex eget dolor dictum, in pellentesque augue convallis. Sed vitae commodo est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dictum interdum justo, a faucibus tellus gravida blandit. Sed tempor, justo ut congue facilisis, velit tortor porttitor erat, ac dictum metus dolor vitae nisi. Pellentesque faucibus erat sed libero egestas, in luctus ipsum euismod.

---------- This article ends here. Thank you for reading! ----------