Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2013, 21:35
Новичок на форуме
Отправить личное сообщение для Romast Посмотреть профиль Найти все сообщения от Romast
 
Регистрация: 04.09.2013
Сообщений: 1

2 одинаковых слайда на одной странице
Есть такая простенькая карусель, но проблема в том, что мне нужно сделать несколько вызовов этой карусели на странице и понятное дело, когда я нажимаю на кнопку прокрутки - крутятся все карусели...Подскажите как сделать, что бы крутилась только та, которую я выбрал, я видел подобные решения с помощью функции this - но мои знания скрипта не позволяют мне решить мою проблему...

$(document).ready(function(){

$(".b-carousel-button-right").click(function(){ // при клике на правую кнопку запускаем следующую функцию:
var $self = $(this);
$(".h-carousel-items").animate({left: "-155px"}, 200); // производим анимацию: блок с набором картинок уедет влево на 222 пикселя (это ширина одного прокручиваемого элемента) за 200 милисекунд.
setTimeout(function () { // устанавливаем задержку времени перед выполнением следующих функций. Задержка нужна, т.к. эти ффункции должны запуститься только после завершения анимации.
$(".h-carousel-items .b-carousel-block").eq(0).clone().appendTo(".h-carousel-items"); // выбираем первый элемент, создаём его копию и помещаем в конец карусели
$(".h-carousel-items .b-carousel-block").eq(0).remove(); // удаляем первый элемент карусели
$(".h-carousel-items").css({"left":"0px"}); // возвращаем исходное смещение набора набора элементов карусели
}, 300);
});

$(".b-carousel-button-left").click(function(){ // при клике на левую кнопку выполняем следующую функцию:
var $self = $(this);
$(".h-carousel-items .b-carousel-block").eq(-1).clone().prependTo(".h-carousel-items"); // выбираем последний элемент набора, создаём его копию и помещаем в начало набора
$(".h-carousel-items").css({"left":"-155px"}); // устанавливаем смещение набора -222px
$(".h-carousel-items").animate({left: "0px"}, 200); // за 200 милисекунд набор элементов плавно переместится в исходную нулевую точку
$(".h-carousel-items .b-carousel-block").eq(-1).remove(); // выбираем последний элемент карусели и удаляем его
});

});

Последний раз редактировалось Romast, 04.09.2013 в 21:39.
Ответить с цитированием
  #2 (permalink)  
Старый 05.09.2013, 15:40
Аватар для Tek
Tek Tek вне форума
Профессор
Отправить личное сообщение для Tek Посмотреть профиль Найти все сообщения от Tek
 
Регистрация: 22.02.2012
Сообщений: 212

Если хочешь именно решения скинь верстку карусели. Теория такова this - указывает на конкретный элемент т.е. после клика по кнопке тебе нужно обращаться к слайдеру через this. верстка примерно такая:

<div class="main_slider">
  <div class="slider">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
 </div>
  <div class="buttons">
     <div class="button'>Кнопка</div>
  </div>
</div>

То чтобы обратиться именно к этому слайдеру пользуемся тем что они лежат в общем диве main_slider
$(".button").click(function(){
  $(this).parents(".main_slider").find(".slider"); //- Выбрали только нужный слайдер
});

Последний раз редактировалось Tek, 05.09.2013 в 15:46.
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2014, 20:58
Новичок на форуме
Отправить личное сообщение для serbinyo Посмотреть профиль Найти все сообщения от serbinyo
 
Регистрация: 07.04.2014
Сообщений: 6

Здравствуйте. У меня такая же проблема, никак не догадаюсь как правильно реализовать. Нажимаю на кнопку пролистываются оба слайда. Подскажите решение, пожалуйста что бы я всегда мог пользоваться:
<div class="carousel"> 

            <div class="carousel-wrapper"> 
               <div class="carousel-items"> 
               
                  <div class="carousel-block">
                        <img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
                        <map name="yachtamap">
                        <area class="carousel-button-left" href="javascript:void(0);" coords="0,155,35,190" shape="rect" alt="кнопка влево">
                        <area class="carousel-button-right" href="javascript:void(0)" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
                        </map>
                 </div>
                  
                  <div class="carousel-block">
                        <img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
                  </div>
                  
               </div>
            </div>

 

            <div class="carousel-wrapper"> 
               <div class="carousel-items"> 
               
                  <div class="carousel-block">
                        <img src="img/example/31.jpg" usemap="#yachtamap" alt="" />
                        <map name="yachtamap">
                        <area class="carousel-button-left" href="javascript:void();" coords="0,155,35,190" shape="rect" alt="кнопка влево">
                        <area class="carousel-button-right" href="javascript:void()" coords="238,155,275,188" shape="rect" alt="кнопка вправо">
                        </map>
                 </div>
                  
                  <div class="carousel-block">
                        <img src="img/example/32.jpg" usemap="#yachtamap" alt="" />
                  </div>
                  
               </div>
            </div>
          </div>



Скрипт:

$(".carousel-button-right").live('click',function(){ 
   right_carusel();
});
   
$(".carousel-button-left").live('click',function(){ 
   left_carusel();
});
function left_carusel(){
   var block_width = $('.carousel-block').width() + 20;
   $(".carousel-items .carousel-block").eq(-1).clone().prependTo(".carousel-items"); 
   $(".carousel-items").css({"left":"-"+block_width+"px"}); 
   $(".carousel-items").animate({left: "0px"}, 200); 
   $(".carousel-items .carousel-block").eq(-1).remove(); 
}
function right_carusel(){
   var block_width = $('.carousel-block').width() + 20;
   $(".carousel-items").animate({left: "-"+ block_width +"px"}, 200); 
   setTimeout(function () { 
      $(".carousel-items .carousel-block").eq(0).clone().appendTo(".carousel-items"); 
      $(".carousel-items .carousel-block").eq(0).remove(); 
      $(".carousel-items").css({"left":"0px"}); 
   }, 300);
}

CSS:
Код:
.carousel-wrapper {
	width: 280px;
	overflow: hidden;
	margin-left: 71px;
	position: relative;
}
.carousel-items {
	width: 10000px;
	position: relative;
}
.carousel-block {
	float: left;
	width: 275px;
	padding: 10px;
}

Последний раз редактировалось serbinyo, 07.04.2014 в 21:16.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
100-200 уникальных таймеров на одной странице. Aeliot Элементы интерфейса 36 30.06.2013 17:59
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 13:24
Копировать значение input с одной странице на другую lamer Элементы интерфейса 0 06.03.2012 02:03
Как сделать 2 галереи JQuery на одной странице? orendzi jQuery 8 16.07.2011 14:22
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 00:46