SHARE

Headline Slider Free Download

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">      $(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:        '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();      }); </script> 

 
   View Demo     Download

NO COMMENTS

LEAVE A REPLY