- Home
- Internet Scripts
- Royalty Free Javascript
- Headline Slider
Headline Slider
By : Stachethemes Published on Monday, April 18, 2016,15:43:24 in Royalty Free Javascript
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: 'http://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: 'http://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: 'http://mywebsite.com' // Read More URL link });
Displaying the slider with all settings:
<script type=”text/javascript”> </script>$(document).ready(function () {
/* * Create slider instance
var my_slider = $('.my-placeholder-div').hlslider();
// where ".my-placeholder-div" is for example // this way the slider will be build inside this wrapper
/ * Slider settings (optional step)
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: 'http://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: 'http://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: 'http://mywebsite.com' // Read More URL link });
/ * Run the slider *
my_slider.start();
});