Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.04.2014, 17:25
Новичок на форуме
Отправить личное сообщение для 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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2014, 09:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,228

Сообщение от serbinyo
Нажимаю на кнопку пролистываются оба слайда.
Так у тебя так скрипт сделан...

Сообщение от serbinyo
Подскажите решение, пожалуйста что бы я всегда мог пользоваться
Нужно сделать "привязку" к некоему материнскому элементу, который будет однозначно определять, какие элементы "крутить"...
Ссылку на тот материнский элемент передавать в функции "прокрутки"... Внутри тех функций дописать обращение к классам типа такого

parent.find(<тут_то_что_было_изначально>)...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Несколько таблиц с плавающей шапкой на странице Hurray Элементы интерфейса 28 06.04.2014 10:22
AJAX несколько элементов на странице... myocean AJAX и COMET 2 12.11.2012 12:27
AJAX несколько элементов на странице... myocean jQuery 3 12.11.2012 00:00
Несколько версий JQuery UI на одной странице. Casufi jQuery 2 10.11.2012 15:24
Несколько iframe на странице oblomov86 Events/DOM/Window 3 19.12.2011 12:00