Как создать горизонтальную карусель (каждая пи c является ссылкой на сайт) - PullRequest
Новая
       23

Как создать горизонтальную карусель (каждая пи c является ссылкой на сайт)

0 голосов
/ 11 марта 2020

(Я создал пост, который был удален, потому что я не думаю, что дал достаточно информации или что-то еще? Я добавил сюда больше, включая код html, который я собрал. Пожалуйста, дайте мне знать, если это не приемлемо .)

Я пытаюсь создать горизонтальную карусель, где вы можете щелкнуть изображения, связанные с другими страницами. Я пробовал несколько типов каруселей через HTML, которые я нашел на w3schools.com и других сайтах, но ни один из них не был именно тем, что я искал. Вот то, что я смог собрать, но это не то, что я ищу. Это не прокручивает изображения как карусель. Я также хотел бы сделать ссылки на изображения. Есть предложения?

image

Вот второй пример, который я пробовал, но он просто не прав: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
}

.pagination a.active {
  background-color: dodgerblue;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd;}
</style>
</head>
<body>

<div class="pagination">
  <a href="#">&laquo;</a>
  <a href="example.com" target="_blank" rel="noreferrer noopener"><img src="https://example.com/image1.jpg" alt="Throw" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="example.com" target="_blank" rel="noreferrer noopener"><img src="https://example.com/image2.jpg" alt="room" style="float: left; width: 22%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="example.com" target="_blank" rel="noreferrer noopener"><img src="https://example.com/image3.jpg" alt=" sectional" style="float: left; width: 25%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="example.com" target="_blank" rel="noreferrer noopener"><img src="https://example.com/image4.jpg" alt="1970" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="#"><img src="https://example.com/image5.jpg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="example.com" target="_blank" rel="noreferrer noopener"><img src="https://exmple.com/image6.jpeg" alt="home" style="float: left; width: 17%; margin-right: 1.0em; margin-bottom: 1.0em;"></a>
  <a href="#">&raquo;</a>
</div>

</body>
</html>

Вот два примера того, как я бы хотел, чтобы это выглядело:

enter image description here

enter image description here

...