CSS слайд-шоу переход - PullRequest
Новая
       5

CSS слайд-шоу переход

3 голосов
/ 26 апреля 2020

Я сделал слайд-шоу CSS с динамически импортированными изображениями, но теперь у меня возникают проблемы с добавлением перехода. Я хочу, чтобы изображения скользили при нажатии следующей или предыдущей кнопки, но не могу найти решение этой проблемы. Вот фрагмент моего текущего кода: 

$("#Next").click(function(){
	$("#Slider").append($("#Slider img:first-of-type"));
});

$("#Prev").click(function(){
	$("#Slider").prepend($("#Slider img:last-of-type"));
});
html{
	align-items: center;
	background-color: #31353D;
	display: flex;
	justify-content: center;
}

#Wrapper {
  margin-top: 20px;
}

#Slideshow{
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

#Slider{
	border: 5px solid #1C1D21;
	height: 568px;
	overflow: hidden;
	width: 1024px;
}

#Slider img{
	height: 568px;
	width: 1024px;
	transition: all 1s;
}

#Arrows{
	display: flex;
	justify-content: space-between;
	height: 30px;
	position: absolute;
	width: 1024px;
}

#Arrows i{
	background-color: rgba(255, 255, 255, .25);
	color: #1C1D21;
	cursor: pointer;
	height: 30px;
	padding: 15px;

	transition: background-color .5s, color .5s;
}

#Arrows i:first-of-type{
	padding-right: 20px;
}

#Arrows i:last-of-type{
	padding-left: 20px;
}

#Arrows i:hover{
	background-color: rgba(28,29,33, .75);
	color: #EEEFF7;
}
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="css/slideshow.css">
    <script src="js/display.js"></script>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <section id="Wrapper">
    	<div id="Slideshow">
    		<div id="Slider">
          <img src="http://via.placeholder.com/1024x568.jpg?text=1">
          <img src="http://via.placeholder.com/1024x568.jpg?text=2">
          <img src="http://via.placeholder.com/1024x568.jpg?text=3">
          <img src="http://via.placeholder.com/1024x568.jpg?text=4">
          <img src="http://via.placeholder.com/1024x568.jpg?text=5">
    		</div>
    		<div id="Arrows">
    			<i id="Prev" class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
    			<i id="Next" class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
    		</div>
    	</div>
      <script src="js/slideshow.js"></script>
    </section>

  </body>
</html>

Можно ли добавить переход к следующему изображению при нажатии кнопок «Далее» или «Назад»?

1 Ответ

2 голосов
/ 26 апреля 2020

Недостаточно просто использовать CSS для достижения того, что вы хотите. Я вижу, что вы также используете JS для достижения скользящей анимации, поэтому я решил также использовать JS для решения проблемы. Идея состоит в том, чтобы выполнить перевод, используя transform: translate(...) в сочетании с transition для анимации скольжения. Мы будем выполнять перевод изображений внутри слайд-шоу.

Вот пример, показывающий, как это можно сделать. Я решил использовать ваниль JS вместо jQuery, так как кажется, что вам не нужно jQuery.

Хотя это не связано, я исправил ваш HTML так, чтобы он меньше вложен, и я также переместил ваши стрелки div, чтобы их было проще настроить с помощью CSS. 

const next = document.querySelector('#Next')
const prev = document.querySelector('#Prev')
const slider = document.querySelector('#Slider')

let images = slider.querySelectorAll('img')
let currentImageIndex = 0
let maxImageIndex = images.length - 1

next.addEventListener('click', e => {
  updateCurrentImageIndex(1)
  slideImage()
})

prev.addEventListener('click', e => {
  updateCurrentImageIndex(-1)
  slideImage()
})

function updateCurrentImageIndex(value) {
  currentImageIndex += value
  if (currentImageIndex < 0) currentImageIndex = maxImageIndex
  else if (currentImageIndex > maxImageIndex) currentImageIndex = 0
}

function slideImage() {
  images.forEach(image => {
    image.style.transform = `translateX(${-100 * currentImageIndex}%)`
  })
}
* {
  box-sizing: border-box;
}

html {
  align-items: center;
  background-color: #31353D;
  display: flex;
  justify-content: center;
}

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#Slider {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  border: 5px solid #1C1D21;
  overflow: hidden;  
}

#Slider img {
  max-height: 100%;
  max-width: 100%;  
  flex: 0 0 100%;
  transition: all 1s;
}

#Arrows {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

#Arrows i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, .25);
  color: #1C1D21;
  cursor: pointer;
  height: 60px;
  padding: 15px;
  transition: background-color .5s, color .5s;
}

#Arrows i:last-of-type {
  left: 100%;
  transform: translate(-100%, -50%);
}

#Arrows i:hover {
  background-color: rgba(28, 29, 33, .75);
  color: #EEEFF7;
}
<html lang="en" dir="ltr">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="css/slideshow.css">
  <script src="js/display.js"></script>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
    <div id="Slider">
      <img src="http://via.placeholder.com/1024x568.jpg?text=1">
      <img src="http://via.placeholder.com/1024x568.jpg?text=2">
      <img src="http://via.placeholder.com/1024x568.jpg?text=3">
      <img src="http://via.placeholder.com/1024x568.jpg?text=4">
      <img src="http://via.placeholder.com/1024x568.jpg?text=5">
      <div id="Arrows">
        <i id="Prev" class="fa fa-chevron-left fa-2x" aria-hidden="true"></i>
        <i id="Next" class="fa fa-chevron-right fa-2x" aria-hidden="true"></i>
      </div>
    </div>
    <script src="js/slideshow.js"></script>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...