Слайдер на JQuery UI
Привет ребята, есть в шапке сайта слайдер на JQuery UI
$(function(){ $('.slider3').mobilyslider({ transition: 'fade', animationSpeed: 2000, autoplay: true, autoplaySpeed: 7000, bullets: false, arrowsHide: true }); }); как сделать, чтобы при переходе на другие страницы сайта, он не начинал листать изображения заново с первого, а продолжал дальше листать? |
Цитата:
Цитата:
|
Вот все доступные опции слайдера:
$('.slider').mobilyslider({ content: '.sliderContent', // селектор для слайдера children: 'div', // селектор для дочерних элементов transition: 'horizontal', // переходы: horizontal, vertical, fade animationSpeed: 300, // скорость перехода в миллисекундах autoplay: false, autoplaySpeed: 3000, // время между переходами (миллисекунды) pauseOnHover: false, // останавливать навигацию при наведении на слайдер: false, true bullets: true, // генерировать навигацию (true/false, class: sliderBullets) arrows: true, // генерировать стрелки вперед и назад (true/false, class: sliderArrows) arrowsHide: true, // показывать стрелки только при наведении prev: 'prev', // название класса для кнопки назад next: 'next', // название класса для кнопки вперед animationStart: function(){}, // вызывать функцию при старте перехода animationComplete: function(){} // вызывать функцию когда переход завершен }); Запоминать последний слайд можно в animationComplete(), например, в кукис или localstorage, но опции, которая запускала бы слайдер с определенного слайда нет, Вам придется ее дописывать. |
ВЕТЕРАН или может еще кто, не могли ли Вы помочь доделать код, чтобы слайдер продолжал листаться при переходе на новую страницу, а не начинал листаться заново. Как я понял это делается с помощью кук. Облазил интернет, но для слайдера что-то ничего не нашел (насчет кук), нашел только для аккордиона. А там логика другая. Помогите если не трудно.
<div class="slider slider3"> <div class="sliderContent"> <div class="item"> <img src="slide_img/img1.jpg" alt="" /> </div> <div class="item"> <img src="slide_img/img2.jpg" alt="" /> </div> <div class="item"> <img src="slide_img/img3.jpg" alt="" /> </div> <div class="item"> <img src="slide_img/img4.jpg" alt="" /> </div> </div> </div> Куки скачал, подключил <script src="js/jquery.cookie.js" type="text/javascript"></script> А то я в JS не шарю, PHP сейчас изучаю, а тут на сайте как-то не красиво получается, при такой работе слайдера. |
Серега187,
может в раздел работа? |
рони,
я не думаю что здесь будет большой и трудный код. Но сколько, к примеру, будет стоит? |
Серега187,
1500 рублей :write: |
рони,
с дубу рухнул, тут кода, наверное, на чуть более 5 строк. |
Серега187,
поищите другой слайдер, думаю этот будет мало желающих переделать |
http://learn.javascript.ru/play/0HH7Eb
41 - js Не 5 строк; А прикруткой к "крутому" Jquery слайдеру занимайтесь сами |
Brutus,
а в ie запоминает? |
В ie тоже запоминает.
Сохрани в файл и проверь (Ie tester работает) |
Brutus,
спасибо, все работает, в ie6 и выше тоже работает. Работаю над красотой). |
Серега187, не за что :)
|
Ну вот, моих попыток хватило только на наведение половины красоты слайдера. Смог сделать только появление и исчезание кнопок "следующий", "предыдущий". Все работает нормально, слайдер кнопками листается,только написанный мной код скорее всего вас улыбнет :) Ну да и ладно... Зато работает, учитывая, что это первые мои шаги в JS и JQ. Пол дня мучаю не могу сделать плавное появление картинок, покажите как это сделать?
$(document).ready(function(){ function getCookie(name) { var matches = document.cookie.match(new RegExp( "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)" )); return matches ? decodeURIComponent(matches[1]) : undefined; } function slider(num) { var slider = document.getElementById('slider'), prev = slider.children[0], next = slider.children[1], inner = slider.children[2], items = inner.children, j = parseInt(num); for (var i=0;i<items.length;i++){ items[i].style.display = "none"; if (i == j)items[i].style.display = "block"; } function pr(nx) { if (nx == "next") j++; if (nx == "prev") j--; if (j > items.length-1) j = 0; if (j < 0) j = items.length-1; document.cookie = "slider=" + j + "; path=/"; for (var i=0;i<items.length;i++){ items[i].style.display = "none"; if (i == j)items[i].style.display = "block"; } } setInterval(function (){pr("next")},5000); next.onclick = function (){pr("next")}; prev.onclick = function (){pr("prev")}; //////////////////////////////////////////////////////////// $(function(){ $('.slider').hover( function(event){ $(this).children(".prev").css({"display":"block"}) }, function(){ $(this).children(".prev").css({"display":"none"}) } ); $('.slider').hover( function(event){ $(this).children(".next").css({"display":"block"}) }, function(){ $(this).children(".next").css({"display":"none"}) } ); }); /////////////////////////////////////// } slider(getCookie('slider') || 0) }); |
|
Brutus,
что то появление исчезновение кнопок влево вправо какое странное :blink: если по блоку поводить курсором |
|
|
Brutus,
спасибо большое, я пока с одним чуть-чуть разберусь, уже новая версия появляется:) Ну тут вообще все хорошо с плавностью появления картинки, не дергается. А то в той версии цифирками подгонял, аж вспотел. Спасибо еще раз, очень выручил. |
|
Brutus,
:) |
Часовой пояс GMT +3, время: 15:19. |