Javascript.RU

Форум

 Учебник Node.JS скринкаст Стандарт языка

Справочник

Discord чат

  
Статьи Тест знаний Аналоги функций PHP

Курсы javascript

  Сообщения за день

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

Несколько каруселей на одной странице
День добрый.

Жажду на одной странице сделать несколько каруселей.
Код для одной такой (честно украдено с хабра):

<div class="wrap">
		<div class="b-carousel js-carousel">
			<button class="b-carousel__prev js-carousel__prev"><</button>
			<button class="b-carousel__next js-carousel__next">></button>
			<div class="b-carousel__wrap js-carousel__wrap">
				<div class="b-carousel__item">
					<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
				</div>
				<div class="b-carousel__item">
					<img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
				</div>
				<div class="b-carousel__item">
					<img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
				</div>
				<div class="b-carousel__item">
					<img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
				</div>
			</div>
		</div>



(function() {
	"use strict";

	function Carousel(setting) {
		if(document.querySelector(setting.wrap) === null) {
			console.error(`Carousel not fount selector ${setting.wrap}`);
			return;
		}

		/* Scope privates methods and properties */
		let privates = {};


		/* Public methods */
		// Prev slide
		this.prev_slide = () => {
			--privates.opt.position;

			if(privates.opt.position < 0) {
				privates.sel.wrap.classList.add('s-notransition');
				privates.opt.position = privates.opt.max_position - 1;
			}

			privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
		};


		// Next slide
		this.next_slide = () => {
			++privates.opt.position;

			if(privates.opt.position >= privates.opt.max_position) {
				privates.opt.position = 0;
			}

			privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
		};



		/* Privates properties */
		privates.setting = setting;

		privates.sel = {
			"main": document.querySelector(privates.setting.main),
			"wrap": document.querySelector(privates.setting.wrap),
			"children": document.querySelector(privates.setting.wrap).children,
			"prev": document.querySelector(privates.setting.prev),
			"next": document.querySelector(privates.setting.next)
		};

		privates.opt = {
			"position": 0,
			"max_position": document.querySelector(privates.setting.wrap).children.length
		};

		// Control
		if(privates.sel.prev !== null) {
			privates.sel.prev.addEventListener('click', () => {
				this.prev_slide();
			});
		}

		if(privates.sel.next !== null) {
			privates.sel.next.addEventListener('click', () => {
				this.next_slide();
			});
		}

	}


	let a = new Carousel({
		"main": ".js-carousel",
		"wrap": ".js-carousel__wrap",
		"prev": ".js-carousel__prev",
		"next": ".js-carousel__next"
	});

})();


Если вставлять второй блок, то он уже не будет прокручиваться.

P.S. вроде же можно одно имя класса использовать для нескольких блоков...
Ответить с цитированием
  #2 (permalink)  
Старый 26.10.2017, 19:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони 		 
Регистрация: 27.05.2010
Сообщений: 33,072

Радиойод,
Карусель на Vanilla.JS
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .b-carousel {
  width: 100%;
  overflow: hidden;
  position: relative;

  box-sizing: border-box;
  border: 1px solid;
}

  .b-carousel__prev,
  .b-carousel__next {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    transform: translateY(-50%) translateZ(0);
    cursor: pointer;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    z-index: 3;
  }

    .b-carousel__next {
      left: auto;
      right: 20px;
    }

  .b-carousel__wrap {
    display: flex;
    transition: transform .5s;
    will-change: transform;
    position: relative;
    z-index: 1;
    height: 100%;
  }

    .b-carousel__item {
      flex: 0 0 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

      .b-carousel__img {
        width: 100%;
        display: block;
      }

  </style>

</head>

<body>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<div class="wrap">
    <div class="b-carousel js-carousel">
      <button class="b-carousel__prev js-carousel__prev"><</button>
      <button class="b-carousel__next js-carousel__next">></button>
      <div class="b-carousel__wrap js-carousel__wrap">
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2014/06/%D1%81%D0%BE%D0%B1%D0%B0%D1%87%D0%BA%D0%B0.jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://i1.wp.com/oriflamzvezda.ru/wp-content/uploads/2015/08/%D0%9C%D0%B8%D0%BB%D1%8B%D0%B5-%D0%B6%D0%B8%D0%B2%D0%BE%D1%82%D0%BD%D1%8B%D0%B5....jpg?resize=350%2C200" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/photo-1422303497846-57188833cbe1?w=500" alt="" class="b-carousel__img">
        </div>
        <div class="b-carousel__item">
          <img src="https://images.unsplash.com/44/MIbCzcvxQdahamZSNQ26_12082014-IMG_3526.jpg?w=500" alt="" class="b-carousel__img">
        </div>
      </div>
    </div>
</div>
<script>
(function() {
  "use strict";

  function Carousel(setting) {
    if(document.querySelector(setting.wrap) === null) {
      console.error(`Carousel not fount selector ${setting.wrap}`);
      return;
    }

    /* Scope privates methods and properties */
    let privates = {};


    /* Public methods */
    // Prev slide
    this.prev_slide = () => {
      --privates.opt.position;

      if(privates.opt.position < 0) {
        privates.sel.wrap.classList.add('s-notransition');
        privates.opt.position = privates.opt.max_position - 1;
      }

      privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
    };


    // Next slide
    this.next_slide = () => {
      ++privates.opt.position;

      if(privates.opt.position >= privates.opt.max_position) {
        privates.opt.position = 0;
      }

      privates.sel.wrap.style["transform"] = `translateX(-${privates.opt.position}00%)`;
    };



    /* Privates properties */
    privates.setting = setting;

    privates.sel = {
      "main": document.querySelector(privates.setting.main),
      "wrap": document.querySelector(privates.setting.wrap),
      "children": document.querySelector(privates.setting.wrap).children,
      "prev": document.querySelector(privates.setting.prev),
      "next": document.querySelector(privates.setting.next)
    };

    privates.opt = {
      "position": 0,
      "max_position": document.querySelector(privates.setting.wrap).children.length
    };

    // Control
    if(privates.sel.prev !== null) {
      privates.sel.prev.addEventListener('click', () => {
        this.prev_slide();
      });
    }

    if(privates.sel.next !== null) {
      privates.sel.next.addEventListener('click', () => {
        this.next_slide();
      });
    }

  }


  let a = new Carousel({
    "main": ".wrap:nth-of-type(1) .js-carousel",
    "wrap": ".wrap:nth-of-type(1) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(1) .js-carousel__prev",
    "next": ".wrap:nth-of-type(1) .js-carousel__next"
  });
  let b = new Carousel({
    "main": ".wrap:nth-of-type(2) .js-carousel",
    "wrap": ".wrap:nth-of-type(2) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(2) .js-carousel__prev",
    "next": ".wrap:nth-of-type(2) .js-carousel__next"
  });
  let c = new Carousel({
    "main": ".wrap:nth-of-type(3) .js-carousel",
    "wrap": ".wrap:nth-of-type(3) .js-carousel__wrap",
    "prev": ".wrap:nth-of-type(3) .js-carousel__prev",
    "next": ".wrap:nth-of-type(3) .js-carousel__next"
  });

})();

</script>
</body>
</html>
Ответить с цитированием
  #3 (permalink)  
Старый 26.10.2017, 19:17
Интересующийся
Отправить личное сообщение для Радиойод Посмотреть профиль Найти все сообщения от Радиойод 		 
Регистрация: 28.07.2016
Сообщений: 11

Спасибо!
Ответить с цитированием
Ответ

« Игра угадай число | PartitionOn need help to explain this task »


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать два шаблона (кода) на одной странице palifeyo Общие вопросы Javascript 1 25.03.2017 12:31
Несколько модальных окон на одной странице pleymo jQuery 2 04.06.2014 09:24
jCarousel - два раза на одной странице new jQuery 0 22.04.2010 22:20
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 01:46
Вставка текста с одной страницы в форму на другой странице Dima Общие вопросы Javascript 19 22.01.2009 17:35


© Илья Кантор, 2007-2021 О проекте - Обратная связь - Архив форума - Вверх