资源图标

预览 Headline Slider 等待分享

无下载权限

Headline Slider is a jQuery slider for displaying what you think is important for your website.
Features

- jQuery driven.
- Responsive design.
- Mobile friendly.
- Adjustable width and height.
- Auto slideshow with pause on hover for featured images.
- Can add Title, Description and Link button to each slide.
- Compatible with all major browsers.
Methods

start – starts the slider after you have added slides. example:

var my_slider = $('.my-placeholder-div').hlslider();

...
...

my_slider.start();

destroy – removes the slider

var my_slider = $('.my-placeholder-div').hlslider();

...
...

my_slider.destroy();

addSlideContainer – adds big featured slide container. example:




my_slider.addSlideContainer([

{
image: 'img/image1.jpg', // Image src
title: 'Slide Title 1', // Title
description: 'Description for Slide 1', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
},

{
image: 'img/image2.jpg', // Image src
title: 'Slide Title 2', // Title
description: 'Description for Slide 2', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
}

]);

addSlide – adds small slide block. example:

my_slider.addSlide({
image: 'img/image3.jpg', // Image src
title: 'Slide Title 3', // Title
description: 'Description for Slide 3', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
});

Displaying the slider with all settings:


<script type="text/javascript">

$(document).ready(function () {

var my_slider = $('.my-placeholder-div').hlslider();

my_slider.settings({

height: "360px", // Slider Height
width: "800px", // Slider Width (NOTE Max-Width is set to 100%)

bigSlide: {
charLimit: 0, // characters limit, 0 - disabled
autoSlide: 1, // auto slide inner images (1 - ON, 0 - OFF)
duration: 5000, // auto slide image duration in milliseconds
maxWidth: '80%', // big slide container max width in percents
minWidth: '300px' // big slide container min width in pixels
},

smallSlide: {
charLimit: 200, // characters limit, 0 - disabled
maxWidth: '35%', // small slide max width in percents
minWidth: '250px' // small slide min width in pixels
},

aTarget: '_SELF' // link on click target (_BLANK, _SELF). _BLANK opens in new window, _SELF opens in same window

});


my_slider.addSlideContainer([

{
image: 'img/image1.jpg', // Image src
title: 'Slide Title 1', // Title
description: 'Description for Slide 1', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
},

{
image: 'img/image2.jpg', // Image src
title: 'Slide Title 2', // Title
description: 'Description for Slide 2', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
}

]);

my_slider.addSlide({
image: 'img/image3.jpg', // Image src
title: 'Slide Title 3', // Title
description: 'Description for Slide 3', // Slide Description
link: 'http://mywebsite.com' // Read More URL link
});


my_slider.start();

});
</script>
作者
0daydown
下载
0
查看
24
首次发布
最后更新
评分
0.00 星 0 星

来自0daydown的更多资源

ZIY 会员微信群