vayser/c.markdown

## c.markdown

      
    Raw
  

              c.markdown
            
          
    Вебинар. Практика: слайдер c фото

A Pen by Julia Tokarevskaya on CodePen.
License.

  
## index.html
<html>
  <head>
    <title>Практическое задание: слайдер с фото</title>
  </head>
  <body>
    <main>
      <section class="slider">
        <div class="slider__images"></div>
        <div class="slider__arrows">
          <div class="slider__arrow left">&#9668;</div>
          <div class="slider__arrow right">&#9658;</div>
        </div>
        <div class="slider__dots"></div>
      </section>
    </main>
  </body>
</html>

## script.js
let images = [{
    url: "https://img.favcars.com/mini/hatch/mini_hatch_2010_wallpapers_14_1280x960.jpg",
    title: "Mini Cooper черный"
  }, {
    url: "https://img.favcars.com/mini/cabrio/mini_cabrio_2009_pictures_5_1280x960.jpg",
    title: "Mini Cooper красный"
  }, {
    url: "https://www.t-r-n.ru/files/modification-images/cb/a8/5c/f9/40061_tmb940.jpg",
    title: "Mini Cooper синий"
  }, {
    url: "https://a.d-cd.net/af41e8cs-960.jpg",
    title: "Mini Cooper бордовый"
  }, {
    url: "https://i1.7fon.org/thumb/m604508.jpg",
    title: "Mini Cooper белый"
}];

function initSlider(options) {
  if (!images || !images.length) return;

  options = options || {
    titles: false,
    dots: true,
    autoplay: false
  };

  let sliderImages = document.querySelector(".slider__images");
  let sliderArrows = document.querySelector(".slider__arrows");
  let sliderDots = document.querySelector(".slider__dots");

  initImages();
  initArrows();

  if (options.dots) {
    initDots();
  }

  if (options.titles) {
    initTitles();
  }

  if (options.autoplay) {
    initAutoplay();
  }

  function initImages() {
    images.forEach((image, index) => {
      let imageDiv = `<div class="image n${index} ${index === 0? "active" : ""}" style="background-image:url(${images[index].url});" data-index="${index}"></div>`;
      sliderImages.innerHTML += imageDiv;
    });
  }

  function initArrows() {
    sliderArrows.querySelectorAll(".slider__arrow").forEach(arrow => {
      arrow.addEventListener("click", function() {
        let curNumber = +sliderImages.querySelector(".active").dataset.index;
        let nextNumber;
        if (arrow.classList.contains("left")) {
          nextNumber = curNumber === 0? images.length - 1 : curNumber - 1;
        } else {
          nextNumber = curNumber === images.length - 1? 0 : curNumber + 1;
        }
        moveSlider(nextNumber);
      });
    });
  }

  function initDots() {
    images.forEach((image, index) => {
      let dot = `<div class="slider__dots-item n${index} ${index === 0? "active" : ""}" data-index="${index}"></div>`;
      sliderDots.innerHTML += dot;
    });
    sliderDots.querySelectorAll(".slider__dots-item").forEach(dot => {
      dot.addEventListener("click", function() {
        moveSlider(this.dataset.index);
      })
    })
  }

  function moveSlider(num) {
    sliderImages.querySelector(".active").classList.remove("active");
    sliderImages.querySelector(".n" + num).classList.add("active");
    if (options.dots) {
      sliderDots.querySelector(".active").classList.remove("active");
      sliderDots.querySelector(".n" + num).classList.add("active");
    }
    if (options.titles) changeTitle(num);
  }

  function initTitles() {
    let titleDiv = `<div class="slider__images-title">${images[0].title}</div>`;
    sliderImages.innerHTML += cropTitle(titleDiv, 50);
  }

  function changeTitle(num) {
    if (!images[num].title) return;
    let sliderTitle = sliderImages.querySelector(".slider__images-title");
    sliderTitle.innerText = cropTitle(images[num].title, 50);
  }

  function cropTitle(title, size) {
    if (title.length <= size) {
      return title;
    } else {
      return title.substr(0, size) + "...";
    }
  }

  function initAutoplay() {
    setInterval(() => {
      let curNumber = +sliderImages.querySelector(".active").dataset.index;
      let nextNumber = curNumber === images.length - 1? 0 : curNumber + 1;
      moveSlider(nextNumber);
    }, options.autoplayInterval);
  }
}

let sliderOptions = {
  dots: true,
  titles: true,
  autoplay: true,
  autoplayInterval: 5000
};

document.addEventListener("DOMContentLoaded", function() {
  initSlider(sliderOptions);
});

## style.css
main {
  display: flex;
  justify-content: center;
}

.slider {
  position: relative;
  margin: 20px 0;
}

.slider__images {
  position: relative;
  width: 500px;
  height: 250px;
}

.slider__images-title {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  z-index: 1;
  padding: 7px 0;
}

.slider__images .image {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 800ms ease;
}

.slider__images .image.active {
  opacity: 1;
}

.slider__arrows {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

.slider__arrow {
  position: absolute;
  width: 15%;
  height: 100%;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider__arrow:hover {
  opacity: 1;
}

.slider__arrow.left {
  left: 0;
}

.slider__arrow.right {
  right: 0;
}

.slider__dots {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  bottom: -20px;
  width: 100%;
}

.slider__dots-item {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background 0.4s ease;
}

.slider__dots-item:hover, .slider__dots-item.active {
  background: #000;
}
	<html>
	<head>
	<title>Практическое задание: слайдер с фото</title>
	</head>
	<body>
	<main>
	<section class="slider">
	<div class="slider__images"></div>
	<div class="slider__arrows">
	<div class="slider__arrow left">◄</div>
	<div class="slider__arrow right">►</div>
	</div>
	<div class="slider__dots"></div>
	</section>
	</main>
	</body>
	</html>
	let images = [{
	url: "https://img.favcars.com/mini/hatch/mini_hatch_2010_wallpapers_14_1280x960.jpg",
	title: "Mini Cooper черный"
	}, {
	url: "https://img.favcars.com/mini/cabrio/mini_cabrio_2009_pictures_5_1280x960.jpg",
	title: "Mini Cooper красный"
	}, {
	url: "https://www.t-r-n.ru/files/modification-images/cb/a8/5c/f9/40061_tmb940.jpg",
	title: "Mini Cooper синий"
	}, {
	url: "https://a.d-cd.net/af41e8cs-960.jpg",
	title: "Mini Cooper бордовый"
	}, {
	url: "https://i1.7fon.org/thumb/m604508.jpg",
	title: "Mini Cooper белый"
	}];

	function initSlider(options) {
	if (!images \|\| !images.length) return;

	options = options \|\| {
	titles: false,
	dots: true,
	autoplay: false
	};

	let sliderImages = document.querySelector(".slider__images");
	let sliderArrows = document.querySelector(".slider__arrows");
	let sliderDots = document.querySelector(".slider__dots");

	initImages();
	initArrows();

	if (options.dots) {
	initDots();
	}

	if (options.titles) {
	initTitles();
	}

	if (options.autoplay) {
	initAutoplay();
	}

	function initImages() {
	images.forEach((image, index) => {
	let imageDiv = `<div class="image n${index} ${index === 0? "active" : ""}" style="background-image:url(${images[index].url});" data-index="${index}"></div>`;
	sliderImages.innerHTML += imageDiv;
	});
	}

	function initArrows() {
	sliderArrows.querySelectorAll(".slider__arrow").forEach(arrow => {
	arrow.addEventListener("click", function() {
	let curNumber = +sliderImages.querySelector(".active").dataset.index;
	let nextNumber;
	if (arrow.classList.contains("left")) {
	nextNumber = curNumber === 0? images.length - 1 : curNumber - 1;
	} else {
	nextNumber = curNumber === images.length - 1? 0 : curNumber + 1;
	}
	moveSlider(nextNumber);
	});
	});
	}

	function initDots() {
	images.forEach((image, index) => {
	let dot = `<div class="slider__dots-item n${index} ${index === 0? "active" : ""}" data-index="${index}"></div>`;
	sliderDots.innerHTML += dot;
	});
	sliderDots.querySelectorAll(".slider__dots-item").forEach(dot => {
	dot.addEventListener("click", function() {
	moveSlider(this.dataset.index);
	})
	})
	}

	function moveSlider(num) {
	sliderImages.querySelector(".active").classList.remove("active");
	sliderImages.querySelector(".n" + num).classList.add("active");
	if (options.dots) {
	sliderDots.querySelector(".active").classList.remove("active");
	sliderDots.querySelector(".n" + num).classList.add("active");
	}
	if (options.titles) changeTitle(num);
	}

	function initTitles() {
	let titleDiv = `<div class="slider__images-title">${images[0].title}</div>`;
	sliderImages.innerHTML += cropTitle(titleDiv, 50);
	}

	function changeTitle(num) {
	if (!images[num].title) return;
	let sliderTitle = sliderImages.querySelector(".slider__images-title");
	sliderTitle.innerText = cropTitle(images[num].title, 50);
	}

	function cropTitle(title, size) {
	if (title.length <= size) {
	return title;
	} else {
	return title.substr(0, size) + "...";
	}
	}

	function initAutoplay() {
	setInterval(() => {
	let curNumber = +sliderImages.querySelector(".active").dataset.index;
	let nextNumber = curNumber === images.length - 1? 0 : curNumber + 1;
	moveSlider(nextNumber);
	}, options.autoplayInterval);
	}
	}

	let sliderOptions = {
	dots: true,
	titles: true,
	autoplay: true,
	autoplayInterval: 5000
	};

	document.addEventListener("DOMContentLoaded", function() {
	initSlider(sliderOptions);
	});
	main {
	display: flex;
	justify-content: center;
	}

	.slider {
	position: relative;
	margin: 20px 0;
	}

	.slider__images {
	position: relative;
	width: 500px;
	height: 250px;
	}

	.slider__images-title {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0,0,0,0.5);
	color: #fff;
	text-align: center;
	z-index: 1;
	padding: 7px 0;
	}

	.slider__images .image {
	background-size: cover;
	background-position: center center;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	transition: opacity 800ms ease;
	}

	.slider__images .image.active {
	opacity: 1;
	}

	.slider__arrows {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	}

	.slider__arrow {
	position: absolute;
	width: 15%;
	height: 100%;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	background: rgba(0, 0, 0, 0.4);
	transition: opacity 0.4s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.slider__arrow:hover {
	opacity: 1;
	}

	.slider__arrow.left {
	left: 0;
	}

	.slider__arrow.right {
	right: 0;
	}

	.slider__dots {
	display: flex;
	justify-content: center;
	position: absolute;
	left: 0;
	bottom: -20px;
	width: 100%;
	}

	.slider__dots-item {
	width: 10px;
	height: 10px;
	background: #ccc;
	border-radius: 50%;
	margin: 0 5px;
	cursor: pointer;
	transition: background 0.4s ease;
	}

	.slider__dots-item:hover, .slider__dots-item.active {
	background: #000;
	}