Featured Products
- Home
- JavaScript Scripts
- Headline Slider
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>