Featured Products
Headline Slider
By : Stachethemes Published on Monday, April 18, 2016,18:43:24 in JavaScript Scripts
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:
// this example adds featured container with 2 images inside
my_slider.addSlideContainer([
// container slide 1
{
image: 'img/image1.jpg', // Image src
title: 'Slide Title 1', // Title
description: 'Description for Slide 1', // Slide Description
link: 'https://mywebsite.com' // Read More URL link
},
// container slide 2
{
image: 'img/image2.jpg', // Image src
title: 'Slide Title 2', // Title
description: 'Description for Slide 2', // Slide Description
link: 'https://mywebsite.com' // Read More URL link
}
]);
addSlide – adds small slide block. example:
// Add small slide
my_slider.addSlide({
image: 'img/image3.jpg', // Image src
title: 'Slide Title 3', // Title
description: 'Description for Slide 3', // Slide Description
link: 'https://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%)
// Big (featured) slide settings
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
},
// Small slide settings
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
});
// Adding slides
// Add Big (featured) container
my_slider.addSlideContainer([
// container slide 1
{
image: 'img/image1.jpg', // Image src
title: 'Slide Title 1', // Title
description: 'Description for Slide 1', // Slide Description
link: 'https://mywebsite.com' // Read More URL link
},
// container slide 2
{
image: 'img/image2.jpg', // Image src
title: 'Slide Title 2', // Title
description: 'Description for Slide 2', // Slide Description
link: 'https://mywebsite.com' // Read More URL link
}
]);
// Add small slide
my_slider.addSlide({
image: 'img/image3.jpg', // Image src
title: 'Slide Title 3', // Title
description: 'Description for Slide 3', // Slide Description
link: 'https://mywebsite.com' // Read More URL link
});
// Run the slider
my_slider.start();
});
</script>
