Slider Category RSS

jQuery ‘NivoSlider’

Март 18 2011 | Category: Slider, Working with jQuery scripts
  • Демо-просмотр
  • Загрузить

Слайдер с различными уникальными эффектами перехода. Для более детальной информации посетите официальный сайт http://nivo.dev7studios.com

 

JavaScript

Мы должны подключить JQuery framework и jquery.nivo.slider.pack.js, указывая SRC атрибут в теге следующих .js файлов:

<script type="text/javascript" src="js/jquery-1.4.4.min.js" </script<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"</script

Скрипт инициализации необходимо разместить в разделе 

$(window).load(function() {
         $('#slider').nivoSlider();
});

Вы также можете задать дополнительные параметры:

        effect:'random', //Specify sets …
Read More

jQuery Slider

Март 17 2011 | Category: Slider, Working with jQuery scripts

This is a simple horizontal slider script based on jQuery Framework.

JavaScript

In order to make the script work, the index-#.html file should contain these lines of code before the closing tag:

HTML

Below you can see general HTML script representation:

The slider consists of 3 main elements: left slide arrow — .box-left, the slider box – .box-top, and the …

Read More

"PlayPause slideShow" Plugin

Март 17 2011 | Category: Slider, Working with jQuery scripts

This is a very simple and very easy to use slideshow plugin for jquery. You can find full installation and configuration instructions by following this link.

JavaScript

In order to make the script work, the index-#.html file with a gallery should contain these lines of HTML code include the jquery.slideshow.js script and the jQuery framework:

The section of the index-#.html …

Read More

"bgSlider"

Март 17 2011 | Category: Slider, Working with jQuery scripts

bgSlider allows to apply the gallery as a website background. It’s quite similar to jbGallery script, but not such complex.

JavaScript

We should include jQuery framework and bgSlider.js by pointing src attribute in the script tag to those .js files:

Below is the initialization script:

In the $() part we specify an array with the path to image files, and …

Read More

"tinySlider"

Март 17 2011 | Category: Slider, Working with jQuery scripts

tinySlider is a simple to manage jQuery slider with a minimal number of features.

JavaScript

We should include jQuery framework and jquery.tinySlider.js by pointing src attribute in the script tag to those .js files.

Initialization script we place in the section. It initializes the element with the class name .class1 In the code example below you can see that a …

Read More

"jqFancyTransitions" Slider

Март 17 2011 | Category: Slider, Working with jQuery scripts

A slider with a variety of unique transition effects. For full specifications visit the official website: http://workshop.rs/2009/12/image-gallery-with-fancy-transitions-effects

JavaScript

We should include jQuery framework and jqFancyTransiotions.1.8.js by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" </script<script type="text/javascript" src="js/jqFancyTransiotions.1.8.js"</script

Initialization script we place in the section. You will probably need to set width and …

Read More

"SliderPager" jQuery Slider

Март 17 2011 | Category: Slider, Working with jQuery scripts

Creates a train-like effect when switching between pages.

JavaScript

We should include jQuery framework and sliderPager.js by pointing src attribute in the script tag to the .js files

<script type="text/javascript" src="js/jquery-1.4.2.min.js"</script<script type="text/javascript" src="js/sliderPager.js"</script

The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:

$(function(){
    $('.pages').slidePager({
        easing:'easeInOutElastic',
        pagernav:'header nav …
Read More

"SlideBox" jQuery slider

Март 17 2011 | Category: Slider, Working with jQuery scripts

A simple script which allows us to achieve an effect of a sliding box with content in it.

JavaScript

We should include jQuery framework by pointing src attribute in the script tag to those .js files.

<script type="text/javascript" src="js/jquery-1.4.2.min.js" </script

Initialization script we place in the section.

<script type="text/javascript"$(function()
        {
        $("#link").click(function(event) {
        event.preventDefault();
        $(this).toggleClass("link2");
        $("#dropdown_box").slideToggle();
        });
    });
</script

.header-banner-right …

Read More

"featureList" Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that is a wonderful way to present site content to visitors. Besides it has a small size and easily editable via HTML and CSS.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include jquery.featureList-1.0.0.js script and jQuery framework:

The …

Read More

Slider "Imagen Cortada"

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that represents an image navigation plug-in. Its feature is the image transition effect: the animation cuts the image and moves each slice separately. The number of slices and slice movement direction are optional.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in …

Read More

Slideshow Lite Slider

Ноябрь 15 2010 | Category: Slider

This is a Simple Slider Script that has only basic functionality and uses fade-effect for smooth opacity changing. You can find installation and configuration guide by this link.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include jquery.slideshow.lite-0.5.3.js script and jQuery framework:

The <head> …

Read More

Looped Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that could be used both for creating sliders and galleries. It is one of the most flexible slider scripts.

http://github.com/nathansearles/loopedSlider

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include loopedslider.js script and jQuery framework:

The <head> section of the …

Read More

"Before-After" Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that allows you to show two images in a single container and drag one image over another which is good for “before-after” comparison.

This plug-in has several important advantages:
• Low file size (only 7 Kbytes);
• You can use it many times on the same page;
• When JavaScript is disabled you will not lose a container, …

Read More

AnythingSlider

Ноябрь 15 2010 | Category: Slider
  • Live Demo
  • Download

This is a Slider Script that uses anythingSlider plug-in.

This plug-in has a variety of features both common for all slider scripts and specific new features:
• Autostart;
• Dynamic output pagination;
• Support for various transition effects between slides;
• Button stop / play;
• Support for the hash tags.

JavaScript
In order to make the script work, the index-#.html file …

Read More

Easy Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that uses Easy Slider 1.7 plug-in (you can find a full manual on following this link).

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code:

The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with …

Read More

jQuery UI Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that uses jQueryui ui.

JavaScript
The carousel.js file contains these lines of code that make the slider work:

Here script attributes define the following values:
•  #featured – the id of script container (the id of a tag container <div>);
•  {fx:{opacity: «toggle»} – this attribute defines the effect for changing the slides; currently it …

Read More

"slideViewer" Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that uses slideViewer plug-in.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these line of HTML code in order to include the jquery.easing.1.2.js and jquery.slideviewer.1.2.js scripts and jQuery framework:

The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with …

Read More

"Cross-Fading" Slider

Ноябрь 15 2010 | Category: Slider

This is a Slider Script that uses cross-fading effect for slide change transition effects.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain these line of HTML code in order to include the jquery00.js script that includes jQuery framework:

The gallery initialization is placed to the end of HTML coding (just before </body>…

Read More

"Faded" Slider

Ноябрь 15 2010 | Category: Slider
  • Live Demo

This is a Slider Script that uses fade effect for slide change transition effects. This slider could be used not only for images but for various content blocks as well. You can find full installation and configuration instructions by following this link.

JavaScript
In order to make the script work, the index-#.html file with a slider should contain …

Read More

"Coin" Слайдер

Ноябрь 15 2010 | Category: Slider

Перед Вами скрипт слайдера, который может автоматически обрезать изображения для создания различных эффектов перехода. Дополнительные инструкции по установке и настройке можно найти по этой ссылке

JavaScript
Для того, чтобы создать рабочий скрипт, файл index-#.html, содержащий слайдер, должен включать в себя следующие строки HTML-кода, чтобы активировать скрипт coin-slider.js и jQuery framework:

 

Раздел <head> в файле index-#.html содержит следующие строки кода, …

Read More