/ Сайтостроение / Scripts & jquery / Простой слайдер jquery

Простой слайдер jquery

23.06.2015

736

Постоянно нахожусь в поиске простого, но эффективного слайдера. Здесь представлен один из вариантов.

Скрипт в подвал

<script type="text/javascript">
var slideWidth=330;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,4000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,4000);
    });
});
 
function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},330).data('current',currentSlide);
}
</script>

 

CSS

/* Стили слайдера */

.viewport{
    width: 330px;
    height: 100px;
    overflow: hidden;
    position: relative;
    float: left;
}
.slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    margin: 0;
    padding: 0;    
}
.slide{
    width: 330px;
    height: 100px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}

Код в сайт

<div class='viewport'>
    <ul class='slidewrapper' data-current=0>

<li class='slide'>1</li>
<li class='slide'>2</li>
<li class='slide'>3</li>

    </ul>
</div>

Пример работы

  • 1
  • 2
  • 3

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Incredibly Basic Slider

Incredibly Basic Slider

Один из вариантов реализации простого слайдера. Слайдер для изображений (с текстом не пробовал). Из преимуществ — полнейшая адаптивность. Скрипт <script> jQuery(document).ready(function ($) { timer = setInterval(function () { moveRight(); }, Читать далее »

Slider v.2

Slider v.2

Доработал Slider v.1 добавив в него несколько функций: отдельный тип записей — слайды, ссылка со слайда. Сам скрипт слайдера остался прежним. Тип записей Слайды add_action( 'init', 'register_post_type_slide' ); function register_post_type_slide() Читать далее »

Slider v.1

Slider v.1

Реализуем простой в настройке, функциональный слайдер с навигацией и двумя эффектами перехода (затухание и перелистывание). Подключение слайдера Подключаем скрипт (если слайдер нужен на главной странице, то подключаем локально в шаблоне Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Простой слайдер jquery
Раскрывающийся блок
Рекомендации для васРаскрывающийся блокOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.