Implement a slider in Hexo

Hexo slider

Download bxslider

Download from http://bxslider.com/ and copy jquery.bxslider.css to hexo project css folder and copy js file to js folder.

Create file bxslider.ejs

Add file into your theme folder, e.g. themes/YOUR_THEME/layout/common/bxslider.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript" src="/js/bxslider/jquery.bxslider.min.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="/css/bxslider/jquery.bxslider.css" />
<ul class="bxslider">
<% for (var slider in theme.sliders) { %>
<% if (slider) { %>
<li>
<a href="<%= theme.sliders[slider]['url']%>">
<img src="<%= theme.sliders[slider]['image']%>" title="<%= theme.sliders[slider]['text'] %>"/>
</a>
</li>
<% } %>
<% } %>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
mode: 'fade',
captions: true
});
});
</script>

Modify index.ejs

Add a reference to bxslider:

1
<%- partial('common/bxslider') %>

Define slider in _config.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
sliders:
slider1:
image: /images/slider/1.jpg
url: /post1/
text: slider1 text
slider2:
image: /images/slider/2.jpg
url: /post2/
text: slider2 text
slider3:
image: /images/slider/3.jpg
url: /post3/
text: slider3 text

More configurations

Change default style for .bx-wrapper .bx-viewport in the css, e.g. border, and left

You may change the slider width in style.styl

Share