Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Слайдер на JQuery UI (https://javascript.ru/forum/dom-window/48216-slajjder-na-jquery-ui.html)

Серега187 25.06.2014 09:19

Слайдер на JQuery UI
 
Привет ребята, есть в шапке сайта слайдер на JQuery UI
$(function(){	
	$('.slider3').mobilyslider({
		transition: 'fade',
		animationSpeed: 2000,
		autoplay: true,
		autoplaySpeed: 7000,
		bullets: false,
		arrowsHide: true
	});	
});

как сделать, чтобы при переходе на другие страницы сайта, он не начинал листать изображения заново с первого, а продолжал дальше листать?

рони 25.06.2014 10:10

Цитата:

Сообщение от Серега187
слайдер на JQuery UI

:-?
Цитата:

Сообщение от Серега187
mobilyslider

это разные слайдеры

BETEPAH 25.06.2014 10:38

Вот все доступные опции слайдера:
$('.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, но опции, которая запускала бы слайдер с определенного слайда нет, Вам придется ее дописывать.

Серега187 25.06.2014 14:05

ВЕТЕРАН или может еще кто, не могли ли Вы помочь доделать код, чтобы слайдер продолжал листаться при переходе на новую страницу, а не начинал листаться заново. Как я понял это делается с помощью кук. Облазил интернет, но для слайдера что-то ничего не нашел (насчет кук), нашел только для аккордиона. А там логика другая. Помогите если не трудно.
<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 сейчас изучаю, а тут на сайте как-то не красиво получается, при такой работе слайдера.

рони 25.06.2014 14:25

Серега187,
может в раздел работа?

Серега187 25.06.2014 14:32

рони,
я не думаю что здесь будет большой и трудный код. Но сколько, к примеру, будет стоит?

рони 25.06.2014 14:51

Серега187,
1500 рублей :write:

Серега187 25.06.2014 14:53

рони,
с дубу рухнул, тут кода, наверное, на чуть более 5 строк.

рони 25.06.2014 15:06

Серега187,
поищите другой слайдер, думаю этот будет мало желающих переделать

Brutus 25.06.2014 15:49

http://learn.javascript.ru/play/0HH7Eb
41 - js

Не 5 строк;

А прикруткой к "крутому" Jquery слайдеру занимайтесь сами

рони 25.06.2014 15:57

Brutus,
а в ie запоминает?

Brutus 25.06.2014 16:07

В ie тоже запоминает.
Сохрани в файл и проверь
(Ie tester работает)

Серега187 25.06.2014 19:59

Brutus,
спасибо, все работает, в ie6 и выше тоже работает. Работаю над красотой).

Brutus 25.06.2014 20:02

Серега187, не за что :)

Серега187 26.06.2014 14:30

Ну вот, моих попыток хватило только на наведение половины красоты слайдера. Смог сделать только появление и исчезание кнопок "следующий", "предыдущий". Все работает нормально, слайдер кнопками листается,только написанный мной код скорее всего вас улыбнет :) Ну да и ладно... Зато работает, учитывая, что это первые мои шаги в 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 26.06.2014 16:13

Серега187,
http://learn.javascript.ru/play/Kdx5Gb
Держи :)

рони 26.06.2014 16:32

Brutus,
что то появление исчезновение кнопок влево вправо какое странное :blink: если по блоку поводить курсором

Brutus 26.06.2014 17:49

рони,
http://learn.javascript.ru/play/jlBV3b

рони 26.06.2014 18:17

Brutus,
да это мелочи и уже лучше а почему просто css неиспользовать?

Серега187 26.06.2014 18:30

Brutus,
спасибо большое, я пока с одним чуть-чуть разберусь, уже новая версия появляется:)
Ну тут вообще все хорошо с плавностью появления картинки, не дергается. А то в той версии цифирками подгонял, аж вспотел. Спасибо еще раз, очень выручил.

Brutus 26.06.2014 18:54

рони,
http://learn.javascript.ru/play/Th8Ad

рони 26.06.2014 19:26

Brutus,
:)


Часовой пояс GMT +3, время: 15:19.